Android Tutorial Android 5.0 Information and Resource Thread

Inman

Well-Known Member
Licensed User
How to build an Android 5.0 Nav Drawer like the screenshot below? I particularly want to know about downward pointing chevron on the left of each item in the Drawer, clicking on which will expand the item and invert the chevron to upward pointing.

 

thedesolatesoul

Expert
Licensed User
How to build an Android 5.0 Nav Drawer like the screenshot below? I particularly want to know about downward pointing chevron on the left of each item in the Drawer, clicking on which will expand the item and invert the chevron to upward pointing.
May I ask what app is that?

But first this is not an Android 5.0 Nav Drawer. It is a normal old style nav drawer.
It is just an expandable listview.
Look at my app here for the chevron animation: https://play.google.com/store/apps/details?id=com.maximussoft.backup
I used the AnimationPlus library in a class with expandable panels.

Its easy to do, if I had to do it, I would use ULV+NOA to do it. The Listview expansion animation is trickier.
 

Inman

Well-Known Member
Licensed User
May I ask what app is that?

But first this is not an Android 5.0 Nav Drawer. It is a normal old style nav drawer.
It is just an expandable listview.
Look at my app here for the chevron animation: https://play.google.com/store/apps/details?id=com.maximussoft.backup
I used the AnimationPlus library in a class with expandable panels.

Its easy to do, if I had to do it, I would use ULV+NOA to do it. The Listview expansion animation is trickier.
Is an expandable listview like that, currently possible with B4A? Android does have an ExpandableListView implementation officially.

http://developer.android.com/reference/android/widget/ExpandableListView.html

Is it possible to implement it in B4A?
 

thedesolatesoul

Expert
Licensed User
Is an expandable listview like that, currently possible with B4A? Android does have an ExpandableListView implementation officially.

http://developer.android.com/reference/android/widget/ExpandableListView.html

Is it possible to implement it in B4A?
I actually downloaded Flyne and realized there are no animations. It is just a static list.
Potentially you can base your solution on this: http://www.basic4ppc.com/android/forum/threads/custom-expandable-listview.15986/#post-116029
Or CustomListView or ULV
It is possible to port the Android ExpandableListView to B4A too.


Thanks, added to first post. The checklist post is very interesting indeed. Makes me realize many things are not backported yet. I was intersted in seeing ViewCompat.setElevation but it is reported that it is not working yet.
 

corwin42

Expert
Licensed User
Ok, some info about what I'm curently do to make Material Design apps in B4A easy to create.

I started with a Material Design Utils library wherein I packed many classes for some UI components used in Material design. It is all based on the new v7-AppCompat library and this is currently a big problem. I was able to create a Material design test app with the new Toolbar object etc.

