Android Tutorial Material Design 2 - Using the AppCompat library

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

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.


Setting up AppCompat library
For this tutorial we need the AppCompat wrapper library. Please set it up as explainded in the first post of the library thread.

First we need to add the AppCompat library to our project. For this check the AppCompat library in the libs tab of the IDE.

Next thing to know is that every Activity which uses AppCompat features has to extend the android.support.v7.app.AppCompatActivity. This can be done with the #Extends attribute in the activity modules.

B4X:
 #Extends: android.support.v7.app.AppCompatActivity

Setting up the theme
If we want to use AppCompat, we must use an AppCompat theme. Because we want to configure some colors in the theme we set up our own theme resource in the Manifest Editor:

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

CreateResource(values, theme.xml,
<resources>
    <style name="MyAppTheme" parent="@style/Theme.AppCompat">
        <item name="colorPrimary">#FF9800</item>
        <item name="colorPrimaryDark">#F57C00</item>
        <item name="colorAccent">#FFA726</item>
    </style>
</resources>
)

As you can see we use a parent of Theme.AppCompat for our example. There are also Theme.AppCompat.Light or Theme.AppCompat.Light.DarkActionBar themes like the standard Material Design themes. Additionally to the theme name we set colorPrimary, colorPrimaryDark and colorAccent. See the first Material Design tutorial for an explanation of these colors.

So let's see how our app looks like. For the first example I just added some UI elements like EditText, CheckBox, RadioButton, Spinner, ...

MaterialExample_Lollipop_wrong_scaled.png
MaterialExample_KitKat_wrong_scaled.png


On Lollipop devices this looks nice but there seems to be something wrong with pre Lollipop devices like KitKat, JellyBean or even Gingerbread. The UI elements like EditText, CheckBox and RadioButton just show black and are hard to see on the dark theme.
This is because the way B4A creates its views in the designer is not compatible with the AppCompat library. The AppCompat wrapper library contains some views which are compatible with AppCompat. Instead of EditText, CheckBox or RadioButton just use ACEditText, ACCheckBox and ACRadioButton views. These can be added as CustomViews in the designer or they can be added to the Activity (or to a Panel) manually by code just like the standard views.

Additionally there is a new ACSwitch view which looks like the standard on/off switch.
In the second attached example all these views are used as a CustomView with the designer. The examples should work on all devices with API 7 or above. On GingerBread devices there is not the nice coloring of the views but the app should still work.

MaterialExample_Lollipop_ok_scaled.png
MaterialExample_KitKat_ok_scaled.png
MaterialExample_Ginger_ok_scaled.png


Notice that on Gingerbread devices there is no overflow menu anymore.
 

Attachments

  • AppCompatExample1_2.0.zip
    8.1 KB · Views: 1,825
  • AppCompatExample2_2_0.zip
    8.3 KB · Views: 2,273
Last edited:

BarryW

Active Member
Licensed User
How can we hide the toolbar. It gives an error when IncludeTitle: False... Tnx
 

corwin42

Expert
Licensed User
How can we hide the toolbar. It gives an error when IncludeTitle: False... Tnx
Use a Theme without an ActionBar as your base theme like "Theme.AppCompat.Light.NoActionBar"

Or you can disable the ActionBar in the theme like here:

B4X:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyAppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">#FF9800</item>
        <item name="colorPrimaryDark">#F57C00</item>
        <item name="colorAccent">#FFA726</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>
 

Scantech

Well-Known Member
Licensed User
Use a Theme without an ActionBar as your base theme like "Theme.AppCompat.Light.NoActionBar"

Or you can disable the ActionBar in the theme like here:

B4X:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyAppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">#FF9800</item>
        <item name="colorPrimaryDark">#F57C00</item>
        <item name="colorAccent">#FFA726</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>

Thanks, that did the trick for my Main. # includetitle has to be true. That poses a problem on my other Activities. I want them with the Titles. Any workaround for this?
 

corwin42

Expert
Licensed User
Thanks, that did the trick for my Main. # includetitle has to be true. That poses a problem on my other Activities. I want them with the Titles. Any workaround for this?

Use different Themes for your activities. See this thread how this is done.
 

Alisson

Active Member
Licensed User
I have the error:
Generating R file. Error
d:\android\android-sdk\extras\android\support\v7\appcompat\res\values-v23\styles_base_text.xml:19: error: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Inverse'.

upload_2016-1-15_10-5-53.png


My xml file:

<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (C) 2014 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<resources>

<style name="Base.Widget.AppCompat.Button.Colored" parent="android:Widget.Material.Button.Colored" />

</resources>


How can I do it?
 

wimpie3

Well-Known Member
Licensed User
Is it possible to switch between a hamburger icon and the back button in the toolbar (animated), just like it is done in the Gmail app?
 

corwin42

Expert
Licensed User
Is it possible to switch between a hamburger icon and the back button in the toolbar (animated), just like it is done in the Gmail app?

Yes, there are several libraries with which you can add this effect.

AHNavigationdrawer (Navigation drawer which includes an animated hamburger->arrow drawable)
MSMaterialDrawer (Simple to use Navigation drawer which automatically includes this effect. Recommended)
MSMaterialMenu (Drawable with the animated icon).
 

JNG

Member
Licensed User
I am getting error
Unfortunately Appcompact1 has while installing on sdk 23

Path defined as
#AdditionalRes: D:\b4alib1392014\b4aresources\b4a_appcompat, de.amberhome.objects.appcompat
#AdditionalRes:C:\android\sdk\extras\android\support\v7\appcompat\res, android.support.v7.appcompat
#Extends: android.support.v7.app.ActionBarActivity

Path in configure path is

C:\android\sdk\platforms\android-23\android.jar

pl. advise where I am wrong
 

JNG

Member
Licensed User
On Phone Unfortunately Appcompact1 has Stopped while installing on sdk 23
below is the log message :
LogCat connected to: ZY2224PCGQ
--------- beginning of crash
--------- beginning of system
--------- beginning of main
 

corwin42

Expert
Licensed User
On Phone Unfortunately Appcompact1 has Stopped while installing on sdk 23
below is the log message :
LogCat connected to: ZY2224PCGQ
--------- beginning of crash
--------- beginning of system
--------- beginning of main
See the unfiltered logs if there is a real error message.
 

b4auser1

Well-Known Member
Licensed User
I tried to compile and start AppCompatExample1 on Android KK and newer versions. On LL and MM EditText and Spinner have Material Design style. But on KK do not (see attached screenshot), though other views with MD style. How to resolve the issue ?
And another question - CheckBox with MD has Black/White colors. Before it was Blue/White colors. How to confogure colors for CheckBox in theme.xml ?
 

Attachments

  • sshot-2016-03-30-[16-33-55].png
    sshot-2016-03-30-[16-33-55].png
    16.4 KB · Views: 419

corwin42

Expert
Licensed User
Hi corwin42,
Do you know if the current B4A 5.80 designer is compatible with the AppCompact?

Yes. AppCompat Library is compatible with the current B4A version designer but it currently does not support the new custom properties feature of the designer. I'm currently working on it.
 

trueboss323

Active Member
Licensed User
Alright, because I am using B4A 5.8 but I am still having that same problem with the radio buttons and checkboxes being in black color when I test it on Android 4.x. Is there currently a fix for this?
 
Top