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: 2,096
  • AppCompatExample2_2_0.zip
    8.3 KB · Views: 2,565
Last edited:

ernschd

Active Member
Licensed User
Longtime User
When i'm trying to compile one of the example apps, the compiler displays the following lines:

B4X:
Parsing code.  0.00
Compiling code.  0.06
Compiling layouts code.  0.02
Generating R file.  Error
C:\Programme\Android\android-sdk\extras\android\support\v7\appcompat\res\values-v21\styles_base.xml:75: error: Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.ActionButton'.
C:\Programme\Android\android-sdk\extras\android\support\v7\appcompat\res\values-v21\styles_base.xml:79: error: Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.ActionButton.CloseMode'.
...
C:\Programme\Android\android-sdk\extras\android\support\v7\appcompat\res\values-v21\themes_base.xml:191: error: Error: No resource found that matches the given name: attr 'android:colorPrimaryDark'.

Am i missing something?
 

corwin42

Expert
Licensed User
Longtime User
When i'm trying to compile one of the example apps, the compiler displays the following lines:

B4X:
Parsing code.  0.00
Compiling code.  0.06
Compiling layouts code.  0.02
Generating R file.  Error
C:\Programme\Android\android-sdk\extras\android\support\v7\appcompat\res\values-v21\styles_base.xml:75: error: Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.ActionButton'.
C:\Programme\Android\android-sdk\extras\android\support\v7\appcompat\res\values-v21\styles_base.xml:79: error: Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.ActionButton.CloseMode'.
...
C:\Programme\Android\android-sdk\extras\android\support\v7\appcompat\res\values-v21\themes_base.xml:191: error: Error: No resource found that matches the given name: attr 'android:colorPrimaryDark'.

Am i missing something?

You have to compile with at least API 21 android.jar. Configure it in the Tools/Configure Paths menu in the B4A IDE.
 

Theera

Well-Known Member
Licensed User
Longtime User
Hi Corwin42 or others,
I like your the example #2. If I need to add status of swith ON/OFF (in Thai too) ,How do I edit it?

and I would like you add hint method as same as this for AcEditText too.
 
Last edited:

alexwekell

Member
Licensed User
Longtime User
Edit: Is there any update on adding the navigation drawer with this?
 
Last edited:

corwin42

Expert
Licensed User
Longtime User
Edit: Is there any update on adding the navigation drawer with this?

Wait for the next update of the AHNavigationDrawer library. Will be released soon.
 

omidaghakhani1368

Well-Known Member
Licensed User
Longtime User
Hi.
I change android api version to 21
and run project but get error below
..\resource\values\themes.xml:6: error: Error: No resource found that matches the given name: attr 'colorAccent'.
..\resource\values\themes.xml:4: error: Error: No resource found that matches the given name: attr 'colorPrimary'.
..\resource\values\themes.xml:5: error: Error: No resource found that matches the given name: attr 'colorPrimaryDark'.
what is it?
 

chrjak

Active Member
Licensed User
Longtime User
I get an error:

javac 1.7.0_40
src\com\my\app\main.java:16: error: package android.support.v7.app does not exist
public class main extends android.support.v7.app.ActionBarActivity implements B4AActivity{
^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
1 error

I downloaded newest support package!?
 

corwin42

Expert
Licensed User
Longtime User
Hi.
I change android api version to 21
and run project but get error below
..\resource\values\themes.xml:6: error: Error: No resource found that matches the given name: attr 'colorAccent'.
..\resource\values\themes.xml:4: error: Error: No resource found that matches the given name: attr 'colorPrimary'.
..\resource\values\themes.xml:5: error: Error: No resource found that matches the given name: attr 'colorPrimaryDark'.
what is it?

Have you changed this line to point to the correct path of your SDK installation?
B4X:
#AdditionalRes: C:\Android\android-sdk\extras\android\support\v7\appcompat\res, android.support.v7.appcompat

I get an error:

javac 1.7.0_40
src\com\my\app\main.java:16: error: package android.support.v7.app does not exist
public class main extends android.support.v7.app.ActionBarActivity implements B4AActivity{
^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
1 error

I downloaded newest support package!?

And have you copied the android-support-v7-appcompat.jar to your custom libs folder?
 

chrjak

Active Member
Licensed User
Longtime User
Sorry I didn't because i haven't found the file... Thanks :D
 

chrjak

Active Member
Licensed User
Longtime User
Unfortunately the app stopped

My manifest is like this:
AddManifestText(
<uses-sdk android:minSdkVersion="8" 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,"@string/app_name")
'End of default text.
SetApplicationAttribute(android:theme, "@style/MyAppTheme")

All # codes are in the app code and theme.xml is in values. what is going wrong? o.o

Sorry
 

corwin42

Expert
Licensed User
Longtime User
Unfortunately the app stopped

My manifest is like this:
AddManifestText(
<uses-sdk android:minSdkVersion="8" 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,"@string/app_name")
'End of default text.
SetApplicationAttribute(android:theme, "@style/MyAppTheme")

All # codes are in the app code and theme.xml is in values. what is going wrong? o.o

Sorry
Stack trace of the error you get? Maybe you will only see it in the unfiltered logs.
 

chrjak

Active Member
Licensed User
Longtime User
I have filter off + connected to my phone. it shows nothing...
 

chrjak

Active Member
Licensed User
Longtime User
i tried again with empty activity_start and _resume but it keeps crashing!?
 

corwin42

Expert
Licensed User
Longtime User
i tried again with empty activity_start and _resume but it keeps crashing!?

If you get the message "unfortunately the app stopped" ther MUST be a stack trace of an exception. Without it I can't help you.
 

chrjak

Active Member
Licensed User
Longtime User
But there is none.... LogCat shows nothing (See my Screenshot)

If you like we can meet over teamviewer and you can look over all my files etc...
 

shashkiranr

Active Member
Licensed User
Longtime User
Hi All,

I am currently using the below code to hide the buttons on the actionbar when the navigation drawer is open. Is there any better way of doing it?

B4X:
Sub Drawer_DrawerOpened (DrawerGravity As Int)
    Log("Drawer Opened: ")
    isDrawerOpened = True
    For i = 0 To ActionBar.Menu.Size-1
        Dim act As ACMenuItem = ActionBar.Menu.GetItem(i)
        act.Visible = False
    Next
End Sub

Regards,
SK
 

corwin42

Expert
Licensed User
Longtime User
It's Ok how you have done it.
Maybe you can put this code in a sub with an "enable" Parameter. Then you can use the same sub for enabling and disabling the action items.
 

migrec

Member
Licensed User
Longtime User
Can't compile your Toolbar example, I get this (and yes, all paths are correct):

B4X:
Parsing code.                           0.03
Compiling code.                         0.41
Compiling layouts code.                 0.08
Generating R file.                      0.50
Compiling generated Java code.          Error
javac 1.8.0_25
src\de\amberhome\appcompat\toolbarexample1\main.java:17: error: cannot access SupportParentable
public class main extends android.support.v7.app.ActionBarActivity implements B4AActivity{
       ^
  class file for android.support.v4.app.TaskStackBuilder$SupportParentable not found
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
1 error
 
Top