There is only one really really big problem: It looks bad on pre 5.0 devices. The problem is that the UI elements are not themed on pre 5.0 devices. The AppCompat library uses injection in LayoutInflater() to replace some UI components with new ones that can be tinted. Problem is that B4A does not use the LayoutInflater at all (It even won't work with XmlLayout library because the lib uses its own factory).

So currently I'm really stuck with this stuff. Everything looks great on Android 5.0 but all UI components are just black on pre 5.0. :(

Now to the good news:
I just created a wrapper for the new Palette class. With this Palette library it is possible to extract a color palette from a bitmap so you can change some UI colors to fit your images. I want to use it for a weather app with customizable weather icon sets. The plan is that the app should modify its UI colors based on the selected icon theme.
I wanted to attach an example for this but the filesize is too large. So I added some screenshots:

Screenshot_2014-10-30-11-32-53.png
Screenshot_2014-10-30-11-32-45.png
Screenshot_2014-10-30-11-33-09.png
 

thedesolatesoul

Expert
Licensed User
Ok, some info about what I'm curently do to make Material Design apps in B4A easy to create.

I started with a Material Design Utils library wherein I packed many classes for some UI components used in Material design. It is all based on the new v7-AppCompat library and this is currently a big problem. I was able to create a Material design test app with the new Toolbar object etc.

There is only one really really big problem: It looks bad on pre 5.0 devices. The problem is that the UI elements are not themed on pre 5.0 devices. The AppCompat library uses injection in LayoutInflater() to replace some UI components with new ones that can be tinted. Problem is that B4A does not use the LayoutInflater at all (It even won't work with XmlLayout library because the lib uses its own factory).

So currently I'm really stuck with this stuff. Everything looks great on Android 5.0 but all UI components are just black on pre 5.0. :(

Now to the good news:
I just created a wrapper for the new Palette class. With this Palette library it is possible to extract a color palette from a bitmap so you can change some UI colors to fit your images. I want to use it for a weather app with customizable weather icon sets. The plan is that the app should modify its UI colors based on the selected icon theme.
I wanted to attach an example for this but the filesize is too large. So I added some screenshots:

View attachment 28677 View attachment 28678 View attachment 28679
Thanks, thats a great update.

Are you using the Material.Compat theme? Does it not force layouts loaded from the Designer or code to receive the correct theme? That is weird, I thought we would just have to do the same as previously we used to set Theme.HoloLight etc.
I hope google will update the support libs, because this is a problem for everyone.

Nice examples of the Palette! Its a really cool idea.
I have a wrapper of the cardview object. Still not complete as I get distracted.
In 3rd party I also have a wrapper for PostOffice i.e. MaterialDialogs. (Still have to figure out something).

Also, might consider porting: https://github.com/astuetz/PagerSlidingTabStrip if google dont release an alternative, as Actionbar Tabstrips are deprecated.

Let us know more about how the Toolbar works.
 

corwin42

Expert
Licensed User
Thanks, thats a great update.

Are you using the Material.Compat theme? Does it not force layouts loaded from the Designer or code to receive the correct theme? That is weird, I thought we would just have to do the same as previously we used to set Theme.HoloLight etc.
I hope google will update the support libs, because this is a problem for everyone.

Nice examples of the Palette! Its a really cool idea.
I have a wrapper of the cardview object. Still not complete as I get distracted.
In 3rd party I also have a wrapper for PostOffice i.e. MaterialDialogs. (Still have to figure out something).

Also, might consider porting: https://github.com/astuetz/PagerSlidingTabStrip if google dont release an alternative, as Actionbar Tabstrips are deprecated.

Let us know more about how the Toolbar works.
No. For using the AppCompat library you have to extend the Activity from "ActionBarActivity" which can be done with the #Extends Attribute in B4A. Then you have to set Theme.AppCompat and you immediately have a Material theme and the ActionBar looks like a Material Design Actionbar (No AppIcon, round overflow dots).

For tinting UI components in pre 5.0 you will have to use AppCompat library (Extend ActionBarActivity and use Theme.AppCompat theme), set targetSdkVersion to 21 AND you have to use XML Layouts with standard components.
There is no tinting for components created with "new xxx" like "new EditText()". Only standard components directly added with LayoutInflater() method get tinted and only if you don't use your own Factory (like in Erels XmlLayoutBuilder library).
So we currently have no chance to get nice design in pre 5.0 with B4A for now if you want to use AppCompat. This is really bad.

Edit: Chris Banes said in a post on his blog that the internal components for Material Design are currently hidden because the implementation is unfinished and this may change in the future. But nobody knows when this "future" is. Then it should be possible to wrap these components in a B4A library to use them directly. But then it will be not so nice to use the B4A-Designer.

The ToolBar is really nice and simple. It is like a B4A Panel with additional support for actions and overflow menu. I think I can show an example next week. You can add everything you want to it like Tabs or a Spinner.
 
Last edited:

corwin42

Expert
Licensed User
Short update to my work on Android 5.0 and material design.

Seems that I have the solution for the AppCompat v21 stuff.
With an additional library I was able to make B4A compatible with AppCompat v21. It will even be possible to use the designer to create your user interface. You will just have to call one method of the library after LoadLayout() to get the coloring right on pre Android Lollipop.

Now I have my head free for the tutorials I want to write. The library I wrote is in a very dirty test state and needs some massive cleanup and finishing. But it seems that I have solved all problems I have seen so far.
 

thedesolatesoul

Expert
Licensed User
So you figured out a way to use Material styles on pre-lollipop views? I thought that wasnt even supported in AppCompat yet.
Anyway, its great news!
 

Inman

Well-Known Member
Licensed User
Is it possible to implement the Material style Navigation Drawer that slides over the actionbar/toolbar and also appears semitransparent behind the status bar?
 

alexwekell

Member
Licensed User
Is it possible to implement the Material style Navigation Drawer that slides over the actionbar/toolbar and also appears semitransparent behind the status bar?
I'm looking for a way to recreate the Lollipop / Material style nav drawer also
 
Top