Tuesday, 25 March 2014

Actionbar Tutorials Part 01----Adding ActionBar to the Activity

The action bar is a window feature that identifies the user location, and provides user actions and navigation modes. Using the action bar offers your users a familiar interface across applications that the system gracefully adapts for different screen configurations.

The action bar provides several key functions:

1.Provides a dedicated space for giving your app an identity and indicating the user's location in the app.

2.Makes important actions prominent and accessible in a predictable way (such as Search)

3.Supports consistent navigation and view switching within apps (with tabs or drop-down lists).

The ActionBar APIs were first added in Android 3.0 (API level 11) but they are also available in the Support Library for compatibility with Android 2.1 (API level 7) and above.

This Tutorial will focus how to use ActionBar class APIs in the support library. So before we can add the action bar, we must set up our project with the appcompat v7 support library by following the instructions in the Support Library Setup.



Support Library Set-up procedure:
1.Start the Android SDK Manager.

2.In the SDK Manager window, scroll to the end of the Packages list, find the Extras folder and, if necessary, expand to show its contents.

3.Select the Android Support Library item.

4.Click the Install packages... button.



After downloading, the tool installs the Support Library files to your existing Android SDK directory. The library files are located in the following subdirectory of your SDK: <sdk>/extras/android/support/ directory.

1.Make sure you have downloaded the Android Support Library using the SDK Manager.

2.Create a library project and ensure the required JAR files are included in the project's build path:

3.Select File > Import.

4.Select Existing Android Code Into Workspace and click Next.

5.Browse to the SDK installation directory and then to the Support Library  

   folder. For example, if you are adding the appcompat project,
  browse to <sdk>/extras/android/support/v7/appcompat/.

6.Click Finish to import the project. For the v7 appcompat project, you should now see a new project titled android-support-v7-appcompat.

7.In the new library project, expand the libs/ folder, right-click each .jar file and select Build Path > Add to Build Path. For example,
  when creating the the v7 appcompat project, add both the android-support-v4.jar and android-support-v7-appcompat.jar files to the build path.

8.Right-click the library project folder and select Build Path > Configure Build Path.

9.In the Order and Export tab, check the .jar files you just added to the build path, so they are available to projects that depend on this
  library project. For example, the appcompat project requires you to export both the android-support-v4.jar and android-support-v7-
  appcompat.jar files.

10.Uncheck Android Dependencies.

11.Click OK to complete the changes.

We now have a library project for our selected Support Library that we can use with one or more application projects.


Add the library to our application project:
1.In the Project Explorer, right-click your project and select Properties.
2.In the category panel on the left side of the dialog, select Android.
3.In the Library pane, click the Add button.
4.Select the library project and click OK. For example, the appcompat project should be listed as android-support-v7-appcompat.
5.In the properties window, click OK.


Once our project is set up with the support library, here's how to add the action bar:

1.Create your activity by extending ActionBarActivity.
 

2.Use (or extend) one of the Theme.AppCompat themes for your activity.

Here in following example i have given code how it looks like:

activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>


MainActivity.java:
package com.example.demo;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity {

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

    }
}




AndroidManifest.xml: 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.demo"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.demo.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest> 


ScreenShots:

Before adding ActionBar
After adding ActionBar