B4A Library DesignSupport - Additional Material Design components

This library is a wrapper to some of the objects of Googles Design Support library.

Requirements:

This library requires B4A 6.31 or above.
From V2.32 on B4A V6.80 or newer is required. If you use an older B4A version use the V2.31 library.
AppCompat 3.30 or above is required.
The examples need some additional libraries like AHViewPager, XMLViewEx, XMLLayoutBuilder

Currently it supports:

• Snackbar - The new modern toastmessages
  
  
• TabLayout - The new material like tabs with fixed tabs and scrolling tabs feature. Works standalone or together with a ViewPager library. Supports icons as tabs and custom layouts for the tabs.
  
  
• FloatlabelEditText - An enhanced EditText object that supports a floating label, counter and error messages.
  
  
• FloatingActionButton - A very simple Floating Action Button. Has show- and hide animations but is very simple.
  
• NavigationDrawer - Material Design compliant Navigation Drawer. See NavigationView Example for detailed instructions.
  
• BottomNavigationView - Material Design compliant Bottom Navigation View. See BottomNavigationView Example for detailed instructions.
  

Installation:

Note: Please, Please read these instructions carefully. AppCompat depends on many things like a special theme with special features. Even special versions of build tools are required and last but not least there are often bugs in the Google support libraries.

I created this instructions to help you getting things ready for using AppCompat. So please follow these instructions carefully and all should work as expected and you don't have to ask in the forum.

Thanks.

1. This library depends on the AppCompat library. So do all the setup needed for AppCompat.
2. Copy the DesignSupport.xml, DesignSupport.jar and DesignSupport.aar files to your CustomLibs folder
3. Install/Update Android Support Packages with the SDK Manager.

Setup and usage:

1. Setup your project like a project that uses AppCompat library.

If you want to use the DSFloatlabelEditText object with the ErrorText or counter feature you should add the following item to your Theme:

<item name="textColorError">@color/design_textinput_error_color_light</item>

Otherwise your app will crash if the textinput reaches the maxCounter length.

If you want to use the DSNavigationDrawer object you should add the following items to your Theme:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>

Your support:
Creating libraries and wrappers for existing library projects is a lot of work. The use of this library is totally free and you even don't need to mention in your app that you use it.
But if you use this library in your projects and you think it is useful to you please consider to make a donation:

Thanks very much for your support.

Version History:

V1.00

• Initial version with SnackBar and TabLayout objects.

V2.00

• Requires B4A 6.0 or above
• Uses new Maven repositories for support libraries
• Enhanced Designer support (custom properties are supported)
• New: DSFloatlabelEditText - New EditText with floating label, counter, error messages
• New: DSFloatingActionButton - Standard Floating Action Button.

V2.10

• New: Requires Support Repository 36
• New: DSNavigationDrawer - A complete DrawerLayout implementation/wrapper
• New: DSNavigationView
• New: Support for ShowPasswordToggle in FloatLabelEditText
• Fix: FloatLabelEditText.Enabled=True/False should work now.

V2.20

• Fix: DSNavigationDrawer should work without a secondary drawer.
• New: BottomNavigationView - Wrapper for the BottomNavigationView
• Fix: Some minor fixes and changes

V2.21

• Fix: DSTablayout can use other ViewPagers than AHViewPager
• Fix: Small internal bugfixes.

V2.22

• Fix: Change packagename to anywheresoftware.b4a.orbjects to reduce resouce fields

V2.23

• Fix: Fix error in FloatLabelEditText

V2.30

• New: Dismiss event for DSSnackbar
• New: Support CharSequence where possible

V2.31

• Fix: Getters return String instead of CharSequence to avoid problems.

V2.32

• Fix: Compiled against B4A 6.80 Core library to avoid some problems with CharSequences.

V3.00

• Fix: Compiled against Support Library 28.0.0 to fix a problem with TabLayout

 

[DonManfred]

Is it possible I can change those Label value from the code window?

Why not? Note that you need to understand what is happening in the Navdrawer.

    NavDrawer.NavigationView.LoadLayout( "navheaderLayout.bal", NavDrawer.DefaultHeaderHeight)

You are getting the NavDrawers Navigationview and load a Layout to it.
So. The Navdrawers Navigationview will contain all from the layout. The Navigationview is the base panel and it contains two Labels.

