Android Tutorial Action List module - Creating a custom view

Erel · Jan 24, 2012

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:

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

koaunglay · Nov 14, 2014

Please help! I'm writing my first ringtoneapk. When user longclick on imageview I want to show ActionList. But I get some error.

koaunglay · Nov 14, 2014

This is my somecode!

B4X:

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
        Activity.LoadLayout("sv")
   
        bgsv.Panel.LoadLayout("pn")
            bgsv.Panel.Height = pan.Height
            ' ////////////// This is for list ....
            al = ActionListModule.InitializeList(90%x, "Choose action", "Main")
            ActionListModule.AddActionItem(al, "RingTone ", LoadBitmap(File.DirAssets, "bomb.png"), 1)
            ActionListModule.AddActionItem(al, "MessageTone ", Null, 2)
            ActionListModule.AddActionItem(al, "AlernTone ", Null, 3)
            ActionListModule.AddActionItem(al, "AllTone ", Null, 4)
            ' ////////////////////
End Sub

Sub iv_LongClick
    Dim vvv As ImageView
    vvv = Sender

        Select vvv.Tag
            Case "m1"
                ToastMessageShow("Clicked 111111111", False)
                '--------------------------------------------------------------------
                ActionListModule.Show(al, Activity, 10dip, 10dip)
            Case "m2"
                ToastMessageShow("Clicked 22222222", False)
            Case "m3"
                ToastMessageShow("Clicked 333333333333", False)
            Case "m4"
                ToastMessageShow("Clicked 444444444", False)
        End Select
End Sub

Erel · Nov 16, 2014

Can you post the full error message from the logs?

koaunglay · Nov 18, 2014

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

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

Now I'm writing ringtone apk. When I click on one Imageview, I want to show List. So I use this ActionListModule. But I get some error.

B4X:

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
        Activity.LoadLayout("sv")
  
        bgsv.Panel.LoadLayout("pn")
            bgsv.Panel.Height = pan.Height
            ' ////////////// This is for list ....
            al = ActionListModule.InitializeList(90%x, "Choose action", "Main")
            ActionListModule.AddActionItem(al, "RingTone ", LoadBitmap(File.DirAssets, "bomb.png"), 1)
            ActionListModule.AddActionItem(al, "MessageTone ", Null, 2)
            ActionListModule.AddActionItem(al, "AlernTone ", Null, 3)
            ActionListModule.AddActionItem(al, "AllTone ", Null, 4)
            ' ////////////////////
End Sub

This is for Longclick

B4X:

Sub iv_LongClick
    Dim vvv As ImageView
    vvv = Sender

        Select vvv.Tag
            Case "m1"
                ToastMessageShow("Clicked 111111111", False)
                '--------------------------------------------------------------------
                ActionListModule.Show(al, Activity, 10dip, 10dip)
            Case "m2"
                ToastMessageShow("Clicked 22222222", False)
            Case "m3"
                ToastMessageShow("Clicked 333333333333", False)
            Case "m4"
                ToastMessageShow("Clicked 444444444", False)
        End Select
End Sub

And This is for Globals

B4X:

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim al As ActionList
    ' ---------------------------------
    Private bgsv As ScrollView
    Private btn1 As Button
        ' ------------------------
        Dim ani As AnimationPlus
        Dim mp As MediaPlayer
        ' ----------------------------
    Private imv1 As ImageView
    Private imv2 As ImageView
    Private imv3 As ImageView
    Private pan As Panel
    Private imv10 As ImageView
    Private imv11 As ImageView
    Private imv12 As ImageView
    Private imv13 As ImageView
    Private imv14 As ImageView
    Private imv15 As ImageView
    Private imv4 As ImageView
    Private imv5 As ImageView
    Private imv6 As ImageView
    Private imv7 As ImageView
    Private imv8 As ImageView
    Private imv9 As ImageView
End Sub

I want to make for choose

koaunglay · Nov 18, 2014

Erel said:
Can you post the full error message from the logs?

This is error Pic
and myzip file

koaunglay · Nov 18, 2014

I don't know how should I copy and post the full error message from the logs. so I post The Image file

Erel · Nov 18, 2014

You can right click on the logs to copy them.

Can you upload your project (File - Export as zip)?

koaunglay · Nov 20, 2014

Thanks

Erel said:
You can right click on the logs to copy them.

Can you upload your project (File - Export as zip)?

Erel! This is my zip

B4X:

LogCat connected to: ?



Note: log switch off, only log_main and log_events will have logs!


--------- beginning of /dev/log/main
** Activity (main) Create, isFirst = true **


** Activity (main) Resume **


** Activity (main) Pause, UserClosed = false **


** Activity (ring) Create, isFirst = true **


java.lang.NoSuchFieldException: bg


    at java.lang.Class.getDeclaredField(Class.java:631)
    at anywheresoftware.b4a.agraham.reflection.Reflection.GetStaticField(Reflection.java:371)
    at b4a.example.actionlistmodule._createninepatchdrawable(actionlistmodule.java:160)
    at b4a.example.actionlistmodule._initializelist(actionlistmodule.java:216)
    at b4a.example.ring._activity_create(ring.java:342)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:175)
    at b4a.example.ring.afterFirstLayout(ring.java:98)
    at b4a.example.ring.access$100(ring.java:16)
    at b4a.example.ring$WaitForLayout.run(ring.java:76)
    at android.os.Handler.handleCallback(Handler.java:615)
    at android.os.Handler.dispatchMessage(Handler.java:92)
    at android.os.Looper.loop(Looper.java:137)
    at android.app.ActivityThread.main(ActivityThread.java:4791)
    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:789)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:556)
    at dalvik.system.NativeStart.main(Native Method)
java.lang.NoSuchFieldException: bg

Erel · Nov 20, 2014

Copy bg.png from the example package to Objects\res\drawable and make sure that it is read-only.

koaunglay · Nov 20, 2014

Thanks Erel! I'll try like that. So happy for your reply!

Android Tutorial Action List module - Creating a custom view

Attachments

koaunglay

Member

Attachments

koaunglay

Member

Erel

B4X founder

koaunglay

Member

koaunglay

Member

Attachments

koaunglay

Member

Attachments

Erel

B4X founder

koaunglay

Member

Attachments

Erel

B4X founder

koaunglay

Member

Similar Threads

Android Tutorial Action List module - Creating a custom view

Attachments

Member

Attachments

Member

B4X founder

Member

Member

Attachments

Member

Attachments

B4X founder

Member

Attachments

B4X founder

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency