B4A Library DesignSupport - Additional Material Design components

corwin42 · Oct 1, 2015

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.

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

Setup and usage:

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:

B4X:

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

B4X:

<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

Stefano Schirinzi · Sep 15, 2016

Hy guys. In the NavigationView1_0 example a heve this error:

"java.lang.RuntimeException: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor.
Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead."

Anyone can help me?

fredo · Sep 15, 2016

I once had that same error when I used the Toolbar in another activity.

After a while I read the message again and found ...

Stefano Schirinzi said:
set windowActionBar to false in your theme

... very helpful.

So maybe a look in the Manifest may help you

Stefano Schirinzi · Sep 15, 2016

fredo said:
I once had that same error when I used the Toolbar in another activity.

After a while I read the message again and found ...

... very helpful.

So maybe a look in the Manifest may help you
View attachment 47847

Fredo. My manifest is exactly the same

fredo · Sep 15, 2016

Hmmm...

Your

Stefano Schirinzi said:
...the NavigationView1_0 example ...

runs on my system without an error.

Maybe first check the version numbers:

Stefano Schirinzi · Sep 15, 2016

fredo said:
Hmmm...

Your runs on my system without an error.

Maybe first check the version numbers:
View attachment 47850

Maybe is because this (in path):
javac.exex:C:\Program Files\Java\jdk1.8.0_101\bin\javac.exe
android.jar:C:\Android\platforms\android-24\android.jar

Stefano Schirinzi · Sep 15, 2016

this is the complete image of the error:

Stefano Schirinzi · Sep 15, 2016

this is the complete image of the error

fredo · Sep 15, 2016

If you followed the requirements and haven't modified the example project of @corwin42 then it should run flawless.

However, it seems to be related to the Theme.

Try with this line added to the Manifest:

B4X:

<item name="android:windowActionBarOverlay">false</item>

so that the relevant part looks like this:

B4X:

'Tell the system that we want to draw the SystemBarBackgrounds and
'make the StatusBar transparent.
CreateResource(values, theme.xml,
<resources>
    <style name="MyAppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#0098FF</item>
        <item name="colorPrimaryDark">#007CF5</item>
        <item name="colorAccent">#FF5522</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowActionBarOverlay">false</item>
    </style>
</resources>
)

If this doesn't work please post the following:

a) Screenshot of the checked libraries in the Libraries manager of B4A

Something like:

b) Screenshot of the installed SDK files

Something like:

Stefano Schirinzi · Sep 17, 2016

problem solved tanks a lot

corwin42 · Sep 23, 2016

corwin42 said:
Thanks. I will change the library in the first post.

Uploaded the library in the first post again. It is still version 2.10 as before. Only change is the @RaisesSynchronousEvents change in the xml file from Erel (see post #105)

corwin42 · Sep 29, 2016

AndOrNot said:
Hi @corwin42 , great work! Only one question, is possibile to change hint text color of float label, when it is not selected? I saw it black. I tried to change all color property in view, but doesn't work

This is currently not really supported. There is no way to change it programatically. I'm currently thinking about a "trick" to set a custom theme to AppCompat and DesignSupport Views. Then it may be possible to set an individual theme for a view. Currently it is not possible to change it.

asales · Oct 9, 2016

I tried to create an example only with the NavigationDrawer and without the Switch and ToolBar.
The navigation drawer is show fine, but I get this error when I click in any menu option of this drawer:

B4X:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.Menu android.support.design.widget.NavigationView.getMenu()' on a null object reference
    at de.amberhome.objects.NavigationDrawerWrapper$1.onNavigationItemSelected(NavigationDrawerWrapper.java:114)
    at android.support.design.widget.NavigationView$1.onMenuItemSelected(NavigationView.java:153)
    at android.support.v7.view.menu.MenuBuilder.dispatchMenuItemSelected(MenuBuilder.java:810)
    at android.support.v7.view.menu.MenuItemImpl.invoke(MenuItemImpl.java:152)
    at android.support.v7.view.menu.MenuBuilder.performItemAction(MenuBuilder.java:957)
    at android.support.design.internal.NavigationMenuPresenter$1.onClick(NavigationMenuPresenter.java:328)
    at android.view.View.performClick(View.java:5201)
    at android.view.View$PerformClick.run(View.java:21163)
    at android.os.Handler.handleCallback(Handler.java:746)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5443)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:728)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)

Is possible to use the navigation drawer alone?
If yes, how I can fix this error?

This is the code and the project is in attached:

B4X:

#Region  Project Attributes
    #ApplicationLabel: Navigation Drawer
    #VersionCode: 1
    #VersionName: 1.00
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

#AdditionalRes: "..\resource"
#Extends: android.support.v7.app.AppCompatActivity

