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);
    }
}


 

 
 

 
 



 

 
 
 

ToolBar (AppCompat) Example in Android. 2015-01-29T22:56:00-08:00 Rating: 4.5 Diposkan Oleh: Unknown