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:

SS-2012-01-24_12.20.48.png


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

Attachments

  • ActionList.zip
    13 KB · Views: 1,817
Last edited:

alan1968

Active Member
Licensed User
Longtime User
I put my app in beta test on marquet and I have a user that I shared an error Appears when he selects a elelment the list in the procedure "touch" I can not reproduce this has any error on my tablet and smarphone apparently it must be in android 3.0

the rapport

"vBeta 1.026 févr. 2012 11:21:401 rapports par semaine
100%1 rapports
--------------------------------------------------------------------------------

java.lang.RuntimeException: MotionEvent { action=ACTION_UP, id[0]=0, x[0]=679.0, y[0]=240.0, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x0, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=72384276, downTime=72384088, deviceId=2, source=0x1002 } recycled twice!
at android.view.MotionEvent.recycle(MotionEvent.java:1673)
at android.view.ViewRootImpl.finishMotionEvent(ViewRootImpl.java:2904)
at android.view.ViewRootImpl.deliverPointerEvent(ViewRootImpl.java:2895)
at android.view.ViewRootImpl.handleMessage(ViewRootImpl.java:2466)
at android.view.ViewRootImpl.processInputEvents(ViewRootImpl.java:845)
at android.view.ViewRootImpl.handleMessage(ViewRootImpl.java:2475)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:4424)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
at dalvik.system.NativeStart.main(Native Method)
"
 

Attachments

  • SC20120226-135123.jpg
    SC20120226-135123.jpg
    25.6 KB · Views: 440
  • menu.jpg
    menu.jpg
    9.1 KB · Views: 480
Last edited:

priitp

Member
Licensed User
Longtime User
Nice module.

I had an options menu and one user complained that it doesn't show up in Android 4 (HTC One V).
Thought that it is backward compatibility issue and implemented the ActionList.
Launcing it as
B4X:
Sub Activity_KeyPress (KeyCode As Int) As Boolean
If KeyCode = KeyCodes.KEYCODE_MENU Then

Still no success.
Appears there is no Meny key any more (but it still does exsist in Emulator).

What might be a good way to open this ActionList?

I have read about three vertical dots somewhere on Action
and about long keypress on MultiTasking/Recent Applications.

Thanks
Priit
 

priitp

Member
Licensed User
Longtime User
Thanks Erel,

I made one menu item and clicking on it does open ActionList.
It works but has one extra step/click.
Click on three dots -> Click on menu item -> Click on ActionList item

Could it be possible to capture/process the click on the three verical dots and bypass the extra step?

Priit
 

priitp

Member
Licensed User
Longtime User
At least in emulator with debuger it doesnt fire keypress when clicking on the three dots.
B4X:
Sub Activity_KeyPress (KeyCode As Int) As Boolean

Priit
 

priitp

Member
Licensed User
Longtime User
What KeyCode does it give?
KeyCodes.KEYCODE_MENU?

Sorry, can't find it myself.
Priit
 

Bernd68

Member
Licensed User
Longtime User
How to get ActionList without a title

Hi Erel,

i've implemented the Al Modul and it works very smooth. but now i would need an ActionList without the title.
So i've tried the following

B4X:
   al = ActionListModule.InitializeList(150dip, Null, "Main")

So no text for the Title is shown, which is correct, but the ActionList still holds "an empty part" for the title.

May you could update the module, that in case of "No title / Null", the space for the title will be removed.

Tried myself, but still learn and could not figure it out.

Regards
Bernd
 

Yeshua

Member
Licensed User
Longtime User
item click

:sign0085:how do I get to perform an action when an item is pressed?

for example:

If "item #1" click then Panel1.Visible = True.

Thanks!
 

adalexander

Member
Licensed User
Longtime User
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:

SS-2012-01-24_12.20.48.png


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


What is a bas file and where it goes on, I find it written anywhere but I do not understand, thank you ..
 

adalexander

Member
Licensed User
Longtime User
[Quote = "Erel, palo: 81.206, membro: 1"] Il progetto allegato contiene un modulo di codice che è possibile utilizzare nei vostri progetti per mostrare un elenco personalizzato che l'utente può scegliere tra:

SS-2012-01-24_12.20.48.png


