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]

How can I open the Second Drawer via a button?

NavDrawer.OpenDrawer2(NavDrawer.GRAVITY_RIGHT)

 

[uniplan]

dim ND As AHNavigationDrawer
NavDrawer.OpenDrawer2(ND.GRAVITY_RIGHT)

 

[chefe82]

NavDrawer.OpenDrawer2(NavDrawer.GRAVITY_RIGHT)

With NavDrawer.Gravity_End it works there NavDrawer.Gravity_Right does not exist

 

[asales]

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.

Any news to this issues?

I changed my code to:

NavDrawer.AddSecondaryDrawer(1dip, NavDrawer.LOCK_MODE_LOCKED_OPEN)

to block the secondary navigation drawer and I get this error in Firebase Analytcs (in both codes, with other users but not me):

Exception java.lang.IllegalStateException: Child drawer has absolute gravity 2 but this DrawerLayout already has a drawer view along that edge

and I don't know how to solved this error.

 

[corwin42]

Any news to this issues?

Sorry it took so long to fix this. I just released DesignSupport library 2.20 in the first post which should fix the problem that the secondary drawer is required.
The secondary drawer is not needed anymore.

I changed my code to:

NavDrawer.AddSecondaryDrawer(1dip, NavDrawer.LOCK_MODE_LOCKED_OPEN)

to block the secondary navigation drawer and I get this error in Firebase Analytcs (in both codes, with other users but not me):

Exception java.lang.IllegalStateException: Child drawer has absolute gravity 2 but this DrawerLayout already has a drawer view along that edge

and I don't know how to solved this error.

The second parameter for AddSecondaryDrawer() is the gravity of the drawer (drawer on left or right side of screen). There are two constants for this. GRAVITY_START and GRAVITY_END. The first drawer normally has GRAVITY_START. This is the left side in most countries but the right side in countries with RTL languages.

But this problem should be fixed now since you don't need a secondary drawer anymore.

 

[asales]

...
But this problem should be fixed now since you don't need a secondary drawer anymore.

Problem solved! Many thanks.

 

[BarryW]

FixedTabsIcon\Objects\bin\extra\res3\res\values-v24\values-v24.xml:4: error: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'.

 

[Erel]

You need to use a newer version of android.jar.

 

[corwin42]

FixedTabsIcon\Objects\bin\extra\res3\res\values-v24\values-v24.xml:4: error: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'.

Additional info to Erels answer: Some time ago Ian Lake, one of the Support library developers said that you always should use the android.jar with the same platform version as the support library. So currently we have Android Support library 25.1.0 you should use android.jar of API version 25. Everything else is not supported and may result in compile errors.

 

[yiankos1]

Hello my friend, i would like to know if tablayouts supports custom list views because i have some problems to implement them.
Thank you for your time.

 

[corwin42]

Hello my friend, i would like to know if tablayouts supports custom list views because i have some problems to implement them.
Thank you for your time.

A TabLayout is completely independent of any ListViews. What exactly are you trying to do and where are your problems?

 

[yiankos1]

Thank you very much for your answer @corwin42. Look, i want your design tablayout and add 4 tabs. Each tab i want to contain a custom list view. So i searched at forum and i found this custom list view that fits me.
So here is what i did:

    Private VP As AHViewPager
    Private PC As AHPageContainer
    Private TabLayout As DSTabLayout

    Dim data As List
    Private JSListView1 As JSListView

    Private clvImage As ImageView
    Private clvLabel As Label
    Private clvSub As Label
    Private clvType As Label
    Private clvApply As Button
    Private clvLike As Button
    Private clvComment As Button

Sub Activity_Create(FirstTime As Boolean)
    'Initialize a PageContainer Object with 3 pages. Each page contains a panel with different color
    PC.Initialize

