Custom Drawer Layout for Slide Over Action Bar

Question

My requirement is i need the functionality of Navigation Drawer (Navigation Menu should appear both by clicking on the toggle icon and also dragging from margin) + Drawer layout on top of the action bar.

Check this post, i want the similar action.

I had gone through many post regarding this in SO itself, most of them saying to use a third-party library to use to get this done. But i don't want to use, instead in One SO question CommonsWare said like this can be done by tweaking the Drawerlayout.

How to achieve this?

Note: I don't want to use external library as it was creating problems.

Answer 1

In Android Default you cannot move the DrawerLayout along with the Action Bar. However if your are keen on using the Default Navigation Drawer. Hide the Action bar and create a Top layout similar to action bar. It will move with the drawerLayout. If you want further help code wise let me know.

Find my updated answer

MainActivity.java

package com.example.android.navigationdrawerexample;

import android.annotation.SuppressLint;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.widget.DrawerLayout;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class MainActivity extends FragmentActivity {

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle drawerToggle;
    ImageView menubtn, addbtn;
    LinearLayout menuLayout;
    RelativeLayout frame;
    TranslateAnimation anim;
    float moveFactor, lastTranslate = 0.0f;
    ListView accList;
    String[] menuValues = { "Add", "View" };

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

        if (savedInstanceState == null) {
            getSupportFragmentManager().beginTransaction()
                    .replace(R.id.container, new PlaceholderFragment())
                    .commit();
        }

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        menuLayout = (LinearLayout) findViewById(R.id.menu);
        accList = (ListView) findViewById(R.id.drawer_list);
        frame = (RelativeLayout) findViewById(R.id.rl_main);
        menubtn = (ImageView) findViewById(R.id.menu_btn);
        addbtn = (ImageView) findViewById(R.id.add_btn);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, menuValues);

        accList.setAdapter(adapter);

        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout,
                R.drawable.ic_drawer, R.string.open, R.string.close) {

            public void onDrawerClosed(View view) {

            }

            public void onDrawerOpened(View drawerview) {
                // adapter = new AccountAdapter(this, R.layout.row_acc, values);

            }

            @SuppressLint("NewApi")
            public void onDrawerSlide(View drawerView, float slideOffset) {

                // use this code only if you need the fragment to slide over, if you want the 
                // drawerlayout to be above the main screen then ignore this code. 

                //moveFactor = (menuLayout.getWidth() * slideOffset);
                //drawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
                //      Gravity.LEFT);

                //if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                //  frame.setTranslationX(moveFactor);
                //} else {
                //  anim = new TranslateAnimation(lastTranslate, moveFactor,
                //          0.0f, 0.0f);
                //  anim.setDuration(0);
                //  anim.setFillAfter(true);
                //  frame.startAnimation(anim);

                //  lastTranslate = moveFactor;
                //}
            }
        };

        drawerLayout.setDrawerListener(drawerToggle);

        menubtn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (drawerLayout.isDrawerVisible(Gravity.LEFT)) {
                    return;
                } else {
                    drawerLayout.openDrawer(Gravity.LEFT);
                }
            }
        });

        accList.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                if (position == 0) {
                    // Write your code
                    drawerLayout.closeDrawers();
                }
            }
        });

        addbtn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                Toast.makeText(MainActivity.this, "Action Bar Icon code as per your requirement", Toast.LENGTH_LONG).show();
            }
        });

    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_planet, container,
                    false);

            return rootView;
        }

    }

}

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:id="@+id/rl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <RelativeLayout
            android:id="@+id/top_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp" >

            <ImageView
                android:id="@+id/menu_btn"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_marginLeft="10dp"
                android:src="@drawable/ic_drawer" />

            <ImageView
                android:id="@+id/add_btn"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                android:src="@android:drawable/ic_dialog_info"/>
        </RelativeLayout>

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/top_layout" />
    </RelativeLayout>

    <!-- The navigation drawer -->

    <LinearLayout
        android:id="@+id/menu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="@android:color/white"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/welcome_text"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginLeft="20dp"
            android:gravity="center_vertical"
            android:text="OPEN" />

        <ListView
            android:id="@+id/drawer_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:choiceMode="singleChoice"
            android:divider="@android:color/white"
            android:dividerHeight="2dp"
            android:listSelector="@android:color/white" />
    </LinearLayout>

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

And another important part Please change your application theme to noActionbar. Let me know if this satisfies your requirements.

Answer 2

Have you checked the Navigation Drawer documentation already? You have to provide a layout for the navigation drawer anyways, so it's always custom and up to you how it looks like.