Thursday 29 January 2015

ToolBar (AppCompat) Example in Android.

This project has been created in  Android Studio using Android 5.0 SDK. and This example can run in lower versions also for that i have used AppCompat library.

Screen Shot:


Note: Make sure you have added AppCompat-V7 library to your Android Studio Project as follows.
build.gradle:
apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.2"

    defaultConfig {
        applicationId "materialdesignapp.ram.com.materialdesignapp"
        minSdkVersion 10
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}


Create colors.xml file under res folder and include following colors as shown below.
colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#009688</color>
    <color name="primary_dark">#00796B</color>
    <color name="accent">#9C27B0</color>
</resources>


under styles.xml include following styles as follows.
styles.xml:
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>

    <style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary</item>
        <item name="colorAccent">@color/primary</item>
    </style>
</resources>


Next create values-v21 folder under res folder and copy styles.xml from values folder and paste in under values-v21 folder or create new styles.xml under values-v21 folder and include following styles as shown below.
styles.xml:
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
        <!-- Main theme colors -->
        <!--   your app branding color for the app bar -->
        <item name="android:colorPrimary">@color/primary</item>
        <!--   darker variant for the status bar and contextual app bars -->
        <item name="android:colorPrimaryDark">@color/primary_dark</item>
        <!--   theme UI controls like checkboxes and text fields -->
        <item name="android:colorAccent">@color/accent</item>
    </style>

</resources>





Next under layout folder create new xml file called apptool_bar.xml and include following code as shown below
apptool_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary">
</android.support.v7.widget.Toolbar>


Next under activity_main.xml include apptool_bar layout using include tag as shown below.
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include
        layout="@layout/apptool_bar"
        android:id="@+id/apptool_bar">
    </include>


    <TextView
        android:text="@string/hello_world"
        android:layout_below="@+id/apptool_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>


Next under MainActivity call the reference of ToolBar and set that to action bar as follows.
MainActivity.java:
package materialdesignapp.ram.com.materialdesignapp;

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


public class MainActivity extends ActionBarActivity {
    Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.apptool_bar);

        setSupportActionBar(toolbar);

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}



 

 
 


 
 




 


 
 

 


No comments:

Post a Comment