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



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

  • FixedTabsExample2_00.zip
    23.4 KB · Views: 2,001
  • FloatLabelEditText1_0.zip
    8.2 KB · Views: 1,637
  • FloatingActionButton1_0.zip
    12.5 KB · Views: 1,759
  • ScrollingTabsExample2_00.zip
    8.3 KB · Views: 1,763
  • SnackBarExample2_00.zip
    7.7 KB · Views: 1,625
  • TabsWithCustomViewExample2_0.zip
    24.5 KB · Views: 1,893
  • NavigationView1_0.zip
    108.9 KB · Views: 2,550
  • BottomNavigationViewExample1_0.zip
    28.7 KB · Views: 1,793
  • DesignSupportLib2_31.zip
    58.3 KB · Views: 1,432
  • DesignSupportLib2_32.zip
    58.3 KB · Views: 2,190
  • DesignSupportLib3_00.zip
    65.9 KB · Views: 2,465
Last edited:

Anser

Well-Known Member
Licensed User
Longtime User
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

B4X:
'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.
B4X:
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
B4X:
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
 
Last edited:

Anser

Well-Known Member
Licensed User
Longtime User
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

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

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

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

corwin42

Expert
Licensed User
Longtime User
Use AddWithGroup and not AddWithGroup2

or

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

Anser

Well-Known Member
Licensed User
Longtime User

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
B4X:
'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
 
Last edited:

SandroB4A

Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
BottomNavigationView :

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

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

corwin42

Expert
Licensed User
Longtime User

Anser

Well-Known Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Member
Licensed User
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

Active Member
Licensed User
Longtime User
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
B4X:
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

Expert
Licensed User
Longtime User

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.
 

AscySoft

Active Member
Licensed User
Longtime User
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
B4X:
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+
B4X:
'JAVA CODE
public void Initialize(int DefaultColor, int PressedColor)
    {
        ColorStateList Pressed = getColorStateList(PressedColor);
        ColorDrawable Default = new ColorDrawable(DefaultColor);
        rd = new RippleDrawable(Pressed, Default, null);
    }
 
Last edited:

JNG

Member
Licensed User


Thanks Sir,
I will look forward the solution.
 

prajinpraveen

Active Member
Licensed User
Longtime User
Good Day,

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

 

corwin42

Expert
Licensed User
Longtime User
Cookies are required to use this site. You must accept them to continue using the site. Learn more…