B4A Library DesignSupport - Additional Material Design components

Anser · Mar 3, 2017

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

corwin42 · Mar 3, 2017

I have not tested it but it should be possible.

Use the TextToBitmap() Sub from this post.

Anser · Mar 3, 2017

corwin42 said:
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 · Mar 3, 2017

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 · Mar 3, 2017

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

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

SandroB4A · Mar 3, 2017

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 · Mar 3, 2017

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 · Mar 3, 2017

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 · Mar 8, 2017

BottomNavigationView :

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

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

corwin42 · Mar 8, 2017

Prosg said:
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 · Mar 8, 2017

oh yes really i just see that

ty for your answer

Anser · Mar 9, 2017

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

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 · Mar 9, 2017

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 · Mar 12, 2017

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 · Mar 12, 2017

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 · Mar 13, 2017

JNG said:
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.

AscySoft said:
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?

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

AscySoft · Mar 13, 2017

corwin42 said:
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);
    }

JNG · Mar 14, 2017

corwin42 said:
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 · Mar 21, 2017

Good Day,

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

corwin42 · Mar 21, 2017

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

Yes

B4A Library DesignSupport - Additional Material Design components

Attachments

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Member

Expert

Member

Active Member

Expert

Active Member

Well-Known Member

Expert

Member

Active Member

Expert

Active Member

Member

Active Member

Expert

Similar Threads