Customize Your Material Theme In Lollipop(5.0)
Material design is very popular for its visual, motion, and interaction designing on various platforms and devices.
Android provides the some basic elements to build material design apps as listed below:
1.) A new theme
2.) New widgets for complex views
3.) New APIs for custom shadows and animations
In addition to above elements the new Lollipop 5.0 version of Android provides three more Material Theme flavors:
1.) Theme.Material – Dark Theme and default flavor in Android 5.0.
2.) Theme.Material.Light – Light Theme.
3.) Theme.Material.Light.DarkActionBar – Light Theme, but dark action bar.
To get started with customizing your Material design in your Android app, update your targetSdkVersion to “21”, apply the new Material theme and follow the steps as shown in the tutorial.
We will use our Ripple animation project and will customize its theme in remaining section. Read Ripple animation in Android 5.0 and create same project structure.
When creating a custom theme for your app, open your res/values/styles.xml file and extend the Material theme. By default you will have below code in your style.xml:
<resources> <style name="AppTheme" parent="android:Theme.Material"> </style> </resources>
You can create your own style here and then make sure to apply the same into your application in the manifest file:
The Material Theme in android 5.0 adds 5 new color values that can be easily set in your application to customize the theme.
Step1: Open the res/value/style.xml of your project and write below code in it.
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="firsCustomAppTheme" parent="android:Theme.Material.Light"> <item name="android:colorPrimary">#00EE00</item> <item name="android:colorPrimaryDark">#EE0000</item> <item name="android:colorAccent">#EEEEEE</item> <item name="android:textColorPrimary">#EEEE00</item> <item name="android:textColor">#EE0000</item> <item name="android:navigationBarColor">#0000EE</item> </style> </resources>
Step2: If you are using android studio make sure this changes must be done in v21styles.xml and not in style.xml.
Step3: Apply the theme name into your manifest as well. Your manifest should look like below:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.myfirstapplication" > <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/firsCustomAppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
Step4: Run to check the output as below:
Check the video below to get some more understanding on Holo to Material theme.
Also Checkout my previous blog on Android Wear Creating First helloworld
Related Posts
7 Resources to Sharpen your C programming skills
Updating Your Progressbar With A Count Down Timer
Part2 – App Indexing To Connect Your Android App
App Indexing To Connect Your Android App
Adding Google Play Services Library To Your Project
Implementing Dashboard Design In Your Application
Tinting Your Android UI
Adding Google Search To Your App