L'elenco viene compilato manualmente. Ciò significa che non dovrebbe essere troppo difficile da personalizzare e migliorare ulteriormente esso.

Ci sono diverse impostazioni che possono essere modificate in Process_Globals Sub:
B4X:
   Dim ItemHeight Come Int: ItemHeight = 45dip
   Dim TextSize Come Float: TextSize = 16 'NON immergere.
   TextLeftPos Dim come INT: TextLeftPos = 40DIP
   Dim TextColor Come Int: TextColor = Colors.LightGray
   Dim TopPadding Come Int: TopPadding = 5dip
   Dim ImageWidth Come Int: ImageWidth = 16DIP
   Dim ImageHeight Come Int: ImageHeight = 16DIP
   ImageLeftPos Dim come INT: ImageLeftPos = 10dip
   ImageTopPos Dim come INT: ImageTopPos = (ItemHeight - ImageHeight) / 2
   Dim SelectionColor Come Int: SelectionColor = 0xFFFF8000
[/ Code]

Lo sfondo è un'immagine nove patch. Vedere questo tutorial per ulteriori informazioni su queste immagini: [URL='http://www.b4x.com/forum/showthread.php?p=80908']Nove immagini di patch esercitazione[/URL]

Il seguente codice mostra come creare e mostrare questo elenco:
[Code]
Global Sub
   Dim al Come ActionList
End Sub

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

Sub ActionList_Touch (Azione Come Int, X come float, Y come Float) come booleano
   'I delegati l'evento di tocco al modulo di codice
   ActionListModule.Touch (Sender, Azione, X, Y)
   Ritorno Vero
End Sub


Sub Activity_KeyPress (KeyCode Come Int) come booleano
   'Premendo il tasto indietro, mentre la lista è visibile chiuderà la lista
   Se KeyCode = KeyCodes.KEYCODE_BACK E al.Visible Poi
      ActionListModule.Hide (al)
      Ritorno Vero
   End If
End Sub
'Questo sub viene generato quando l'utente preme su un elemento
'ReturnValue è il valore assegnato alla voce selezionata
Sub ActionList_Result (ReturnValue As Object)
   Log (ReturnValue)
   ToastMessageShow ("ReturnValue =" & ReturnValue, True)
End Sub

Sub btnShow_Click
   ActionListModule.Show (al, Attività, 10dip, 10dip)
End Sub
Sub btnHide_Click
   ActionListModule.Hide (al)  
