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
    Screenshot_20151001-110844.png
  • 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.
    Screenshot_20151001-110749.pngScreenshot_20151001-110809.png
  • FloatlabelEditText - An enhanced EditText object that supports a floating label, counter and error messages.
    Screenshot_20160624-105201.png
  • FloatingActionButton - A very simple Floating Action Button. Has show- and hide animations but is very simple.
    Screenshot_20160624-104708.png
  • NavigationDrawer - Material Design compliant Navigation Drawer. See NavigationView Example for detailed instructions.
    Screenshot_20160826-160906.png
  • BottomNavigationView - Material Design compliant Bottom Navigation View. See BottomNavigationView Example for detailed instructions.
    Screenshot_20161219-091326.png
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.
Click to expand...
  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:
Code: 
<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:
Code: 
<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.
Click to expand...


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
 

Attachments

Last edited:
Click to expand...
corwin42 said:
I'm 99.9% sure that you have an old android-support-design.jar in your customlibs folder.
Click to expand...

That is 1000% correct,

I have no idea why in my sdk manager, it shows my android support library version is 23.1.0, but it's still not working :( i download manually android support v23.1.0 and extract it manually, and perfectly working now

Thank you very much
 
Thanks！This is a big thing！@corwin42
How can I change the theme in App？
 
Funny as I just came up against the theme question today as well. I'd like to change the snack bar background and text colour. If not by theming then by a programmatic change, neither seems to be available for the snack bar :(
 
There is currently no API for theming the SnackBar. It just uses the Theme of the parent View.

In the next version of this library I will add a method to set the action text color. Maybe in future design support libraries more will be possible.

There are some "tricks" you can do.

For the Snackbar background you can use this:

Code: 
    Dim v As View
    v = snack.View
    v.Color = Colors.Blue

For the text color it is a bit more tricky and is more "guessing" the correct textview:

Code: 
    Dim p As Panel
    p = snack.View
    For Each v As View In p.GetAllViewsRecursive
        If v Is Label Then
            Dim textv As Label
            textv = v
            textv.TextColor = Colors.Red
            Exit
        End If
    Next

If you change the color of the second "Label" in the above code you will change the Action Button text color.
 
Oh I feel stupid now! I should have explored the object some more! Thank you very much.

As I have all snack bar calls coming to a single function already and also have the active theme colours being obtained this was easy to add in and works perfectly. Thank you.
 
Please, using the TabLayouts as learnt from the ScrollingTabsExample, whenever I load a layout file (*.bal) into a panel for one of the tabs, the initial design (from the B4A Designer) is distorted and some views don't show at all (mostly the views at the bottom of the layout even though their vertical anchors are set to "bottom")
Doesn't it work with layouts? or maybe I'm getting something wrong here..
Thanks in advance for the help. :)
 
If I understand correct, this is an AHViewPager problem and has nothing to do with the design support library. Please ask your question in the AHViewPager thread and please provide an example which shows the problem.
 
Got some error when trying to use this library.
LogCat connected to: emulator-5556
java.lang.RuntimeException: Unable to start activity ComponentInfo{example.tablayout.customtabs/example.tablayout.customtabs.main}: android.view.InflateException: Binary XML file line #17: Error inflating class android.support.v7.widget.FitWindowsLinearLayout
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2180)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230)
at android.app.ActivityThread.access$600(ActivityThread.java:141)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:5039)
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:793)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560)
at dalvik.system.NativeStart.main(Native Method)
Caused by: android.view.InflateException: Binary XML file line #17: Error inflating class android.support.v7.widget.FitWindowsLinearLayout
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:698)
at android.view.LayoutInflater.inflate(LayoutInflater.java:466)
at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
at android.support.v7.app.AppCompatDelegateImplV7.ensureSubDecor(AppCompatDelegateImplV7.java:321)
at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:237)
at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:111)
at example.tablayout.customtabs.main.onCreate(main.java:59)
at android.app.Activity.performCreate(Activity.java:5104)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1080)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2144)
... 11 more
Caused by: java.lang.ClassNotFoundException: Didn't find class "android.support.v7.widget.FitWindowsLinearLayout" on path: /data/app/example.tablayout.customtabs-2.apk
at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:65)
at java.lang.ClassLoader.loadClass(ClassLoader.java:501)
at java.lang.ClassLoader.loadClass(ClassLoader.java:461)
at android.view.LayoutInflater.createView(LayoutInflater.java:552)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687)
... 21 more

