(http://www.sitepoint.

com)

MENU

Mobile(http://www.sitepoint.com/mobile/)

BetterUserInterfaceswiththeAndroidActionBar

(http://www.sitepoint.com/author/jechessa/)
JoyceEchessa(http://www.sitepoint.com/author/jechessa/)

PublishedApril2,2014

Tweet(Https://Twitter.Com/Share?Text=Better+User+Interfaces+With+The+Android+Action+Bar&Via=Sitepointdotcom)
Subscribe(Https://Confirmsubscription.Com/H/Y/1FD5B523FA48AA2B)

Theactionbarisanimportantdesignelement,usuallyatthetopofeachscreeninanapp,thatprovidesaconsistentfamiliarlookbetween
Androidapps.Itisusedtoprovidebetteruserinteractionandexperiencebysupportingeasynavigationthroughtabsanddropdownlists.It
alsoprovidesaspacefortheapporactivitysidentity,thusenablingtheusertoknowtheirlocationintheapp,andeasyaccesstothe
actionsthatcanbeperformed.
TheactionbarwasintroducedinAndroid3.0,althoughsupportforolderversionscanbeachievedbyusingtheAndroidSupportLibrary
(http://developer.android.com/tools/supportlibrary/index.html).Beforeitsrelease,theOptionsMenuwasusuallyusedtoprovidetheactions
andfunctionalitythatarenowputontheactionbar.Theactionbarisincludedbydefaultinallactivitiesforappswitha minSdkVersion of
11.Youcandisableitandopttoonlyusetheoptionsmenu,butforbetteruserexperiencesitsbettertousetheactionbarasitisvisibleto
theuser,whiletheoptionsmenuneedstheusertorequestitandtheusermightnotbeawareofitsexistenceinthefirstplace.
Thistutorialexploressettinguptheactionbaranddiscussesthedifferentconfigurationsthatitoffers.

SettinguptheActionBar
Tostartoff,wearegoingtocreateanewproject.WewontbeusingtheAndroidSupportLibrary,somakesuretoselectaminimumSDK
versionof11orabove.Whenyourunyourproject,theactionbarwillbeincludedatthetopofyourappsscreen.Itisincludedinallactivities
thatuseorinheritfromtheTheme.Holo(http://developer.android.com/reference/android/R.style.html#Theme_Holo)themewhichisthe
defaultwhenthe minSdkVersion issetto11orgreater.Atypicalactionbarisshowninthefollowingfigure.

Theactionbarconsistsof:
AppiconThisisusedtoidentifyyourappwithalogooricon.
ViewcontrolThiscanalsobeusedtoidentifytheapporthespecificactivitytheuserisonbythetitle.Ifyourapphasdifferentviews,it
canalsobeusedtodisplaytheseandallowforeasyswitchingbetweenviews.
ActionbuttonsTheseareusedtodisplaythemostimportantand/oroftenusedactions.Ifthereisntenoughspacetoshowallofthe
actionbuttons,thosethatdontfitareautomaticallymovedtotheactionoverflow.
ActionoverflowThisisusedforthelesserusedactions.

AddingActionstotheActionBar

Toaddactionstotheactionbar,createaXMLfileinthe res/menu directorywhereyouwilldefineeachaction.Itispossibletodefinethe

actionsinJavacode,butyouwillwritelesscodeifyouuseXML.Thecontentsof res/menu/main_activity_bar.xml areshownbelow.In
thisexample,wereusingtheActionBarIconPack(http://developer.android.com/design/downloads/index.html#actionbariconpack)forthe
actionicons.Downloaditandcopythenecessaryiconstothe res/drawablexxxx directoryforthedifferentscreendensities.

<menuxmlns:android="http://schemas.android.com/apk/res/android(http://schemas.android.com/apk/res/android)">

<itemandroid:id="@+id/action_search"

android:icon="@drawable/ic_action_search"

android:title="@string/action_search"

android:showAsAction="ifRoom"/>

<itemandroid:id="@+id/action_record"

android:icon="@drawable/ic_action_video"

android:title="@string/action_record"

android:showAsAction="ifRoom"/>

10

<itemandroid:id="@+id/action_save"

11

android:icon="@drawable/ic_action_save"

12

android:title="@string/action_save"

13

android:showAsAction="ifRoom"/>

14

<itemandroid:id="@+id/action_label"

15

android:icon="@drawable/ic_action_new_label"

16

android:title="@string/action_label"

17

android:showAsAction="ifRoom"/>

18

<itemandroid:id="@+id/action_play"

19

android:icon="@drawable/ic_action_play"

20

android:title="@string/action_play"

21

android:showAsAction="ifRoom"/>

22

<itemandroid:id="@+id/action_settings"

23

android:title="@string/action_settings"

24

android:showAsAction="never"/>

25

</menu>

Next,addthestringliteralsto res/values/strings.xml ,asshownbelow.

<?xmlversion="1.0"encoding="utf8"?>

<resources>

<stringname="app_name">ActionBar</string>

<stringname="action_settings">Settings</string>

<stringname="action_search">Search</string>

<stringname="action_record">RecordVideo</string>

<stringname="action_save">Save</string>

<stringname="action_label">AddLabel</string>

<stringname="action_play">PlayVideo</string>

10

<stringname="hello_world">Helloworld!</string>

11

</resources>

The icon attributetakesaresourceIDforanimagewhichwillappearontheactionbarwithorwithoutthe title .Todisplaytheaction

title add withText to showAsAction .Forexampleyoucoulduse android:showAsAction="ifRoom|withText" toindicatethatif

thereisroomonthebarfortheactionbuttonandtext,theyshouldbothbeshown.Toforceanactiontoalwaysbedisplayed,use always
on showAsAction .However,thisisnotadvisableasitmightcauseundesirablelayouteffectsonsmallerscreens.Ifyoumust,limitittoone
ortwoitems.
Youshouldalwaysdefinethe title attribute,evenifyoudontwanttodisplayboththeiconandtitle,forthefollowingreasons:
Thetitlewillbeusedintheoverflowifthereisntenoughspaceontheactionbarfortheactionitem.
Itmightnotbeobvioustotheuserwhattheactionitemdoesjustfromitsiconaloneandsoprovidingatitleenablesthemtolongpressit
torevealatooltipthatdisplaysthetitle.
Thetitleprovidesaccessibilityforsightimpairedusers,asthescreenreadercanreadthemenuitemstitle.

Next,weneedtoimplementthe onCreateOptionsMenu() callbackmethodinouractivity.Thisinflatesthemenuresourceintothegiven

Menu objectforuseintheactionbar.Thecodeforthisfunctionisshownbelow.

@Override

publicbooleanonCreateOptionsMenu(Menumenu){

MenuInflaterinflater=getMenuInflater();

inflater.inflate(R.menu.main_activity_bar,menu);

returnsuper.onCreateOptionsMenu(menu);

Runtheprojectandyoushouldseesomethingsimilartothefollowingfigure.Someactionbuttonsappearontheactionbarwhiletherest
canbeseenontheexpandedactionoverflow.Onchangingtolandscapeview,theactionbarautomaticallyadaptstothenewwidthand
displaysmoreactionsaccordingtotheguidelinesgivenintheXMLfile.

SplittingtheActionBar
Sincetheactionitemssharetheactionbarrealestatewiththeappiconandtitle,youmightwanttosplittheactionbarsothattheaction
itemsappearatthebottomofthescreen.Thiswillgivethemmorespace,andthusmoreitemswillbevisibletotheuser.Ifthereisenough
space,forexampleonlargerscreensorinlandscapemode,theactionbarwillnotbesplit.

Tosplittheactionbar,add android:uiOptions="splitActionBarWhenNarrow" toeachactivityinyourmanifestfilethatyouwanttohavea

splitactionbar.ThisonlysupportsAPIlevel14andabove.Toaddsupportforlowerlevelsusethefollowing metadata element.

<activity

android:name="com.example.actionbar.MainActivity"

android:label="@string/app_name"

android:uiOptions="splitActionBarWhenNarrow">

<metadataandroid:name="android.support.UI_OPTIONS"

android:value="splitActionBarWhenNarrow"/>

<intentfilter>

<actionandroid:name="android.intent.action.MAIN"/>

10

<categoryandroid:name="android.intent.category.LAUNCHER"/>

11

</intentfilter>

12

</activity>

HidingtheActionBar
Youmightnotwanttohavetheactionbarvisibleatalltimestotheuser.AcommonexampletothisistheGalleryappwhichhidestheaction
barwhentheuserislookingatanimageandshowstheactionbarwhentheytouchtheimage.Totoggleactionbarvisibilityontouch,add
thefollowingtoyouractivityfile.

@Override

publicbooleanonTouchEvent(MotionEventevent){

if(event.getAction()==MotionEvent.ACTION_DOWN){

toggleActionBar();

returntrue;

privatevoidtoggleActionBar(){

10

ActionBaractionBar=getActionBar();

11

12

if(actionBar!=null){

13

if(actionBar.isShowing()){

14

actionBar.hide();

15

16

else{

17

actionBar.show();

18

19

20

Onrunningtheapplication,youwillbeabletoshow/hidetheactionbarbytappingthescreen.Youwillnoticethatthecontentonthescreen
changespositionwitheachshow/hide.Thisisbecausewhenyouhide/showtheactionbar,theactivityresizes,affectingthecontentssize
andposition.Topreventthis,youshouldinsteadoverlaytheactionbarasdescribednext.

OverlayingtheActionBar
Overlayingtheactionbarprovidesabetterhide/showexperiencesincetheactivitydoesntresizeoneachhide/show,allowingyourcontent
tostayput.Youcanenableoverlayingbysetting android:windowActionBarOverlay to true inyourthemefile.Youshouldbeusingthe
Theme.Holo(http://developer.android.com/reference/android/R.style.html#Theme_Holo)theme(oroneofitsdescendants).Ifyour
minSdkVersion wassetto11,thisshouldbethecase.

In res/values/styles.xml ,addthefollowing:

<resources>

<stylename="AppBaseTheme"parent="android:Theme.Light">

</style>

<!Applicationtheme.>

<stylename="AppTheme"parent="AppBaseTheme">

<itemname="android:windowActionBarOverlay">true</item>

</style>

</resources>

Runtheapplication,andnoticethatthecontentonthescreendoesntchangepositionwhentheactionbarishiddenandrevealed.

AddingtheUpNavigation
Allscreensinyourappthatarenotthemainentrancetoyourapp(thehomescreen)shouldoffertheuserawaytonavigatetothelogical
parentscreenintheappshierarchybypressingtheUpbuttonintheactionbar.StartinginAPIlevel14,youcandeclarethelogicalparent
ofeachactivitybyspecifyingthe android:parentActivityName attributeinthe activity elementinthemanifestfile.Tosupportlower
versions,includetheSupportLibraryandspecifytheparentactivityasthevaluefor android.support.PARENT_ACTIVITY ,matchingthe
android:parentActivityName attribute.

Welladdanotheractivitytodemonstratethis.Addanotheractivityfilecalled SecondActivity ,asshowninthefollowingcodelisting.We

call setDisplayHomeAsUpEnabled() toallowUpnavigationwiththeappiconintheactionbar.Thiswilladdaleftfacingcaretalongside
theappicon.Whenitispressed,theactivityreceivesacallto onOptionsItemSelected() .

packagecom.example.actionbar;

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.support.v4.app.NavUtils;

importandroid.view.Menu;

importandroid.view.MenuInflater;

importandroid.view.MenuItem;

10

publicclassSecondActivityextendsActivity{

11

12

@Override

13

protectedvoidonCreate(BundlesavedInstanceState){

14

super.onCreate(savedInstanceState);

15

setContentView(R.layout.second_activity);

16

getActionBar().setDisplayHomeAsUpEnabled(true);

17

18

19

@Override

20

publicbooleanonCreateOptionsMenu(Menumenu){

21

//Inflatethemenuitemsforuseintheactionbar

22

MenuInflaterinflater=getMenuInflater();

23

24

inflater.inflate(R.menu.second_activity_bar,menu);

25

returnsuper.onCreateOptionsMenu(menu);

26

27

28

@Override

29

publicbooleanonOptionsItemSelected(MenuItemitem){

30

switch(item.getItemId()){

31

//Respondtotheactionbar'sUp/Homebutton

32

caseandroid.R.id.home:

33

NavUtils.navigateUpFromSameTask(this);

34

returntrue;

35

36

37

returnsuper.onOptionsItemSelected(item);

38

39

In res/layout/second_activity.xml ,addthefollowing:

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android(http://schemas.android.com/apk/res/android)"

android:id="@+id/RelativeLayout1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical">

<TextView

android:id="@+id/TextView1"

android:layout_width="wrap_content"

10

android:layout_height="wrap_content"

11

android:layout_centerHorizontal="true"

12

android:layout_centerVertical="true"

13

android:text="@string/hello_world_again"/>

14

</RelativeLayout>

Next,addthefollowingstringsto res/values.strings.xml .

<stringname="hello_world_again">Helloworld,again!</string>

<stringname="second">GoToSecondActivity</string>

<stringname="second_activity_title">SecondActivity</string>

Then,createaresourcefileforthesecondactivitysactionbar.Namethisfile res/menu/second_activity_bar.xml ,andaddthefollowing

XML.

<menuxmlns:android="http://schemas.android.com/apk/res/android(http://schemas.android.com/apk/res/android)">

<item

android:id="@+id/action_settings"

android:orderInCategory="100"

android:showAsAction="never"

android:title="@string/action_settings"/>

</menu>

Next,addtheactivitytothemanifestfile:

<application>

...

<activity

android:name="com.example.actionbar.SecondActivity"

android:label="@string/second_activity_title"

android:parentActivityName="com.example.actionbar.MainActivity">

<metadata

android:name="android.support.PARENT_ACTIVITY"

android:value="com.example.actionbar.MainActivity"/>

10

</activity>

11

...

12

</application>

Then,addabuttontothemainactivityin res/layout/activity_main.xml :

<Button

android:id="@+id/second"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/TextView1"

android:layout_centerVertical="true"

android:onClick="openSecondActivity"

android:text="@string/second"/>

Also,addthe onClick handlerin MainActivity.java .Thisfunction,shownbelow,willstartthesecondactivitywhenthebuttonis

clicked.

publicvoidopenSecondActivity(Viewview){

Intentintent=newIntent(this,SecondActivity.class);

startActivity(intent);

Runtheapplication.Therewillbeabuttononthefirstscreenthat,whenpressed,bringsupasecondscreenwiththeactionbarshown
below.Noticethecaretthatnavigatestotheparentactivitywhenclicked.

ActionBarInteractivity
Sofarwehavecreatedactionitemsthatdonothingwhenclickedon.Nextwellseehowtoaddsomeinteractivitytotheactionbar.

HandlingClicksonActionItems
Whenanactionisclicked,theactivitys onOptionsItemSelected() methodiscalled.Theactioncanbeidentifiedbycalling
getItemId() .Addthe onOptionsItemSelected() methodto MainActivity.java ,asshowninthefollowingexample.Hereweare

displayingadifferentmessagewheneachactionisclickedon.

@Override

publicbooleanonOptionsItemSelected(MenuItemitem){

//Handlepressesontheactionbaritems

switch(item.getItemId()){

caseR.id.action_search:

//Codeyouwantrunwhenactivityisclicked

Toast.makeText(this,"Searchclicked",Toast.LENGTH_SHORT).show();

returntrue;

caseR.id.action_record:

10

Toast.makeText(this,"Recordclicked",Toast.LENGTH_SHORT).show();

11

returntrue;

12

caseR.id.action_save:

13

Toast.makeText(this,"Saveclicked",Toast.LENGTH_SHORT).show();

14

returntrue;

15

caseR.id.action_label:

16

Toast.makeText(this,"Labelclicked",Toast.LENGTH_SHORT).show();

17

returntrue;

18

caseR.id.action_play:

19

Toast.makeText(this,"Playclicked",Toast.LENGTH_SHORT).show();

20

returntrue;

21

caseR.id.action_settings:

22

Toast.makeText(this,"Settingsclicked",Toast.LENGTH_SHORT).show();

23

returntrue;

24

default:

25

returnsuper.onOptionsItemSelected(item);

26

27

ActionViews
Actionviewsareinteractivewidgetsthatappearwithintheactionbarasasubstituteforactionbuttons.TheyallowoccasionallyusedUI
itemstobeplacedontheactionbar,thusavoidingunnecessaryconsumptionofscreenspaceandswitchingofactivitiestousethem.

Todeclareanactionview,useeitherthe actionLayout or actionViewClass attributetospecifyeitheralayoutresourceorwidgetclass

touse,respectively.Asaquickexample,toadda SearchView widgettoourexample,modifythesearchactionin
res/menu/main_activity_bar.xml asfollows.

<itemandroid:id="@+id/action_search"

android:icon="@drawable/ic_action_search"

android:title="@string/action_search"

android:showAsAction="ifRoom|collapseActionView"

android:actionViewClass="android.widget.SearchView"/>

Onrunningtheapplication,anedittextviewwillappearwhenthesearchactionisclickedon.

Wewilladdourowncustomviewtotheactionbar.Createalayoutfilenamed res/layout/my_action.xml .Thiswillbethecustomviews

layoutresource.

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android(http://schemas.android.com/apk/res/android)"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:id="@+id/myActionTextView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="Typehere:"

10

android:gravity="right"/>

11

<EditText

12

android:id="@+id/myActionEditText"

13

android:layout_width="fill_parent"

14

android:layout_height="wrap_content"

15

android:layout_weight="1"

16

android:gravity="left"/>

17

</LinearLayout>

Then,addtheactionitemto res/menu/main_activity_bar.xml ,asshownbelow.

<itemandroid:id="@+id/my_action"

android:icon="@drawable/ic_action_edit"

android:title="MyAction"

android:showAsAction="ifRoom|collapseActionView"

android:actionLayout="@layout/my_action"/>

Thiswillusethelayoutweaddedabove. collapseActionView collapsestheactionviewsothatonlytheiconshowsontheactionbarand

whenclickedon,itexpandstorevealanedittextview.ClickingontheUpcaretexitsfromtheactionview.

Next,updatedthemainactivityfile, MainActivity.java ,asshownbelow.Takenoteofthecommentsthroughoutthecode.

packagecom.example.actionbar;

importandroid.os.Bundle;

importandroid.app.ActionBar;

importandroid.app.Activity;

importandroid.content.Intent;

importandroid.support.v4.view.MenuItemCompat;

importandroid.support.v4.view.MenuItemCompat.OnActionExpandListener;

importandroid.view.KeyEvent;

10

importandroid.view.Menu;

11

importandroid.view.MenuInflater;

12

importandroid.view.MenuItem;

13

importandroid.view.MotionEvent;

14

importandroid.view.View;

15

importandroid.widget.EditText;

16

importandroid.widget.TextView;

17

importandroid.widget.Toast;

18

19

publicclassMainActivityextendsActivityimplementsTextView.OnEditorActionListener{

20

21

privateMenuItemmyActionMenuItem;

22

privateEditTextmyActionEditText;

23

24

@Override

25

protectedvoidonCreate(BundlesavedInstanceState){

26

super.onCreate(savedInstanceState);

27

setContentView(R.layout.activity_main);

28

29

30

@Override

31

publicbooleanonCreateOptionsMenu(Menumenu){

32

//Inflatethemenuitemsforuseintheactionbar

33

MenuInflaterinflater=getMenuInflater();

34

inflater.inflate(R.menu.main_activity_bar,menu);

35

36

//Herewegettheactionviewwedefined

37

myActionMenuItem=menu.findItem(R.id.my_action);

38

ViewactionView=myActionMenuItem.getActionView();

39

40

//Wethengettheedittextviewthatispartoftheactionview

41

if(actionView!=null){

42

myActionEditText=(EditText)actionView.findViewById(R.id.myActionEditText);

43

44

if(myActionEditText!=null){

45

//Wesetalistenerthatwillbecalledwhenthereturn/enterkeyispressed

46

myActionEditText.setOnEditorActionListener(this);

47

48

49

50

//ForsupportofAPIlevel14andbelow,weuseMenuItemCompat

51

MenuItemCompat.setOnActionExpandListener(myActionMenuItem,newOnActionExpandListener(){

52

@Override

53

publicbooleanonMenuItemActionCollapse(MenuItemitem){

54

//Dosomethingwhencollapsed

55

returntrue;//Returntruetocollapseactionview

56

57

58

@Override

59

publicbooleanonMenuItemActionExpand(MenuItemitem){

60

//Dosomethingwhenexpanded

61

if(myActionEditText!=null){

62

myActionEditText.setText("");

63

64

65

returntrue;//Returntruetoexpandactionview

66

67

});

68

69

returnsuper.onCreateOptionsMenu(menu);

70

71

72

@Override

73

publicbooleanonTouchEvent(MotionEventevent){

74

if(event.getAction()==MotionEvent.ACTION_DOWN){

75

toggleActionBar();

76

77

78

returntrue;

79

80

81

privatevoidtoggleActionBar(){

82

ActionBaractionBar=getActionBar();

83

84

if(actionBar!=null){

85

if(actionBar.isShowing()){

86

actionBar.hide();

87

88

else{

89

actionBar.show();

90

91

92

93

94

publicvoidopenSecondActivity(Viewview){

95

Intentintent=newIntent(this,SecondActivity.class);

96

startActivity(intent);

97

98

99

@Override

100

publicbooleanonOptionsItemSelected(MenuItemitem){

101

//Handlepressesontheactionbaritems

102

switch(item.getItemId()){

103

caseR.id.action_search:

104

//Codeyouwantrunwhenactivityisclicked

105

Toast.makeText(this,"Searchclicked",Toast.LENGTH_SHORT).show();

106

returntrue;

107

caseR.id.action_record:

108

Toast.makeText(this,"Recordclicked",Toast.LENGTH_SHORT).show();

109

returntrue;

110

caseR.id.action_save:

111

Toast.makeText(this,"Saveclicked",Toast.LENGTH_SHORT).show();

112

returntrue;

113

caseR.id.action_label:

114

Toast.makeText(this,"Labelclicked",Toast.LENGTH_SHORT).show();

115

returntrue;

116

caseR.id.action_play:

117

Toast.makeText(this,"Playclicked",Toast.LENGTH_SHORT).show();

118

returntrue;

119

caseR.id.action_settings:

120

Toast.makeText(this,"Settingsclicked",Toast.LENGTH_SHORT).show();

121

returntrue;

122

default:

123

returnsuper.onOptionsItemSelected(item);

124

125

126

127

@Override

128

publicbooleanonEditorAction(TextViewtextView,inti,KeyEventkeyEvent){

129

if(keyEvent!=null){

130

//Whenthereturnkeyispressed,wegetthetexttheuserentered,displayitandcollapsetheview

131

if(keyEvent.getAction()==KeyEvent.ACTION_DOWN&&keyEvent.getKeyCode()==KeyEvent.KEYCODE_ENTER){

132

CharSequencetextInput=textView.getText();

133

//Dosomethingusefulwiththetext

134

Toast.makeText(this,textInput,Toast.LENGTH_SHORT).show();

135

MenuItemCompat.collapseActionView(myActionMenuItem);

136

137

138

returnfalse;

139

140

Inthiscode,wegettheedittextviewinouractionviewlayout myActionEditText andsetalisteneronit.Wewantanoperationtobe

madewhentheusertypesinsometextandpressesreturn.Bydefault,whentheuserpressesReturn,thecursorgoestoanewline.We
wanttoinsteadcollapsetheactionviewandgettheusersinput.Thisisdonebythe onEditorAction methodwhichchecksonthetypeof
keyeventontheedittextview.IfitisEnter,thetextinputiscapturedanddisplayed.Then,theactionviewiscollapsed.
Wesetalistenerontheactionviewwith MenuItemCompat.setOnActionExpandListener toknowwhentheviewexpandsandcollapses.
MenuItemCompat isusedtosupportolderAPIversions.

Bydefault,whentheuserenterstextandleavestheactionview,onexpandingitagain,theprevioustextisstillvisible.Weuse
onMenuItemActionExpand() toremoveanytextbeforetheactionviewexpandssothattheedittextviewwillbeblank.

Conclusion
Theactionbarisanimportantdesignelementanditcanbeusedtogreatlyimproveanappsuserexperience.Wehavelookedatsome
configurationsyoucanuseontheactionbarforyourappsUI,buttherearemoreoutthere.Formoreinformation,checkoutthe
documentation(http://developer.android.com/guide/topics/ui/actionbar.html).Youcanseethecode(https://github.com/sitepoint
examples/androidactionbar)usedinthisarticleonGitHub.

(http://www.sitepoint.com/author/jechessa/)

JoyceEchessa(http://www.sitepoint.com/author/jechessa/)
Iamawebdeveloperwhodabblesinmobiledevelopmentfromtimetotime.YoucanfindmeonTwitter@joyceechessa
(https://twitter.com/joyceechessa)orvisitmywebsite(http://www.echessa.com/)toseewhatImupto.

(https://twitter.com/joyceechessa) (https://github.com/echessa)
(https://plus.google.com/u/0/+JoyceEchessa)
Youmightalsolike:

Treasure!FreeMobileDesignResources(http://www.sitepoint.com/freemobiledesign
resources/)

Course:ResponsiveWebDesign:KeyConcepts
(https://learnable.com/courses/responsivewebdesignkeyconcepts2759?
utm_source=sitepoint&utm_medium=relateditems&utm_content=rwdkeyconcepts)

12AndroidTutorialsforBeginners(http://www.sitepoint.com/12androidtutorials
beginners/)

NoReadercomments

About
Aboutus(/aboutus/)
Advertise(/advertising)
PressRoom(/press)
Legals(/legals)
Feedback(mailto:feedback@sitepoint.com)
WriteforUs(/writeforus)

OurSites
Learnable(https://learnable.com)
Reference(http://reference.sitepoint.com)
WebFoundations(/webfoundations/)

Connect

(/feed)(/newsletter)(https://www.facebook.com/sitepoint)
(http://twitter.com/sitepointdotcom)(https://plus.google.com/+sitepoint)
20002015SitePointPty.Ltd.