Tuesday, 16 December 2014

Apply Material Design for LollyPop and Pre-Lolly Devices using AppCompat v7 Library -Part 1


Step 1:

Extend Your Activty Class with AppCompatActivity
MainActivity.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package com.pratap.materialdesign;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity{

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  // Handle action bar item clicks here. The action bar will
  // automatically handle clicks on the Home/Up button, so long
  // as you specify a parent activity in AndroidManifest.xml.
  int id = item.getItemId();
  if (id == R.id.action_settings) {
   return true;
  }
  return super.onOptionsItemSelected(item);
 }
}

Step 2:

Modify the theme in styles.xml file with AppCompat Theme in values folder

values/styles.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<resources>

    <!-- Base application theme using AppCompatv21 Library -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- your app branding color for the app bar -->
        <item name="colorPrimary">@color/md_blue_500_primary</item>

        <!-- darker variant for the status bar and contextual app bars -->
        <item name="colorPrimaryDark">@color/md_blue_700</item>

        <!-- theme UI controls like checkboxes and text fields -->
        <item name="colorAccent">@color/md_red_200</item>
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme"></style>

</resources>

Step 3:

Create a new folder named values-21 under res folder and create a styles.xml for specific to lollypop device.

values-21/styles.xml

 
1
2
3
4
5
6
7
<resources>

    <style name="AppTheme" parent="AppBaseTheme">
        <!-- API 21 theme customizations can go here. -->
    </style>

</resources>


Step 4:

Update the AndroidManifest.xml file with Application theme.

AndroidManifest.xml


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.pratap.materialdesign"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <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>


Step 5:

Run the application in device or Emulator


ScreenShots



on

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)