Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add "menu" indicator next to Action Bar's app icon?

Tags:

At least Gmail and Youtube Android apps use a side menu (navigation drawer?) that opens by swiping, or by clicking the app icon (home button):

enter image description here

Is the menu indicator / icon in the screenshot above a ready-made part of Android SDK? (Or a custom icon Google uses in their apps?) In any case, what's the easiest way to get your home button to look like that, i.e., like it opens a menu?

(targetSdkVersion 18; minSdkVersion 14)

Resolution

Finally got it working. What was missing for me was 1) the actual icon and 2) deferred call to syncState() on the ActionBarDrawerToggle.

like image 298
Jonik Avatar asked Nov 01 '13 10:11

Jonik


People also ask

How do I add settings to action bar?

First, create a menu resource, name it whatever you want. The item tag defines the id, the icon and the title. the showAsAction defines if item is located at the action bar or submenu. It's recommended to use string resources for your title, specially if you want to translate your app.

What are action bar icons?

The ActionBar, now known as the App Bar, is a consistent navigation element that is standard throughout modern Android applications. The ActionBar can consist of: An application icon. An "upward" navigation to logical parent.


2 Answers

To create similar implementation / look in your application you should use ActionBarDrawerToggle and set your custom icon as indicator next to ActionBar home button. For example :

import android.app.ActionBar; import android.support.v4.app.ActionBarDrawerToggle; import android.support.v4.widget.DrawerLayout;  private void setUpDrawerToggle(){     ActionBar actionBar = getActionBar();     actionBar.setDisplayHomeAsUpEnabled(true);     actionBar.setHomeButtonEnabled(true);      // ActionBarDrawerToggle ties together the the proper interactions     // between the navigation drawer and the action bar app icon.     mDrawerToggle = new ActionBarDrawerToggle(             this,                             /* host Activity */             mDrawerLayout,                    /* DrawerLayout object */             R.drawable.ic_drawer,             /* nav drawer image to replace 'Up' caret */             R.string.navigation_drawer_open,  /* "open drawer" description for accessibility */             R.string.navigation_drawer_close  /* "close drawer" description for accessibility */     ) {         @Override         public void onDrawerClosed(View drawerView) {             invalidateOptionsMenu(); // calls onPrepareOptionsMenu()         }          @Override         public void onDrawerOpened(View drawerView) {             invalidateOptionsMenu(); // calls onPrepareOptionsMenu()         }     };      // Defer code dependent on restoration of previous instance state.     // NB: required for the drawer indicator to show up!     mDrawerLayout.post(new Runnable() {         @Override         public void run() {             mDrawerToggle.syncState();         }     });      mDrawerLayout.setDrawerListener(mDrawerToggle); } 

Where R.drawable.ic_drawer is actually the icon to use as indicator. You can find it in Android Asset Studio; see Navigation Drawer Indicator.

References

  1. ActionBarDrawerToggle
  2. Creating a Navigation Drawer
like image 96
hardartcore Avatar answered Oct 12 '22 00:10

hardartcore


Android-Developer and HpTerm helped me in the right rirection, by

  1. Pointing out this is indeed NavigationDrawer specific (which I was already using as in Google's example)
  2. Telling where to find the ic_drawer.png icon (→ Android Asset Studio)

Now, unfortunately, creating ActionBarDrawerToggle like below seems not to be enough. At least on my Nexus 7 (API 18) test device.

drawerToggle = new ActionBarDrawerToggle(this,                         drawerLayout,                         R.drawable.ic_navigation_drawer,                         R.string.side_menu_open,                         R.string.side_menu_closed) {     // ... }; 

Partial solution (API level 18+)

I found one way to make the indicator show up though: setHomeAsUpIndicator(). The downside: that method was added in API level 18.

@Override protected void onCreate(Bundle savedInstanceState) {     // ...     getActionBar().setDisplayHomeAsUpEnabled(true); // also required     if (Build.VERSION.SDK_INT >= 18) {         getActionBar().setHomeAsUpIndicator(             getResources().getDrawable(R.drawable.ic_navigation_drawer));     } } 

So now the question remains: how to make this work (in my case) for API levels 14 through 17?

I verified on a 4.1.2 (API 16) device that the ic_drawer icon does not show up. With setDisplayHomeAsUpEnabled(true) I get the normal "home" icon (small arrow pointing left) and without it, the space left to my app icon remains blank.

Final solution

Got it working using the edited version of Android-Developer's answer.

Quite curiously, what was missing from my ActionBarDrawerToggle initialisation code was this:

   // Defer code dependent on restoration of previous instance state.    drawerLayout.post(new Runnable() {         @Override         public void run() {             mDrawerToggle.syncState();         }     }); 

With that included, calling setHomeAsUpIndicator() is not needed.

like image 20
Jonik Avatar answered Oct 12 '22 00:10

Jonik