Try to imagine what happens in this code.
Sidenote: instead of logging you surely can change the Text....

    NavDrawer.NavigationView.LoadLayout( "navheaderLayout.bal", NavDrawer.DefaultHeaderHeight)
    Log("Headercount = "&NavDrawer.NavigationView.HeaderCount)
    Dim hpnl As Panel = NavDrawer.NavigationView.GetHeaderView(0)
    For Each v As View In hpnl.GetAllViewsRecursive
        If v Is Label Then
            Dim lbl As Label = v
            Log(lbl.Text)
        End If
    Next

 

[A Z M JANNAT UL KARIM]

Why not? Note that you need to understand what is happening in the Navdrawer.

    NavDrawer.NavigationView.LoadLayout( "navheaderLayout.bal", NavDrawer.DefaultHeaderHeight)

You are getting the NavDrawers Navigationview and load a Layout to it.
So. The Navdrawers Navigationview will contain all from the layout. The Navigationview is the base panel and it contains two Labels.

Try to imagine what happens in this code.
Sidenote: instead of logging you surely can change the Text....

    NavDrawer.NavigationView.LoadLayout( "navheaderLayout.bal", NavDrawer.DefaultHeaderHeight)
    Log("Headercount = "&NavDrawer.NavigationView.HeaderCount)
    Dim hpnl As Panel = NavDrawer.NavigationView.GetHeaderView(0)
    For Each v As View In hpnl.GetAllViewsRecursive
        If v Is Label Then
            Dim lbl As Label = v
            Log(lbl.Text)
        End If
    Next

Manfred, you are a life saver. It worked !!! Thank you very much. I do not know the processes very well and yet to familiar with a lot of options. Seems to be I need to start with the Beginners Guide again. If you have any survival guide for me please dont hesitate to mention.

Again thank you

 

[wimpie3]

Is it possible to change the font of the menu items in a NavigationDrawer?

 

[DonManfred]

Is it possible to change the font of the menu items in a NavigationDrawer?

see https://www.b4x.com/android/forum/t...l-design-components.58893/page-12#post-508357
You can set the typeface to the labels (in this case of the header).

It should be possible to do similar with a nav-item. I GUESS.

 

[wimpie3]

This only works because the header is a B4A panel, which contains labels.

The menu items are constructed are constructed by the library - I guess we need Java reflection to get those labels.

 

[yiankos1]

Good morning,
Is there any way to change hint text size for floating edit text.
Thank you for your time.

EDIT:
If you edit this file: (project directory)\Objects\bin\extra\res11\res\values\values.xml

this section:

    <style name="TextAppearance.Design.Hint" parent="TextAppearance.AppCompat.Caption">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">?attr/colorControlActivated</item>

    </style>

it is only changes font size of hint when it goes up(when you enter text).
That what i want is to change font size of hint when nothing is entered.

 

[ihabsharaf]

hi
how to redraw NavDrawers items
and build right to left drawer

 

[MichalK73]

I use TabLayout at the bottom of the Activity as a menu with icons.
For example, it adds 3 items consisting of the same icons and assigns Tag. It is always set to the first position or I can set from 1 to 3.
When using TabSelected, it checks to see if the Tab selection has changed. If the user clicks on an icon that is set as home then it does not execute the code after checking the Tag.
For example, initially SelectTab is set to 1. If a user clicks on the ikone with position 1, it will not execute the code, but at 2 and 3 will execute. Then you can select 1 but not last used.

Can it be done by some way that TabSelected executes the code in the selected position?

 

[desof]

How can I load a different Layout on each Panel?

For i = 0 To 2
        'Cree un panel para la página con un color aleatorio.
        Dim p As Panel       
        p.Initialize("")
        p.Color = Colors.RGB(223,224,226)   
        Dim pageName As String
        pageName = ""' & i       
        PC.AddPage(p, pageName)               
        subMenu.AddWithGroup2(3, 100+i, 100+i, pageName, xml.GetDrawable("ic_bookmark_black_24dp"))
    Next

 

[DonManfred]

p.LoadLayout(...)

 

[shashkiranr]

Hi All,

Is there a way to change the color of the tab when it is clicked? Apart from loading custom view into the tab.

Best,
SK

 

[Fusseldieb]

is it possible to add a notification counter in the navigation drawer view? like this:

 

[corwin42]

This should be possible with a custom view. See the example. There is a SwitchCompat object in the menu. A counter should be possible similar.

 

[tzfpg]

Hi all,
i had problem with FloatLabelEditText show password toggle, i try with sample in first page but when run got error.

--------- beginning of main
** Activity (main) Pause, UserClosed = true **
** Activity (main) Create, isFirst = false **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = true **
Copying updated assets files (1)
** Activity (main) Create, isFirst = true **
java.lang.NoSuchMethodError: No virtual method setPasswordVisibilityToggleEnabled(Z)V in class Lde/amberhome/objects/FloatlabelEditTextWrapper$InnerTextInputLayout; or its super classes (declaration of 'de.amberhome.objects.FloatlabelEditTextWrapper$InnerTextInputLayout' appears in /data/app/example.floatinglabeledittext-1/base.apk)
    at de.amberhome.objects.FloatlabelEditTextWrapper.DesignerCreateView(FloatlabelEditTextWrapper.java:105)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:70)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:158)
    at anywheresoftware.b4a.objects.ActivityWrapper.LoadLayout(ActivityWrapper.java:209)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:710)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:342)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:249)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:139)
    at example.floatinglabeledittext.main.afterFirstLayout(main.java:102)
    at example.floatinglabeledittext.main.access$000(main.java:17)
    at example.floatinglabeledittext.main$WaitForLayout.run(main.java:80)
    at android.os.Handler.handleCallback(Handler.java:836)
    at android.os.Handler.dispatchMessage(Handler.java:103)
    at android.os.Looper.loop(Looper.java:203)
    at android.app.ActivityThread.main(ActivityThread.java:6251)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1063)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:924)
** Activity (main) Resume **

what i miss?

 

[corwin42]

I guess your support repository is too old.

You will need design support library 24.2.0 or newer.

 

[beaker]

I've just implemented the NavigationDrawer from this library in one of my apps and it's looking great. However, I have an issue regarding .ItemCollapsed. Here's a snippet of my code which all works just fine, except that I was hoping that the the ACSubMenu "smAccount" would be collapsed until tapped on. Have I misunderstood what ".ItemCollapsed" does or am I doing something wrong?

Dim smAccount As ACSubMenu
smAccount = NavDrawer.NavigationView.Menu.AddSubMenu(1, 1000, 1000, "Account")
smAccount.AddWithGroup2(1, miUpgrade, 1001, "Upgrade", xml.GetDrawable("ic_account_circle_black_24dp")).ItemCollapsed=True
 
If auth.CurrentUser.IsInitialized Then
   smAccount.AddWithGroup2(1, miSignout, 1001, "Sign Out", xml.GetDrawable("ic_account_off_black_24dp")).ItemCollapsed=True
   smAccount.AddWithGroup2(1, miSync, 1002, "Sync", xml.GetDrawable("ic_cloud_sync_black_24dp")).ItemCollapsed=True
Else
   smAccount.AddWithGroup2(1, miSignin, 1001, "Sign In", xml.GetDrawable("ic_account_circle_black_24dp")).ItemCollapsed=True
End If

I've even tried adding this code too but it still doesn't collapse.

    NavDrawer.NavigationView.Menu.FindItem(1000).ItemCollapsed=True

 

[DonManfred]

mAccount (AcSubMenu) does not have a ItemCollapsed.


ItemCollaped is a Property from a AcMenuItem

https://www.b4x.com/android/help/appcompat.html#acmenuitem_itemcollapsed

It is used for the Searchview for ex.

You can use submenu.Close to close a Submenu

 

[beaker]

mAccount (AcSubMenu) does not have a ItemCollapsed.


ItemCollaped is a Property from a AcMenuItem

https://www.b4x.com/android/help/appcompat.html#acmenuitem_itemcollapsed

It is used for the Searchview for ex.

You can use submenu.Close to close a Submenu

Thanks DonManfred. I've now removed all of my .ItemCollapsed values and added

smAccount.Close

after adding all my items to the submenu. Unfortunately it's made no difference . The submenu is still 'expanded' (see attached screenshot). Again, I might be misunderstanding what submenu.close does but what I'm after is getting the items below the submenu heading (in this case "Account") not to show until I tap on "Account", at which point I want the menu to expand and show the items belonging to that submenu.

 

[corwin42]

I haven't tried this but it may be possible to add a Expandable List as ActionView to the menu. (Like the switch in the NavigationView example).

Another solution may be to show and hide the sub menus on click on the parent menu item.

Using the itemcollapsed attribute will not work.

 

[beaker]

I haven't tried this but it may be possible to add a Expandable List as ActionView to the menu. (Like the switch in the NavigationView example).

Another solution may be to show and hide the sub menus on click on the parent menu item.

Using the itemcollapsed attribute will not work.

Thanks @corwin42 I've had a quick look but I'm not having any luck 'catching' the click on the submenu heading itself or managing to show/hide the submenu items. I'll take a look at the Expandable List you kindly linked to as that might do what I need. I thought it was going to be an basic property/behaviour of the submenu but obviously I was wrong! Thanks again for your help.