Sub Process_Globals
End Sub

Sub Globals
    Private NavDrawer As DSNavigationDrawer   
    Private btnOpenDrawer As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    BuildNavigationDrawer

    Activity.LoadLayout("Layout1")
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btnOpenDrawer_Click
    If NavDrawer.IsDrawerOpen Then
        NavDrawer.CloseDrawer
    Else
        NavDrawer.OpenDrawer
    End If   
End Sub

Sub BuildNavigationDrawer
    Dim xml As XmlLayoutBuilder
       
    NavDrawer.Initialize2("NavDrawer", Activity, NavDrawer.DefaultDrawerWidth, NavDrawer.GRAVITY_START)
   
    NavDrawer.NavigationView.LoadLayout( "navheaderLayout", NavDrawer.DefaultHeaderHeight)   
           
    NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", xml.GetDrawable("ic_home_black_24dp")).Checked = True
               
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 10, 1000, "Settings", xml.GetDrawable("ic_settings_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 11, 1100, "Feedback", xml.GetDrawable("ic_feedback_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 12, 1200, "Help", xml.GetDrawable("ic_help_black_24dp"))
    NavDrawer.NavigationView.Menu.SetGroupCheckable(2, True, True)       
End Sub

Sub NavDrawer_NavigationItemSelected (MenuItem As ACMenuItem, DrawerGravity As Int)
    LogColor("NavItem selected: " & MenuItem.Title, Colors.Green)

    If MenuItem.Id >= 100 Then
        ToastMessageShow(MenuItem.Id, False)
    End If
   
    NavDrawer.CloseDrawer2(DrawerGravity)
End Sub

Thanks in advance for any tips.

asales · Oct 14, 2016

I found this answers to my problem. If there other way, I'll be glad to know.

asales said:
Is possible to use the navigation drawer alone?

No. We need to create a second drawer to work fine.

asales said:
If yes, how I can fix this error?

Create a second drawer with 1dip in width and locked it:

NavDrawer.AddSecondaryDrawer(1dip, NavDrawer.LOCK_MODE_LOCKED_CLOSED)

tuhatinhvn · Oct 16, 2016

B4X:

