Android Tutorial Action List module - Creating a custom view

Discussion in 'Tutorials & Examples' started by Erel, Jan 24, 2012.

  1. Erel

    Erel Administrator Staff Member Licensed User

    This is an old tutorial. More powerful custom views: [B4X] Custom Views with Enhanced Designer Support

    The attached project contains a code module which you can use in your projects to show a custom list which the user can choose from:

    [​IMG]

    The list is manually drawn. This means that it should not be too difficult to customize it and further improve it.

    There are several settings that can be changed in Sub Process_Globals:
    Code:
    Dim ItemHeight As Int : ItemHeight = 45dip
       
    Dim TextSize As Float : TextSize = 16 'NOT dip.
       Dim TextLeftPos As Int : TextLeftPos = 40dip
       
    Dim TextColor As Int : TextColor = Colors.LightGray
       
    Dim TopPadding As Int : TopPadding = 5dip
       
    Dim ImageWidth As Int : ImageWidth = 16dip
       
    Dim ImageHeight As Int : ImageHeight = 16dip
       
    Dim ImageLeftPos As Int : ImageLeftPos = 10dip
       
    Dim ImageTopPos As Int : ImageTopPos = (ItemHeight - ImageHeight) / 2
       
    Dim SelectionColor As Int : SelectionColor = 0xFFFF8000
    The background is a nine-patch image. See this tutorial for more information about these images: Nine patch images tutorial

    The following code demonstrates how to create and show this list:
    Code:
    Sub Globals
       
    Dim al As ActionList
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
       
    Activity.LoadLayout("1")
       al = ActionListModule.InitializeList(
    150dip"Choose action""Main")
       ActionListModule.AddActionItem(al, 
    "Item #1"LoadBitmap(File.DirAssets, "bomb.png"), 1)
       ActionListModule.AddActionItem(al, 
    "Item #2"LoadBitmap(File.DirAssets, "book_add.png"), 2)
       ActionListModule.AddActionItem(al, 
    "Item #3"LoadBitmap(File.DirAssets, "book_open.png"), 3)
       ActionListModule.AddActionItem(al, 
    "Item #4"LoadBitmap(File.DirAssets, "wrench.png"), 4)
       ActionListModule.AddActionItem(al, 
    "Item #5"LoadBitmap(File.DirAssets, "wrench_orange.png"), 5)
       ActionListModule.AddActionItem(al, 
    "Item #6"Null6)
    End Sub

    Sub ActionList_Touch (Action As Int, X As Float, Y As Float) As Boolean
       
    'Delegates the touch event to the code module
       ActionListModule.Touch(Sender, Action, X, Y)
       
    Return True
    End Sub


    Sub Activity_KeyPress (KeyCode As Int) As Boolean
       
    'Pressing the back key while the list is visible will close the list
       If KeyCode = KeyCodes.KEYCODE_BACK AND al.Visible Then
          ActionListModule.Hide(al)
          
    Return True
       
    End If
    End Sub
    'This sub is raised when the user presses on an item
    'ReturnValue is the value assigned to the selected item
    Sub ActionList_Result (ReturnValue As Object)
       
    Log(ReturnValue)
       
    ToastMessageShow("ReturnValue = " & ReturnValue, True)
    End Sub

    Sub btnShow_Click
       ActionListModule.Show(al, 
    Activity10dip10dip)
    End Sub
    Sub btnHide_Click
       ActionListModule.Hide(al)  
    End Sub
    In your activity module you should have ActionList global variable.
    The following line creates a new ActionList and assigns it to the variable:
    Code:
    al = ActionListModule.InitializeList(150dip"Choose action""Main")
    The parameters are: width, title and the activity module name (required for raising the Result event).

    Adding items is done by calling:
    Code:
    ActionListModule.AddActionItem(al, "Item #5"LoadBitmap(File.DirAssets, "wrench_orange.png"), 5)
    The parameters are: ActionList variable, item text, item image (or Null) and the value that will be returned when the user clicks on this item.

    This module requires the Animation library (the menu fades in and out) and Reflection library (for the nine-patch image).

    As explained in the nine-patch tutorial, the nine-patch image is located in Objects\res\drawable and it must be read-only.

    The code is also a good example for creating a custom view with a code module.

    Credits
    Background image: Android 9 patch
    Example icons: famfamfam.com: Silk Icons
     

    Attached Files:

    Last edited: Aug 11, 2016
    Mashiane, koaunglay and GMan like this.
  2. stefanoa

    stefanoa Active Member Licensed User

    great..
    thanks :sign0098:
     
  3. thedesolatesoul

    thedesolatesoul Expert Licensed User

    nice work erel
    is it scrollable?
     
  4. Erel

    Erel Administrator Staff Member Licensed User

    No (by design).
     
  5. hackhack

    hackhack Active Member Licensed User

    That's excellent Erel, very handy :)
     
  6. thedesolatesoul

    thedesolatesoul Expert Licensed User

    Okay.
    Probably if I pass a scrollview panel, it could easily be done.
    Thanks for this.
    I would also like a little arrow pointing, from where the list originates (like a pop up). But that would be a little bit more complicated.
    Thanks again!
     
  7. specci48

    specci48 Well-Known Member Licensed User

    Good sample but it's still some extra overhead.

    It would be nice to have an alternative to the InputList or InputMap supporting a simple layout without any checkboxes or radiobuttons. Its much easier to use and very handy if you don't need special graphical effects...


    specci48
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    Apart from initializing the list and adding the items there is not much code (which you just need to copy and paste). However the main advantage of this module is that it can be easily customized.
     
  9. specci48

    specci48 Well-Known Member Licensed User

    :sign0156:

    But still I think it's something weird to customize and use this to get the look, the feel and the behaviour of an android standard view... :sign0013:
     
  10. thedesolatesoul

    thedesolatesoul Expert Licensed User

    What are you looking for? Are you looking for a custom dialog or a simple list?
     
  11. Erel

    Erel Administrator Staff Member Licensed User

    Note that there is no such view in Android SDK. If there was such a view then it would have been easy to wrap it.

    The following company for example offers a pack of views including an action list for about $920: Pricing - DroidUX
     
  12. specci48

    specci48 Well-Known Member Licensed User

    Hmm... so the ContextMenu is no standard view? :confused:
     

    Attached Files:

  13. specci48

    specci48 Well-Known Member Licensed User

    :sign0094::sign0138:

    Instead I definitly would buy 27 licenses of Basic4Android... :sign0162:
     
  14. thedesolatesoul

    thedesolatesoul Expert Licensed User

  15. Erel

    Erel Administrator Staff Member Licensed User

    You cannot compare this:
    [​IMG]

    To:
    [​IMG]

    ;)
     
  16. JonPM

    JonPM Well-Known Member Licensed User

    Lol I was thinking the same thing

    Sent from my DROIDX
     
  17. specci48

    specci48 Well-Known Member Licensed User

    That's exactly what I was looking for!
    Shame on me that I have missed this library so far. Expected this always as a part of the core... :sign0148:

    Btw... in my eyes its a legal comparison because both variants provide a list of options where the user can choose one, regardsless of the graphical presentation.


    specci48
     
  18. JonPM

    JonPM Well-Known Member Licensed User

    The whole point of this thread IS the graphical representation of the list...

    Sent from my DROIDX
     
  19. alfcen

    alfcen Well-Known Member Licensed User

    Brilliant

    Always appreciate great ideas realized with good work! The module is fully customisable - no additional wishes. In addition, it is a nice tutorial. :sign0098:
    To date, I tinkered my pop-up menus with a listview. This is far more elegant, also considering that the majority of users out there appreciate animation effects. I think the trend goes towards "gamification", or eye candies.
     
  20. peacemaker

    peacemaker Well-Known Member Licensed User

    Nice module, thanks Erel.

    Bug report: if always visible - at short taps the old selection is not removed. Removed only after UP if sliding finger over the component.

    I'm trying to make TabHost2 from this module, fully controllable by the design, but.... it's rather complicated module for me to understand the grafical coding:|
    I guess, i will be able to make a new view using only standard Labels, ImageView and Buttons over a panel.
     
    Last edited: Feb 1, 2012
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice