1

I have a translation app that helps people to learn a language and play games to check their learning. The app already has a navigation drawer but it appears under the action bar with items.

I want to change the navigation drawer to make it appear over the action bar. Very much preferred that the navigation drawer has a google play store style header.

I have tried many solutions but I am not able to get it done. Here are some examples :

[1]Android Navigation Drawer on top ActionBar 1st and 2nd solutions have been tried.

[2]https://www.youtube.com/watch?v=HDYPgS0BM8c&feature=youtu.be Have stopped after changing styles.xml as the action bar does not disappear or errors appear. - Is it possible that I also have to change color.xml

Community
  • 1
  • 1

1 Answers1

4

I would use the new Toolbar instead of ActionBar. Checkout this tutorial: http://www.android4devs.com/2014/12/how-to-make-material-design-navigation-drawer.html

The important part is that you have to put the toolbar inside the DrawerLayout as seen here (activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/DrawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:elevation="7dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include
            android:id="@+id/tool_bar"
            layout="@layout/tool_bar">
        </include>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World" />

    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"

        android:background="#ffffff"
        android:scrollbars="vertical">

    </android.support.v7.widget.RecyclerView>

</android.support.v4.widget.DrawerLayout>

toolbar.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/ColorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:elevation="4dp"
    android:paddingTop="@dimen/tool_bar_top_padding">
</android.support.v7.widget.Toolbar>

To use the toolbar:

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
JoeyCK
  • 1,384
  • 4
  • 19
  • 29
  • I don't exactly understand what you mean. Please explain more clearly on how to make change to my app. Thank you. –  Jun 23 '15 at 09:21
  • There's a new, more flexible component called Toolbar which is meant to replace ActionBar and will let you do what you want. It works with the AppCompat library. You can find more information here: http://android-developers.blogspot.com.es/2014/10/appcompat-v21-material-design-for-pre.html – JoeyCK Jun 23 '15 at 09:29