Dim xml As XmlLayoutBuilder
    NavDrawer.Initialize2("NavDrawer", Activity, NavDrawer.DefaultDrawerWidth, NavDrawer.GRAVITY_START)
    Activity.LoadLayout("layout1")
    rp.CheckAndRequest(rp.PERMISSION_WRITE_EXTERNAL_STORAGE)
    NavDrawer.InitDrawerToggle
    ToolBar.InitMenuListener
    ToolBar.Title="AAA"
    NavDrawer.NavigationView.LoadLayout( "navheaderLayout.bal", NavDrawer.DefaultHeaderHeight)
    NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", xml.GetDrawable("ic_home_black_24dp")).Checked = True
    Dim actionViewItem As ACMenuItem
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 10, 1000, "Download", xml.GetDrawable("ic_android_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 11, 1100, "Search", xml.GetDrawable("ic_feedback_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 12, 1200, "Settings", xml.GetDrawable("ic_settings_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 13, 1300, "Help", xml.GetDrawable("ic_help_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 14, 1400, "Rate it", xml.GetDrawable("ic_bookmark_black_24dp"))
    NavDrawer.NavigationView.Menu.SetGroupCheckable(2, True, True)
    PC.Initialize

        Dim p As Panel     
        p.Initialize("")
        p.RemoveAllViews
        p.LoadLayout("frmsingle")
        Dim pageName As String
        pageName = "Download"
        'Pan(4).AddView(pnlBars, 0%x, 0%y, 100%x, 80%y)
        PC.AddPage(p, pageName)
     

        Dim p As Panel     
        p.Initialize("")
        p.RemoveAllViews
        p.LoadLayout("frmdownload")
        Dim pageName As String
        pageName = "Downloaded"
        PC.AddPage(p, pageName)
     
        Dim p As Panel     
        p.Initialize("")
p.RemoveAllViews
     
        p.LoadLayout("frmtaibang")
 
        Dim pageName As String
        pageName = "Board Download"
        PC.AddPage(p, pageName)

    VP.PageContainer = PC
    Dim Ac As AppCompat
    TabLayout.Color = Ac.GetThemeAttribute("colorPrimary")

    TabLayout.SetViewPager(VP)

I use panel LoadLayout to load my bal file , but it not correct width when run in device
how can i config width of panel to 100%x with this library??
I think many people have problem with it, but dont see anybody to ask??
(i think width not correct??)
how to i fix it to use my visual designer file???
1. visual desiger:
set left and right of panel pnlmanual is 0 and 100%x
cmdopen.text="22222"
cmdget.text="1111"

2. when it run==> width not correct, textfield , not visible cmdget too
it is very different with visual desiger???

this bug is from (same)
https://www.b4x.com/android/forum/threads/problem-with-panels.45308/#post-278492

tuhatinhvn · Oct 16, 2016

tuhatinhvn said:

B4X:

Dim xml As XmlLayoutBuilder
    NavDrawer.Initialize2("NavDrawer", Activity, NavDrawer.DefaultDrawerWidth, NavDrawer.GRAVITY_START)
    Activity.LoadLayout("layout1")
    rp.CheckAndRequest(rp.PERMISSION_WRITE_EXTERNAL_STORAGE)
    NavDrawer.InitDrawerToggle
    ToolBar.InitMenuListener
    ToolBar.Title="AAA"
    NavDrawer.NavigationView.LoadLayout( "navheaderLayout.bal", NavDrawer.DefaultHeaderHeight)
    NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", xml.GetDrawable("ic_home_black_24dp")).Checked = True
    Dim actionViewItem As ACMenuItem
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 10, 1000, "Download", xml.GetDrawable("ic_android_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 11, 1100, "Search", xml.GetDrawable("ic_feedback_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 12, 1200, "Settings", xml.GetDrawable("ic_settings_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 13, 1300, "Help", xml.GetDrawable("ic_help_black_24dp"))
    NavDrawer.NavigationView.Menu.AddWithGroup2(2, 14, 1400, "Rate it", xml.GetDrawable("ic_bookmark_black_24dp"))
    NavDrawer.NavigationView.Menu.SetGroupCheckable(2, True, True)
    PC.Initialize

        Dim p As Panel    
        p.Initialize("")
        p.RemoveAllViews
        p.LoadLayout("frmsingle")
        Dim pageName As String
        pageName = "Download"
        'Pan(4).AddView(pnlBars, 0%x, 0%y, 100%x, 80%y)
        PC.AddPage(p, pageName)
    

        Dim p As Panel    
        p.Initialize("")
        p.RemoveAllViews
        p.LoadLayout("frmdownload")
        Dim pageName As String
        pageName = "Downloaded"
        PC.AddPage(p, pageName)
    
        Dim p As Panel    
        p.Initialize("")
p.RemoveAllViews
    
        p.LoadLayout("frmtaibang")

        Dim pageName As String
        pageName = "Board Download"
        PC.AddPage(p, pageName)

    VP.PageContainer = PC
    Dim Ac As AppCompat
    TabLayout.Color = Ac.GetThemeAttribute("colorPrimary")

    TabLayout.SetViewPager(VP)

I use panel LoadLayout to load my bal file , but it not correct width when run in device
how can i config width of panel to 100%x with this library??
I think many people have problem with it, but dont see anybody to ask??
(i think width not correct??)
how to i fix it to use my visual designer file???
1. visual desiger:
set left and right of panel pnlmanual is 0 and 100%x
cmdopen.text="22222"
cmdget.text="1111"

2. when it run==> width not correct, textfield , not visible cmdget too
it is very different with visual desiger???

this bug is from (same)
https://www.b4x.com/android/forum/threads/problem-with-panels.45308/#post-278492

ok i fix it now! i will only use drawer and actionbar only

corwin42 · Oct 17, 2016

tuhatinhvn said:
I use panel LoadLayout to load my bal file , but it not correct width when run in device
how can i config width of panel to 100%x with this library??
I think many people have problem with it, but dont see anybody to ask??
(i think width not correct??)
how to i fix it to use my visual designer file???
1. visual desiger:
set left and right of panel pnlmanual is 0 and 100%x
cmdopen.text="22222"

This question is not related to Design Support library but to AHViewpager. Please ask a question in the questions forum or in the AHViewPager thread.

corwin42 · Oct 17, 2016

asales said:
I found this answers to my problem. If there other way, I'll be glad to know.

No. We need to create a second drawer to work fine.

Create a second drawer with 1dip in width and locked it:

NavDrawer.AddSecondaryDrawer(1dip, NavDrawer.LOCK_MODE_LOCKED_CLOSED)

This looks like a bug. I will check it.

uniplan · Nov 9, 2016

It is possible set Snackbar text alignment?

uniplan · Nov 29, 2016

How I can set from code text and subtitle header in a DSNavigationDrawer?

chefe82 · Dec 7, 2016

How can I open the Second Drawer via a button?

B4A Library DesignSupport - Additional Material Design components

Attachments

Member

Well-Known Member

Member

Well-Known Member

Member

Member

Member

Attachments

Well-Known Member

Member

Expert

Expert

Expert

Attachments

Expert

Active Member

Active Member

Expert

Expert

Active Member

Active Member

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency