Android Tutorial Material Design 1 - Basics

Note: You should use B4A 6.0 or above for this tutorial.

Android 5.0 (also called "Lollipop") introduced a new design for apps called "Material Design".

With this tutorial series I will introduce some of the Material Design guidelines and explain some differences to the Holo Design.

For a good start it will be helpful if you know what material design is so it is a good idea to spend some time to study the first few chapters of the official Google "Material Design" guidelines.

Basic Material Example

In this tutorial we will create a very simple app that uses Material design on Android 5.0+ (Lollipop, Marshmallow, Nougat and above) devices and the normal Holo design on Android 4.0 devices.

Important:
Because we use features of the SDK version 21 you have to configure the correct android.jar in the Configure Paths dialog of the IDE. Set the path for android.jar to at least <Your_Android_SDK_HOME>\platforms\android-21\android.jar. You should always use the latest android.jar that is available like android-24/android.jar. Don't worry. Your app will run on older Android versions, too.

Android always uses a theme for the UI. The default theme of an app depends on the installed OS version and the targetSdkVersion specified in the manifest of the app.
  • A targetSdkVersion up to 10 results in the old Classic Android theme on all OS versions.
  • targetSdkVersion of 11 up to 13 results in a dark Holo theme on OS versions 3.0+ (Honeycomb and up).
  • If targetSdkVersion is 14 or above, the app will have Holo theme on OS versions up to 4.4 (KitKat) and (this is a bit strange) Material theme on 5.0 (Lollipop).
I would have expected Holo theme until targetSdkVersion is set to 21 or above but that is not the case.
Therefore it is a good idea to explicitly set a Holo theme if your current app does not really support Material Design. There are some changes in Material Design theme that will probably break your app.
Be aware that setting targetSdkVersion affects the default theme. You can explicitly set another theme in the manifest if you want.

Best practice is to set targetSdkVersion to the highest OS version number your app should support and it has been tested on. So for our example app we set it to 21.
The minSdkVersion has to be set to the lowest OS version number the app should support. Since our app will use the ActionBar and the StdActionBar library this will be OS version 11 (Honeycomb). So we have to change the following line in the Manifest Editor:

B4X:
<uses-sdk android:minSdkVersion="11" android:targetSdkVersion="21"/>

This will enable the default dark Material theme on Android 5.0 Lollipop devices.

Using our own Theme

Because we want to use the light Material theme (with a dark ActionBar) and not the dark one in our app and we want to use custom colors for the ActionBar and StatusBar we have to create our own theme resource file. There are several ways to create resource files.
  1. You can save them in <project-home>\Objects\res folder and make the files read only.
  2. You can create your own folder for resouce files and add it to B4A with #AdditionalRes attribute.
  3. You can create the resource files with CreateResource() in the Manifest editor.
I prefer to use the third method, so we add the following lines to the Manifest editor:

B4X:
CreateResource(values-v21, themes.xml,
<resources>
    <style name="MyAppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
        <item name="android:colorPrimary">#FF9800</item>
        <item name="android:colorPrimaryDark">#F57C00</item>
        <item name="android:colorAccent">#FFA726</item>
    </style>
</resources>
)

The theme declares three attributes:

colorPrimary - This color is the main color for the app and is used for example as the ActionBar background
colorPrimaryDark - This color is used for the StatusBar
colorAccent - This is the AccentColor used for other UI elements like checkboxes, radio buttons etc.

So if we set these three attributes we can change the whole appearance of our app. Note that the colors defined here are also used in the systems task manager on Lollipop devices.

The material design guidelines gives some hints of what colors should be used in an app. Please study these pages about colors for further information.

Now we have to set our custom theme in the Manifest Editor:

B4X:
SetApplicationAttribute(android:theme, "@style/MyAppTheme")

Ok, now we have set the theme for Android Lollipop (5.0) devices. But what about the other versions like Jelly Bean (4.x) or KitKat (4.4)?
We simply add a theme that sets the Holo theme for the app. So we add the following lines to the Manifest editor:

B4X:
CreateResource(values, themes.xml,
<resources>
    <style name="MyAppTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
    </style>
</resources>
)

So we have now set Material theme on Lollipop (and higher) devices and Holo theme on lower Android versions.

Differences between Holo and Material Design

So what are the main differences between the Holo theme and Material theme?
Here are some screenshots of the example app with the differences. In addition to some visual enhancements there are some very important changes:

Example_Holo1_scaled.png
Example_Material1_scaled.png


  • No Application Icon in ActionBar - In Material Design there is no Application Icon in the ActionBar. Though it is still possible to show the up-arrow or a menu icon. This will be shown in a later tutorial.
  • Different ActionBar Height - ActionBar height should be 48dip on landscape phone, and 56dip in portrait. On tablets it should always have 64dip.
  • Buttons floating above all other views - With Material Design every visible "object" has an elevation value. Buttons by default have an elevation of 2dip though floating above other views. View.BringToFront() does not work anymore on buttons!
  • List Popups and Menus start over root object and not below - As you can see in the screenshots the overflow menu overlaps the ActionBar on Material Design.
I hope this tutorial gives you a good start to Material Design. In the next tutorial I will explain how to use the AppCompat support library to create Material Design apps even for pre Lollipop devices.
 

Attachments

  • SimpleMaterialExample2_0.zip
    8 KB · Views: 2,130
Last edited:

chrjak

Active Member
Licensed User
Longtime User
Hey corwin. You have great tutorials. Could you add some for animations in material?
 

corwin42

Expert
Licensed User
Longtime User
Hey corwin. You have great tutorials. Could you add some for animations in material?
Currently not planned. Maybe later.
 

chrjak

Active Member
Licensed User
Longtime User

Ramezanpour2

Member
Licensed User
Longtime User
hi dear im get an error please help and answer me


B4A version 4.30
Parsing code. 0.03
Compiling code. 0.11
Compiling layouts code. 0.02
Generating R file. Error
..\resources\values-v21\themes.xml:3: error: Error retrieving parent for item: No resource found that matches the given name '@android:style/Theme.Material.Light.DarkActionBar'.
..\resources\values-v21\themes.xml:6: error: Error: No resource found that matches the given name: attr 'android:colorAccent'.
..\resources\values-v21\themes.xml:4: error: Error: No resource found that matches the given name: attr 'android:colorPrimary'.
..\resources\values-v21\themes.xml:5: error: Error: No resource found that matches the given name: attr 'android:colorPrimaryDark'.
 

RandomCoder

Well-Known Member
Licensed User
Longtime User
Do you have Android SDK platform-tools 21 installed? Run the Android SDK manager and make sure that the checkbox is ticked.
 

Ramezanpour2

Member
Licensed User
Longtime User
@RandomCoder

this is my manifest





'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: http://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="11" android:targetSdkVersion="21"/>
<supports-screens android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
'End of default text.

'Set custom theme
SetApplicationAttribute(android:theme, "@style/MyAppTheme")
 

RandomCoder

Well-Known Member
Licensed User
Longtime User
@RandomCoder

this is my manifest





'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: http://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="11" android:targetSdkVersion="21"/>
<supports-screens android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
'End of default text.

'Set custom theme
SetApplicationAttribute(android:theme, "@style/MyAppTheme")
Have you updated your path to point to the new SDK...

Important:
Because we use features of the SDK version 21 you have to configure the correct android.jar in the Configure Paths dialog of the IDE. Set the path for android.jar to <Your_Android_SDK_HOME>\platforms\android-21\android.jar
 

RandomCoder

Well-Known Member
Licensed User
Longtime User
@RandomCoder

im cant set sdk 21 becouse im not found it on my pc
Now we have found the problem! :D

As you have already shown that SDK 21 platform-tools is installed in the Android SDK Manager, then it is just a case of locating where it has stored the Android.jar file. If your having trouble locating it then just use Windows search to locate it for you, there will be several depending on which SDK's you have previously installed. You want the one that is in the android-21 folder.
 

hzchrisfang

Member
Licensed User
Longtime User
Hi @corwin42
I have a problem.
I try this example in my device, but display black actionbar and white panel just same as the left picture in the #1. But I try the example project in Material Design 2, Material Design 3 and Material Design 4, it works fine. So where the problem is?
 

thedesolatesoul

Expert
Licensed User
Longtime User
Hi @corwin42
I have a problem.
I try this example in my device, but display black actionbar and white panel just same as the left picture in the #1. But I try the example project in Material Design 2, Material Design 3 and Material Design 4, it works fine. So where the problem is?
You didnt add the theme in the manifest editor.
 

hzchrisfang

Member
Licensed User
Longtime User
As you are running it on a pre-lollipop device, this is expected.

OK, the problem is my device version. I read this:

In the first Material Design tutorial we created a simple app with Material Design for Android 5.0 (Lollipop) devices. But what about older Android versions?
For compatibility with older devices Google created the support libraries which brings new features to older Android releases. For Material Design the most important support library is the AppCompat library. This tutorial will show how to use the AppCompat library with B4A.

Thank you for your patience @thedesolatesoul
 
Last edited:
Top