The emulator is android 4.
 
Last edited:
Hello, is it possible to re-set the TabIcon of DSTabLayout property at runtime?
I tried the following and it didn't work out..

Code: 
Dim bd As BitmapDrawable
bd.Initialize(LoadBitmap(File.DirAssets,"imagehere.jpg"))
TabLayout.SetTabIcon(1,bd)    'Set the icon for the second Tab

Please, is there anything else I need to do? Thanks in advance for the help. :)
Anyone? :(
 
Last edited:
Please, how do you set the typeface of the ACToolbar Title and Subtitle item? Thanks in advance
 
TabLayout.SetTabTextColors doesn't work ?

i can change only color of the text in \tab_icon.xml

android:textColor="#53267b"

1. When i delete this line => TabLayout.SetTabTextColors still doesn't work

2. If it's impossible to have TabLayout.SetTabTextColors workin, how to change the color of selected tab in xml ?

ty
 
Kwame Twum said:
Hello, is it possible to re-set the TabIcon of DSTabLayout property at runtime?
I tried the following and it didn't work out..

Code: 
Dim bd As BitmapDrawable
bd.Initialize(LoadBitmap(File.DirAssets,"imagehere.jpg"))
TabLayout.SetTabIcon(1,bd)    'Set the icon for the second Tab

Please, is there anything else I need to do? Thanks in advance for the help. :)
Anyone? :(
Click to expand...

It should work. See the FixedTabsExample.
If it does not work for you, provide an example project which shows the problem.

Kwame Twum said:
Please, how do you set the typeface of the ACToolbar Title and Subtitle item? Thanks in advance
Click to expand...

I don't recommend this. But you may try to set your own ToolBar style like in this answer.

Prosg said:
TabLayout.SetTabTextColors doesn't work ?

i can change only color of the text in \tab_icon.xml

android:textColor="#53267b"

1. When i delete this line => TabLayout.SetTabTextColors still doesn't work

2. If it's impossible to have TabLayout.SetTabTextColors workin, how to change the color of selected tab in xml ?

ty
Click to expand...

For "normal" tabs SetTabTextColors should work.
It seems you are talking about the CustomTabs example. There of course SetTabTextColors does not work because the tab is a custom view.
 
ty for your answer... so it's impossible to have the color set by code ?
 
Prosg said:
ty for your answer... so it's impossible to have the color set by code ?
Click to expand...
No, it should be possible to set the text color with:
Code: 
        XmlViewEx.SetXmlViewTextColor(XmlViewEx.FindView(v, "tabText"), Colors.Green)
 
hello

Is it possible to stop the page scrooling with touch (i want only with click on tab) cause i have a swipe panel on a page

ty
 
Kwame Twum said:
TabIssues example
Click to expand...

You use a custom view for the tabs so you have to manually change the icon for this view with the XmlViewEx methods. See the CustomTabs example.

Code: 
XmlViewEx.SetXmlViewImage(XmlViewEx.FindView(v, "tabIcon"), xml.GetDrawable(icons(i)))

Prosg said:
Is it possible to stop the page scrooling with touch (i want only with click on tab) cause i have a swipe panel on a page
ty
Click to expand...

You can disable paging in AHViewPager with "AHViewPager.PagingEnabled = False".
 
You must log in or register to reply here.

Similar Threads

J
  • Article Article
B4A Library M3B4A – Material 3 components for B4A
Replies
6
Views
1K
Jerryk
J
Mashiane
  • Article Article
B4A Library [B4A] Material Design 3 Components
2
Replies
28
Views
3K
Mashiane
Mashiane
JMB
  • Question Question
Android Question DesignSupport - Additional Material Design components
Replies
7
Views
5K
Erel
Erel
JMB
  • Question Question
Android Question [Solved] - Problem with B4A Library DesignSupport - Additional Material Design components
Replies
4
Views
4K
JMB
JMB
corwin42
  • Article Article
B4A Library AppCompat - Make Material Design apps compatible with older Android versions
14 15 16
Replies
310
Views
264K
kiki78
kiki78
Back
Top