End Sub
[/ Code]
Nel modulo attività si dovrebbe avere ActionList variabile globale.
La riga seguente crea un nuovo ActionList e lo assegna alla variabile:
[Code]
al = ActionListModule.InitializeList (150dip, "Scegli azione", "Main")
[/ Code]
I parametri sono: larghezza, il titolo e il nome del modulo attività (necessaria per generare l'evento Risultato).

L'aggiunta di elementi viene fatto chiamando:
[Code]
ActionListModule.AddActionItem ("# articolo 5" al,, LoadBitmap (File.DirAssets, "wrench_orange.png"), 5)
[/ Code]
I parametri sono: variabile ActionList, una nota di testo, immagine articolo (o nullo) e il valore che verrà restituito quando l'utente fa clic su questo elemento.

Questo modulo richiede la libreria Animation (il menu svanisce in e out) e la biblioteca di riflessione (per l'immagine nove patch).

Come spiegato nel tutorial nove patch, l'immagine nove-patch si trova negli oggetti \ res \ drawable e deve essere di sola lettura.

Il codice è anche un buon esempio per la creazione di una visualizzazione personalizzata con un modulo di codice.

[B]Credits[/B]
Immagine di sfondo: [URL='http://android9patch.blogspot.com/']Android 9 cerotto[/URL]
Icone Esempio: [URL='http://famfamfam.com/lab/icons/silk/']famfamfam.com: Silk Icons[/URL] [/ quote]
[Quote = "Erel, palo: 81.206, membro: 1"] Il progetto allegato contiene un modulo di codice che è possibile utilizzare nei vostri progetti per mostrare un elenco personalizzato che l'utente può scegliere tra:

[IMG]http://www.b4x.com/basic4android/images/SS-2012-01-24_12.20.48.png[/IMG]

L'elenco viene compilato manualmente. Ciò significa che non dovrebbe essere troppo difficile da personalizzare e migliorare ulteriormente esso.

Ci sono diverse impostazioni che possono essere modificate in Process_Globals Sub:
[Code]
   Dim ItemHeight Come Int: ItemHeight = 45dip
   Dim TextSize Come Float: TextSize = 16 'NON immergere.
   TextLeftPos Dim come INT: TextLeftPos = 40DIP
   Dim TextColor Come Int: TextColor = Colors.LightGray
   Dim TopPadding Come Int: TopPadding = 5dip
   Dim ImageWidth Come Int: ImageWidth = 16DIP
   Dim ImageHeight Come Int: ImageHeight = 16DIP
   ImageLeftPos Dim come INT: ImageLeftPos = 10dip
   ImageTopPos Dim come INT: ImageTopPos = (ItemHeight - ImageHeight) / 2
   Dim SelectionColor Come Int: SelectionColor = 0xFFFF8000
[/ Code]

Lo sfondo è un'immagine nove patch. Vedere questo tutorial per ulteriori informazioni su queste immagini: [URL='http://www.b4x.com/forum/showthread.php?p=80908']Nove immagini di patch esercitazione[/URL]

Il seguente codice mostra come creare e mostrare questo elenco:
[Code]
Global Sub
   Dim al Come ActionList
End Sub

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

Sub ActionList_Touch (Azione Come Int, X come float, Y come Float) come booleano
   'I delegati l'evento di tocco al modulo di codice
   ActionListModule.Touch (Sender, Azione, X, Y)
   Ritorno Vero
End Sub


Sub Activity_KeyPress (KeyCode Come Int) come booleano
   'Premendo il tasto indietro, mentre la lista è visibile chiuderà la lista
   Se KeyCode = KeyCodes.KEYCODE_BACK E al.Visible Poi
      ActionListModule.Hide (al)
      Ritorno Vero
   End If
End Sub
'Questo sub viene generato quando l'utente preme su un elemento
'ReturnValue è il valore assegnato alla voce selezionata
Sub ActionList_Result (ReturnValue As Object)
   Log (ReturnValue)
   ToastMessageShow ("ReturnValue =" & ReturnValue, True)
End Sub

Sub btnShow_Click
   ActionListModule.Show (al, Attività, 10dip, 10dip)
End Sub
Sub btnHide_Click
   ActionListModule.Hide (al)  
End Sub
[/ Code]
Nel modulo attività si dovrebbe avere ActionList variabile globale.
La riga seguente crea un nuovo ActionList e lo assegna alla variabile:
[Code]
al = ActionListModule.InitializeList (150dip, "Scegli azione", "Main")
[/ Code]
I parametri sono: larghezza, il titolo e il nome del modulo attività (necessaria per generare l'evento Risultato).

L'aggiunta di elementi viene fatto chiamando:
[Code]
ActionListModule.AddActionItem ("# articolo 5" al,, LoadBitmap (File.DirAssets, "wrench_orange.png"), 5)
[/ Code]
I parametri sono: variabile ActionList, una nota di testo, immagine articolo (o nullo) e il valore che verrà restituito quando l'utente fa clic su questo elemento.

Questo modulo richiede la libreria Animation (il menu svanisce in e out) e la biblioteca di riflessione (per l'immagine nove patch).

Come spiegato nel tutorial nove patch, l'immagine nove-patch si trova negli oggetti \ res \ drawable e deve essere di sola lettura.

Il codice è anche un buon esempio per la creazione di una visualizzazione personalizzata con un modulo di codice.

[B]Credits[/B]
Immagine di sfondo: [URL='http://android9patch.blogspot.com/']Android 9 cerotto[/URL]
Icone Esempio: [URL='http://famfamfam.com/lab/icons/silk/']famfamfam.com: Silk Icons[/URL] [/ quote]

hello erel a question, and I would like to anda twolines listview bitmap, I've seen several guides but all incomprehensible, I do not understand the steps, considering that I'm learning from you, but I already have something long is the road had often find guides for people who are already advanced do not go well for me, how can I do to create this list? I am reading other guides also visual basic, but this language is a bit different, but there is not a guide to understand this language? thanks for everything ..
 
Top