Android Tutorial Action List module - Creating a custom view

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:

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:

   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:

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", Null, 6)
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, Activity, 10dip, 10dip)
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:

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:

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

 

[stefanoa]

great..
thanks :sign0098:

 

[thedesolatesoul]

nice work erel
is it scrollable?

 

[Erel]

is it scrollable?

No (by design).

 

[hackhack]

That's excellent Erel, very handy

 

[thedesolatesoul]

No (by design).

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!

 

[specci48]

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

 

[Erel]

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.

 

[specci48]

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.

: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:

 

[thedesolatesoul]

: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:

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

 

[Erel]

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...

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

 

[specci48]

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

 

[specci48]

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

:sign0094::sign0138:

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

 

[thedesolatesoul]

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

You can make this: http://www.b4x.com/forum/additional-libraries-official-updates/11136-popup-menu-list-library.html
I dont know if it is standard or not.

 

[Erel]

You cannot compare this:

To:

 

[JonPM]

You cannot compare this:...

Lol I was thinking the same thing

Sent from my DROIDX

 

[specci48]

You can make this: http://www.b4x.com/forum/additional-libraries-official-updates/11136-popup-menu-list-library.html
I dont know if it is standard or not.

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

 

[JonPM]

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

Sent from my DROIDX

 

[alfcen]

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.

 

[peacemaker]

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.