'Create 4 tabs
    For i = 0 To 3
        Dim js As JSONParser
        js.Initialize(File.ReadString(File.DirAssets, "MOCK_DATA.json"))
        Dim data As List = js.NextArray

        ' Create gradient divider
        Dim cd As GradientDrawable
        Dim c() As Int = Array As Int(Colors.rgb(252, 237, 242), 0xFFE91E63, Colors.rgb(252, 237, 242))
        cd.Initialize("TR_BL", c)

        JSListView1.Divider = cd
        JSListView1.DividerHeight = 3dip

        JSListView1.DataSource = data
        'JSListView1.FastScrollEnabled = True
   
        'Don't add a title here
        PC.AddPage(JSListView1,"")
   
    Next
    'Set the PageContainer for the ViewPager
    VP.PageContainer = PC

    'Set colors. The indicator color defaults to "colorAccent"
    Dim ac As AppCompat
    TabLayout.Color = ac.GetThemeAttribute("colorPrimary")
    'TabLayout.TabIndicatorColor = Colors.White


    'Connect the TabLayout with the Viewpager.
    'This will create the tabs and will keep tabs and pages
    'in sync and creates a nice indicator animation.
    TabLayout.SetViewPager(VP)

    TabLayout.SetTabTextColors(Colors.ARGB(150,255,255,255),Colors.White)
   
    TabLayout.SetTabText(0,"vvvv")
    TabLayout.SetTabText(1,"cccc")
    TabLayout.SetTabText(2,"xxxx")
    TabLayout.SetTabText(3,"zzzz")
End sub

Sub JSListView1_OnGetView(position As Int, itemLayout As ItemViewLayout, forViewUpdate As Boolean)
    Log($"JSListView1_OnGetView @ Position: ${position}"$)

    Dim iv As ItemViewLayout = itemLayout

    Dim p As Panel
    p.Initialize("")
    If forViewUpdate = False Then
        p.LoadLayout("customlistview")
        iv.Container = p

        clvLabel.Tag = 1
        clvSub.Tag = 2
        clvType.Tag = 3
        clvImage.Tag = 4
        clvApply.Tag = 5
        clvComment.Tag = 6
        clvLike.Tag = 7


        iv.Height = clvImage.Top + clvImage.Height + 200dip
        iv.Width = 100%x
    End If

    Dim mapper As Map = data.Get(position)

    clvLabel = iv.findViewWithTag(1)
    clvSub = iv.findViewWithTag(2)
    clvType = iv.findViewWithTag(3)
    clvImage = iv.findViewWithTag(4)
    clvApply = iv.findViewWithTag(5)
    clvComment = iv.findViewWithTag(6)
    clvLike = iv.findViewWithTag(7)

    clvLabel.Text = $"(${mapper.Get("id")}) ${mapper.Get("fullname")} - ${mapper.Get("job_title")}"$
    clvType.Text = mapper.Get("company")
    clvSub.Text = mapper.Get("slogan")

    p = iv.Container
    If position Mod 2 = 0 Then
        p.Color = Colors.Transparent
    Else
        p.Color = Colors.ARGB(20, 100, 100, 100)
    End If

End Sub

Sub JSListView1_OnItemClick(view As ItemViewLayout, position As Int)
    ToastMessageShow($"JSListView1_OnItemClick @ position: ${position}"$, False)
End Sub

Sub JSListView1_OnItemLongClick(view As ItemViewLayout, position As Int)
    ToastMessageShow($"JSListView1_OnItemLongClick @ position: ${position}"$, False)
End Sub

So, the problem is that first value does not show(tablayout hide it), click even t does not raise and when i change tab i get this error:

java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
    at android.view.ViewGroup.addViewInner(ViewGroup.java:4212)
    at android.view.ViewGroup.addView(ViewGroup.java:4065)
    at android.support.v4.view.ViewPager.addView(ViewPager.java:1477)
    at de.amberhome.viewpager.AHPageContainer.instantiateItem(AHPageContainer.java:87)
    at android.support.v4.view.ViewPager.addNewItem(ViewPager.java:1006)
    at android.support.v4.view.ViewPager.populate(ViewPager.java:1220)
    at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:670)
    at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:632)
    at android.support.v4.view.ViewPager.setCurrentItem(ViewPager.java:613)
    at android.support.design.widget.TabLayout$ViewPagerOnTabSelectedListener.onTabSelected(TabLayout.java:2166)
    at android.support.design.widget.TabLayout.dispatchTabSelected(TabLayout.java:1149)
    at android.support.design.widget.TabLayout.selectTab(TabLayout.java:1142)
    at android.support.design.widget.TabLayout.selectTab(TabLayout.java:1112)
    at android.support.design.widget.TabLayout$Tab.select(TabLayout.java:1407)
    at android.support.design.widget.TabLayout$TabView.performClick(TabLayout.java:1511)
    at android.view.View$PerformClick.run(View.java:20926)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:145)
    at android.app.ActivityThread.main(ActivityThread.java:5942)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1388)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1183)

