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,129
Last edited:

yiankos1

Well-Known Member
Licensed User
Longtime User
Library works fine! I uploaded Selfie Light app and shadows works great. Here on another project, nor actionbar nor panel has shadow even if i set it:
B4X:
Private AC As AppCompat
AC.SetElevation(pnlTest,4dip)
Do you know why it does not show shadow?
test.png
 

corwin42

Expert
Licensed User
Longtime User
SetElevation only works for Android 5.0 or above (works in older versions, too but without shadow effect). The screenshot you have posted does not look like Android 5.x
 

corwin42

Expert
Licensed User
Longtime User
Thank you for the answer. I want to inform you that, my app tested on samsung galaxy s5 running lollipop. As you can see at screenshot, it is lollipop, see dark orange bar at top.
Ok, then without a sample project which shows this problem I can't guess whats the problem is.
 

joseIsaac123

Member
Licensed User
Disculpen quisiera saber como puedo registrarme como alguien que ya tiene licencia, ya que e comprado hace como 4 dias el software b4a version 5.80 hay algun tutorial para ver como hacerlo? o mando algunas capturas donde e realizado la compra?

si alguien me puede responder le agradeceria ya que ocupo saber si alguien me puede ayudar con lo del material design esque ya logre poner la primera actividad con este material y un menu pero no logro hacerlo para una segunda actividas (pantalla)
 

DonManfred

Expert
Licensed User
Longtime User
You should write ENGLISH here please.
Alternatively you can create a thread in the spanish forum and ask there
Anyway: It is better to create a new Thread in the Questionsforum giving more details. Your code, the error you get.

I´m just guessing as i dont speak spanish so i did not understand what you wrote.
 

RSL

Member
Licensed User
Longtime User
I'm starting now with material design and i having some problems.
This is the error when in try to compile 'AppCompactSearch' example:
B4X:
B4A version: 5.80
Parsing code.    (0.00s)
Compiling code.    (0.14s)
Compiling layouts code.    (0.01s)
Generating R file.    (2.99s)
Compiling debugger engine code.    (3.03s)
Compiling generated Java code.    Error
javac 1.8.0_91
javac: invalid flag: gen\de\amberhome\objects\appcompat
Usage: javac <options> <source files>
use -help for a list of possible options
 

Dave O

Well-Known Member
Licensed User
Longtime User
Great stuff, I just created my first Android 5+ app and was wondering how to do color-theme stuff. Many thanks for this tutorial.

Related: Is there a property for setting the text in system dialogs (like MsgBox) when they're invoked from my app?

(My app now uses red elements by applying the color properties you described above, but if I open a MsgBox2, the button text is blue. Possible to have it match my color scheme, or does Android control that at a global level?)

Thanks!
 
Last edited:

hsteph

Member
Licensed User
Greetings all, ...
Very new to this. Went trough the tutorial and I have been successful generating my first app.

Now exploring the Material Design sample and I get this message during compilation:
Cannot find: C:\Program Files (x86)\Anywhere Software\Basic4android\libraries\android-support-v4.jar

I'm using the latest Android Studio version
... AppData\Local\Android\sdk\platforms\android-25\android.jar

stdActionBar has been added here and path has been configured
C:\Program Files (x86)\Anywhere Software\Basic4android\AddLib

The Extra Android Support Repository rev 41 is installed, ...

XML manifest shows:
<uses-sdk android:minSdkVersion="11" android:targetSdkVersion="21"/>

Something is missing for sure as I get this "android-support-v4.jar" error message, ...

Input welcome ;)

Thanks in advance
Stéphane
 

ZenWhisk

Member
Licensed User
Longtime User
Does the file android-support-v4.jar exist in the libraries folder?
best regards
 

corwin42

Expert
Licensed User
Longtime User
Greetings all, ...
Very new to this. Went trough the tutorial and I have been successful generating my first app.

Now exploring the Material Design sample and I get this message during compilation:
Cannot find: C:\Program Files (x86)\Anywhere Software\Basic4android\libraries\android-support-v4.jar

I'm using the latest Android Studio version
... AppData\Local\Android\sdk\platforms\android-25\android.jar

stdActionBar has been added here and path has been configured
C:\Program Files (x86)\Anywhere Software\Basic4android\AddLib

The Extra Android Support Repository rev 41 is installed, ...

XML manifest shows:
<uses-sdk android:minSdkVersion="11" android:targetSdkVersion="21"/>

Something is missing for sure as I get this "android-support-v4.jar" error message, ...

Input welcome ;)

Which B4A version do you use?
Are you using any additional libraries?

The latest B4A versions should map from the android-support-v4.jar to the Maven repository so the .jar file should not be needed anymore.
 

hsteph

Member
Licensed User
Hi ZenWhick, I have no "android-support*.jar" files installed on my computer
Hi corwin42, I use B4A v6.5
The only additional library contains stdActionBar and it is stored here C:\Program Files (x86)\Anywhere Software\Basic4android\AddLib
 

hsteph

Member
Licensed User
Well, based on previous posts, I have tried to :
remove <dependsOn>android-support-v4</dependsOn> from stdActionbar.xml : => It works
replace with "com.android.support:support-v4" : => It works

So, what is the best practice? remove the line (less is more;) or with the 'com.android.support:support-v4' syntax in the xml file ?
 
Top