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

 

[Anser]

Hi,

This question is regarding DSNavigationDrawer

As of now, to display an ICON on the NavigationDrawer item, I use FontAwsome which comes along with lib MSMaterialDrawer ie MSIconicDrawable Lib. For this to work I need to copy the FontAwsome Font files in my FILES

With the new B4A ver 6.80 which has inbuilt support for FontAwsome and MaterialIcons, can I use the inbuilt Fontawsome to display the Icon on the NavigationDrawer Item

For eg. As of now I am using the following code to show an Icon on the DSNavigationDrawer ie using MSIconicDrawable

'Define MSIconicDrawable Icon
Dim IconHome As MSIconicDrawable    : IconHome.Initialize("gmd_home")     : IconHome.Color = 0xff808080

'Then use the above MSIconicDrawable Icon to display on the NavDrawer
NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", IconHome.Drawable).Checked = True

So my question is, that is there a way with the new B4A v6.80 to display the Icon on the NavDrawer using the inbuilt support for FontAwsome or MaterialIcons ?

For eg.

NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", Chr(0xF015)).Checked = True

Anyways the above code ie by using Chr(0xF015) is giving me compilation error

I am adding the DSNavigationDrawer by code. For eg

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Private NavDrawer As DSNavigationDrawer
    Private ActionBar As ACToolBarLight

End Sub

Sub Activity_Create(FirstTime As Boolean)

    'This should be called before calling Activity.LoadLayout("LayoutFile")
    NavDrawer.Initialize2("NavDrawer", Activity, NavDrawer.DefaultDrawerWidth, NavDrawer.GRAVITY_START)

    Activity.LoadLayout("HomePage")
    ActionBar.InitMenuListener

    BuildNavDrawer

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub BuildNavDrawer

    NavDrawer.InitDrawerToggle
    NavDrawer.NavigationView.LoadLayout( "NavHeaderLayout", NavDrawer.DefaultHeaderHeight)

    'Defining all Icons to be used on the Navigation Drawer
    Dim IconHome As MSIconicDrawable          : IconHome.Initialize("gmd_home")           : IconHome.Color = 0xff808080
    Dim IconAbout As MSIconicDrawable : IconAbout.Initialize("faw_info")  :    IconAbout.Color = 0xff808080

    NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", Chr(0xF015)).Checked = True
    NavDrawer.NavigationView.Menu.AddWithGroup2(6, 600, 600, "About", IconAbout.Drawable)

End Sub

Regards
Anser

 

[corwin42]

I have not tested it but it should be possible.

Use the TextToBitmap() Sub from this post.

 

[Anser]

I have not tested it but it should be possible.

Use the TextToBitmap() Sub from this post.

Sorry could not get it work. It expects drawable

error: incompatible types: Bitmap cannot be converted to BitmapDrawable
_obitmap.setObject((android.graphics.drawable.BitmapDrawable)(_texttobitmap(BA.ObjectToString(anywheresoftware.b4a.keywords.Common.Chr((int) (0xf0ee))),(float) (30)).getObject()));

Tried all the 3 options

NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home",TextToBitmap(Chr(0xF0EE), 30)   ).Checked = True

Dim oBitMap As BitmapDrawable
oBitMap = TextToBitmap(Chr(0xF0EE), 30)
NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", oBitMap   ).Checked = True

Dim oBitMap As Bitmap
oBitMap = TextToBitmap(Chr(0xF0EE), 30)
NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", oBitMap   ).Checked = True

 

[corwin42]

Use AddWithGroup and not AddWithGroup2

or

Dim oBitMap As BitmapDrawable
oBitMap.Initialize(TextToBitmap(Chr(0xF0EE), 30))
NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", oBitMap   ).Checked = True

 

[Anser]

Use AddWithGroup and not AddWithGroup2

or

Dim oBitMap As BitmapDrawable
oBitMap.Initialize(TextToBitmap(Chr(0xF0EE), 30))
NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", oBitMap   ).Checked = True

Thank you, both the solutions are working.

May I ask you for one more help. How do I change the color of the Icon ?. The code doesn't have any effect on the color of the icon

'Here I have the option to change the color of the icon
Dim IconHome As MSIconicDrawable  : IconHome.Initialize("gmd_home")  : IconHome.Color = 0xffff4081

'In this case how do I change the color of the icon ? ie TextToBitmap(Chr(0xF0EE), 30)
Dim oBitMap As BitmapDrawable
oBitMap.Initialize(TextToBitmap(Chr(0xF0EE), 30))

NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Home", oBitMap  ).Checked = True
NavDrawer.NavigationView.Menu.AddWithGroup(1, 2, 2, "My Menu", TextToBitmap(Chr(0xF209), 30)  ).Checked = True

Sub TextToBitmap (s As String, FontSize As Float) As Bitmap
   Dim bmp As Bitmap
   bmp.InitializeMutable(32dip, 32dip)
   Dim cvs As Canvas
   cvs.Initialize2(bmp)
   Dim h As Double = cvs.MeasureStringHeight(s, Typeface.FONTAWESOME, FontSize)
   'Tried changing the color in the next line, but no effect on the final image. It is appearing as grey only
   cvs.DrawText(s, bmp.Width / 2, bmp.Height / 2 + h / 2, Typeface.FONTAWESOME, FontSize, Colors.White, "CENTER")
   Return bmp
