1

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.

Community
  • 1
  • 1
Sudarshan
  • 1,291
  • 3
  • 26
  • 35

2 Answers2

2

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.

Saraschandraa
  • 478
  • 1
  • 10
  • 28
  • Ya sure..But the shadow effect and previous action bar menu items should be maintained right – Sudarshan Sep 12 '14 at 10:27
  • Try implementing the DrawerLayout in a Fragment Activity. You wont be able to use previous Action bar menu with the type of drawer you want. You will have to handle it seperately unlike action bar default menu. – Saraschandraa Sep 12 '14 at 10:38
  • create a Top layout similar to action bar --> How this can be done can u help me on this – Sudarshan Sep 12 '14 at 13:22
  • Sure i can give a sample working code by tomorrow if its ok for you. – Saraschandraa Sep 12 '14 at 13:23
  • Find my updated answer and let me know if this is what you required. – Saraschandraa Sep 15 '14 at 13:24
  • Thanks for your help, but the desired result i mentioned in my question is not this.. i am up voting for the code – Sudarshan Sep 15 '14 at 15:13
  • Let me know what is your requirement, I'll see whether I can see help you out. – Saraschandraa Sep 16 '14 at 05:20
  • I have a link in my quest, if you open it, you could see Music Library's image, the similar kind of UI i need. If u need to knw more after that i ll explain u – Sudarshan Sep 16 '14 at 05:28
  • Comment the code inside the public void onDrawerSlide(View drawerView, float slideOffset) method. I have updated the answer check it and let me know. – Saraschandraa Sep 16 '14 at 05:31
  • If i set the noTitlebar (i used this "@android:style/Theme.Holo.Light.NoActionBar") in application theme, then if i use ActionMode.Callback wont bring the actionbar right? – Sudarshan Sep 16 '14 at 05:39
  • As I said previously u cannot use any of the ActionBar items. You will have to make everything custom. – Saraschandraa Sep 16 '14 at 05:42
0

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.

Ridcully
  • 23,362
  • 7
  • 71
  • 86
  • Normal way of implementing of Navigation drawer has the things what u hve mentioned, but my need is , in normal the drawer layout will come under the Actionbar but wat i need is on top of Actionbar.. Did u got it? :) – Sudarshan Sep 12 '14 at 10:04
  • I understand. But as the way the Navigation drawer does it, is the standard way in Android and it is what users are expecting, perhaps it would be a good idea to do it with the Navigation drawer and spare your users and yourself a lot of trouble. – Ridcully Sep 12 '14 at 10:59