Android Action Bar Tutorial

1:15 PM Fighttech 0 Comments

The action bar helps access the most important and relevant to current context actions much quicker and easier. Buttons that appear in the action bar are called action buttons, and in case some of them can't fit in the action bar, they are hidden in the action overflow. 
     Action bar also gives a dedicated space in your application to identify users location in the app, which can be very useful if your application has a complex hierarchy. 

Now there are three things that we need to do to make our action bar work:

Create menu and add items to it

         By default you will already have a menu file created for you,so go to the the res\menu directory and paste the following code into your main.xml file (in case you want to create a new menu just right click on menu directory and select New->Android XML File):

main.xml file:
12345678910111213141516171819202122

<menu xmlns:android="http://schemas.android.com/apk/res/android" >







<item android:id="@+id/about_facebook"



android:icon="@drawable/facebook"



android:title="@string/facebook"



android:showAsAction="ifRoom"/>







<item android:id="@+id/about_reddit"



android:icon="@drawable/reddit"



android:title="@string/reddit"



android:showAsAction="ifRoom" />







<item android:id="@+id/about_twitter"



android:icon="@drawable/twitter"



android:title="@string/twitter"



android:showAsAction="ifRoom" />







<item android:id="@+id/about_youtube"



android:icon="@drawable/youtube"



android:title="@string/youtube"



android:showAsAction="ifRoom" />



</menu>
view rawmain.xml hosted with ❤ by GitHub


         As you can see the menu we've created has four items, each one of them has an icon (I am using social network icons that I've downloaded from here http://sixrevisions.com/freebies/icons/free-set-of-social-media-icons-large-icons-social/) and a title. 
           The value of android:showAsAction is set to "ifRoom", which means that the item will be shown in the action bar if there is room left for it. Alternatively the value can be set to never or always.

Inflate a menu resource 

 Now we need to inflate the menu resource that we've just created by adding the following method to the activity class:
123456

@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;



}
view rawMainActivity.java hosted with ❤ by GitHub



Handle clicks on action items

In the example application the value of  TextView and an ImageView of a main layout will be changed when one of the action button is clicked, so first we need to modify application layout file like this:
activity_main.xml file:
12345678910111213141516171819202122232425262728293031

<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"



android:paddingBottom="@dimen/activity_vertical_margin"



android:paddingLeft="@dimen/activity_horizontal_margin"



android:paddingRight="@dimen/activity_horizontal_margin"



android:paddingTop="@dimen/activity_vertical_margin"



tools:context=".MainActivity" >











<TextView 



android:id="@+id/our_text"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:layout_centerInParent="true"/>



<TextView



android:id="@+id/founded_by"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:text="@string/founder" 



android:layout_above="@id/our_text"



android:layout_centerHorizontal="true"/>



<ImageView 



android:layout_centerHorizontal="true"



android:id="@+id/our_image"



android:layout_width="64dp"



android:layout_height="64dp"



android:layout_above="@id/founded_by"/>







</RelativeLayout>
view rawactivity_main.xml hosted with ❤ by GitHub

The last step is to handle clicks on action items. When the user presses an action button, system callsonOptionItemSelected() method, which we now will add to the activity file:
123456789101112131415161718192021222324

@Override



public boolean onOptionsItemSelected(MenuItem item) {



// Handle presses on the action bar items



switch (item.getItemId()) {



case R.id.about_facebook:



image.setImageResource(R.drawable.facebook);



text.setText("Mark Zuckerberg");



return true;



case R.id.about_reddit:



image.setImageResource(R.drawable.reddit);



text.setText("Alexis Ohanian and Steve Huffman");



return true;



case R.id.about_twitter:



image.setImageResource(R.drawable.twitter);



text.setText("Evan Williams, Noah Glass, Jack Dorsey and Biz Stone");



return true;



case R.id.about_youtube:



text.setText("Chad Hurley, Steve Chen and Jawed Karim");



image.setImageResource(R.drawable.youtube);



return true;



default:



return super.onOptionsItemSelected(item);



}



}
view rawMainActivity.java hosted with ❤ by GitHub
Each action has its on unique ID provided by the item tag's id attribute (in the menu.xml file). This way by calling getItemId() we can identify every action.

Full Activity Code
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

package com.example.actionbartutorial;







import android.app.Activity;



import android.os.Bundle;



import android.view.Menu;



import android.view.MenuItem;



import android.widget.ImageView;



import android.widget.TextView;







public class MainActivity extends Activity {







public ImageView image;



public TextView text;







@Override



protected void onCreate(Bundle savedInstanceState) {



super.onCreate(savedInstanceState);



setContentView(R.layout.activity_main);







image = (ImageView) findViewById(R.id.our_image);



text = (TextView) findViewById(R.id.our_text);



}







@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 presses on the action bar items



switch (item.getItemId()) {



case R.id.about_facebook:



image.setImageResource(R.drawable.facebook);



text.setText("Mark Zuckerberg");



return true;



case R.id.about_reddit:



image.setImageResource(R.drawable.reddit);



text.setText("Alexis Ohanian and Steve Huffman");



return true;



case R.id.about_twitter:



image.setImageResource(R.drawable.twitter);



text.setText("Evan Williams, Noah Glass, Jack Dorsey and Biz Stone");



return true;



case R.id.about_youtube:



text.setText("Chad Hurley, Steve Chen and Jawed Karim");



image.setImageResource(R.drawable.youtube);



return true;



default:



return super.onOptionsItemSelected(item);



}



}







}
view rawMainActivity.java hosted with ❤ by GitHub


Demo
Android ActionBar Example
Android Action Bar Example
Source Code

0 comments:

Subscribe to: Post Comments (Atom)