End Sub

 

[SandroB4A]

Hi all,
I'm testing an example of DSTabLayout and I've noted a strange behaviour, when I put an edit text near the bottom (fig 1) this goes upward when I edit the textfield (fig 2) , but if in the same page there is a scrollbar (fig 3, or a listview or a webpage) this doesn't happen and the text is overlapped by the keyboard (fig 4) .

What really make me crazy is that this problem is random! seem to happen after trying many time and "touching around" the page.

Someone had the same issue?

 

[corwin42]

I guess this has nothing to do with the Design Support Library. This is a general keyboard problem. So please start a thread in the questions forum.

 

[SandroB4A]

Sorry, I tought was something related to the tab because I've no problem with EditText inside panels.
I'll start a new post, tks again

 

[Prosg]

BottomNavigationView :

- Is it possible to have one color background per menuItem ?

- If i have 4 or 5 menuItem... the text disapear

 

[corwin42]

BottomNavigationView :

- Is it possible to have one color background per menuItem ?

- If i have 4 or 5 menuItem... the text disapear

It works exactly as specified in the material design guidelines. Sorry, you can not change this behavior.

 

[Prosg]

oh yes really i just see that

ty for your answer

 

[Anser]

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>

In the first post of this thread Corwin has advised to use the above lines in the Theme if you use DSNavigationDrawer

When I added the above line to my theme via my Manifest Editor, the Activity containing the DSNavigationDrawer looks nice (ie a transparent band above the AcToolBar), but on other activities in the project that does not contain the DSNavigationDrawer, it puts a blank white band above the AcToolBarLight.

Do we really need this line ? Without the above said lines, it is working fine but no transparent band above the AcToolBarLight ie the place where the Phone's signal and other information are shown

Regards

Anser

 

[corwin42]

Without the lines the NavigationDrawer will not display above the Statusbar.

Create two themes for your app (one can have the other as parent). One with the lines and one without. Assign the different themes to the activites with navigationdrawer and without.

 

[JNG]

In TabLayout
TabLayout.SetTabText(Index as int,Text as CharSequence)

but its not taking Text as ChatSequence only Display text in Capital and default size.

how I can change text size and instead of Capital alphabets how can I use Normal text sequence.

regards
jng

 

[AscySoft]

Hi @corwin42
I use your TabLayout from Desing Support library (a DSTabLayout customview)
I like it a lot with AHViewPager, anyway, in short, i set this

TabLayout.color=colors.white

and the ripple effect is from White to a soft Gray (as normal) but I was wondering how exactly I can change the ripple color, from color white to a user defined color?

 

[corwin42]

In TabLayout
TabLayout.SetTabText(Index as int,Text as CharSequence)

but its not taking Text as ChatSequence only Display text in Capital and default size.

how I can change text size and instead of Capital alphabets how can I use Normal text sequence.

I guess this is somehow possible within the Theme of the App/Activity but I have to research it myself how it can be done.

Maybe a Style attribute will be added to the DesignSupport views (and AppCompat views) in the future.

BTW: I don't recommend changing the tab style too much since it is compliant with the material style guide now.

Hi @corwin42
I use your TabLayout from Desing Support library (a DSTabLayout customview)
I like it a lot with AHViewPager, anyway, in short, i set this

TabLayout.color=colors.white

and the ripple effect is from White to a soft Gray (as normal) but I was wondering how exactly I can change the ripple color, from color white to a user defined color?

Maybe this is doable with a custom Application/Activity theme but I never have done it myself.

 

[AscySoft]

Maybe this is doable with a custom Application/Activity theme

In my app I use only AHViewPager+DSTabLayout from Design support library. No use for appCompat. Is working ok
For ripple effect(for other views like clickable panels), i use Informatix's RippleDrawable available with source code, in ex

Dim bRipple As RippleDrawable
bRipple.Initialize(color1, color2)
P.Background = bRipple.Drawable

Please, notice the second color option of the initialize sub, this is what i need, if possible to implement this...or please advise me because is for api 21+

'JAVA CODE
public void Initialize(int DefaultColor, int PressedColor)
    {
        ColorStateList Pressed = getColorStateList(PressedColor);
        ColorDrawable Default = new ColorDrawable(DefaultColor);
        rd = new RippleDrawable(Pressed, Default, null);
    }

 

[JNG]

I guess this is somehow possible within the Theme of the App/Activity but I have to research it myself how it can be done.

Maybe a Style attribute will be added to the DesignSupport views (and AppCompat views) in the future.

BTW: I don't recommend changing the tab style too much since it is compliant with the material style guide now.



Maybe this is doable with a custom Application/Activity theme but I never have done it myself.

Thanks Sir,
I will look forward the solution.

 

[prajinpraveen]

Good Day,

Is it possible to add ACSearchView along with NavigationDrawer which uses ACToolbarlight, to get the below UI

 

[corwin42]

Is it possible to add ACSearchView along with NavigationDrawer which uses ACToolbarlight, to get the below UI

Yes