Thank you for your time

 

[yiankos1]

@corwin42 did you figure out how to solve this? I tried your tablayout with Erel's Custom listview, again same errors. First entry shows half and exception error when i change tab. Above code creates 3 tabs with 10 values each, with this tablayout creates 30 values at first tab(i think thats why throws error when i change tab).

 

[corwin42]

@corwin42 did you figure out how to solve this?

Can you please open a new thread in the questions forum for this. I don't think it is related to the TabLayout but more a problem with the usage of AHViewPager.
And if possible can you post a little example project which shows the problem?

 

[yiankos1]

Can you please open a new thread in the questions forum for this. I don't think it is related to the TabLayout but more a problem with the usage of AHViewPager.
And if possible can you post a little example project which shows the problem?

Thank you for your answer, in my previews post I posted a printscreen

 

[Inman]

How can I change the text size of Hint for FloatlabelEditText? When the user starts typing, this Hint becomes too small on tablet devices.

Some java solution is given here. Not sure how to do this in B4A.

http://stackoverflow.com/questions/35408283/how-to-set-floating-label-text-size

 

[TheJinJ]

I'm not sure if it's an issue with NavDrawer or IME library - I had mentioned it in the IME thread https://www.b4x.com/android/forum/t...with-the-ime-library.14832/page-9#post-477566

When using IME library with NavDrawer it throws this error, both work ok individually, any ideas?

    NavDrawer.Initialize2("NavDrawer", Activity, NavDrawer.DefaultDrawerWidth, NavDrawer.GRAVITY_START)
    Activity.LoadLayout("main")

    ime.Initialize("ime")
    ime.AddHeightChangedEvent

Error occurred on line: 120 (Main)
java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
    at android.view.ViewGroup.addViewInner(ViewGroup.java:4654)
    at android.view.ViewGroup.addView(ViewGroup.java:4490)
    at android.view.ViewGroup.addView(ViewGroup.java:4431)
    at android.view.ViewGroup.addView(ViewGroup.java:4404)
    at anywheresoftware.b4a.objects.IME.AddHeightChangedEvent(IME.java:119)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runVoidMethod(Shell.java:753)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:343)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:247)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:134)
    at b4a.example.main.afterFirstLayout(main.java:102)
    at b4a.example.main.access(main.java:17)
    at b4a.example.main$WaitForLayout.run(main.java:80)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:158)
    at android.app.ActivityThread.main(ActivityThread.java:7229)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)
** Activity (main) Resume **
WakeLock already held.

Cheers!

 

[phukol]

Hi guys just wanna ask how can i change the Text size and text case (upper case or lower case) of DsTablayout?

 

[Inman]

After updating the libraries (both DesignSupport and AppCompat) and cleaning the project, I am getting an error for the line txtemail.Initialize(""), where txtemail is DSFloatlabelEditText. It used to work fine with old version of libraries. Also if I change the type of EditText, it works fine.

Error occurred on line: 76 (Login)

java.lang.RuntimeException: Object should first be initialized (DSFloatlabelEditText).
Did you forget to call Activity.LoadLayout?
    at anywheresoftware.b4a.AbsObjectWrapper.getObject(AbsObjectWrapper.java:50)
    at de.amberhome.objects.FloatlabelEditTextWrapper.innerInitialize(FloatlabelEditTextWrapper.java:61)
    at anywheresoftware.b4a.objects.ViewWrapper.Initialize(ViewWrapper.java:65)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runVoidMethod(Shell.java:753)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:343)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:247)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:134)
    at com.apptuners.feedbackr.login.afterFirstLayout(login.java:102)
    at com.apptuners.feedbackr.login.access$000(login.java:17)
    at com.apptuners.feedbackr.login$WaitForLayout.run(login.java:80)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

 

[corwin42]

I see it too. Will upload a fix as soon as possible

Edit: Fixed in V2.23