Navigation drawer without actionbar, android

Question

I am trying to implement navigation drawer without any actionbar. I have a small layout at the top of main layout and it looks like below

I want that when i will click the button the navigation drawer will appear under the small(colored) layout. I have tried with some example but the drawer always appear like this

But i want that the navigation drawer will appear under the small layout instead of "from the top" . I want something like this:

How can i achieve that??

My tried example's xml file:

   <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" >

    <!-- The first child in the layout is for the main Activity UI -->

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffffff"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >

        <RelativeLayout
            android:id="@+id/actionBar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:background="#0f9d58" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/mainContent"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_below="@id/actionBar"
            android:background="#0f9d58" >

            <Button
                android:id="@+id/actionBarButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Click" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="100dp"
                android:gravity="center"
                android:text="Holy Operating Systems, Batdroid!"
                android:textSize="24sp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true" />
        </RelativeLayout>
    </RelativeLayout>

    <!-- Side navigation drawer UI -->

    <ListView
        android:id="@+id/navList"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_below="@id/actionBar"
        android:layout_gravity="left|start"
        android:background="#ffeeeeee" />

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

And the main activity was :

  public class MainActivity extends Activity {

    private ListView mDrawerList;
    private ArrayAdapter<String> mAdapter;
    Button actionBarButton;
    Boolean buttonStateOpen;

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

        buttonStateOpen=false;

        final DrawerLayout drawer = (DrawerLayout)findViewById(R.id.drawer_layout);

        mDrawerList = (ListView)findViewById(R.id.navList);

        addDrawerItems();


        actionBarButton=(Button) findViewById(R.id.actionBarButton);       
        actionBarButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                if(buttonStateOpen==false)
                 {
                    drawer.openDrawer(Gravity.LEFT);
                    buttonStateOpen=true;
                 }
                else if(buttonStateOpen==true)
                {
                    drawer.closeDrawer(Gravity.LEFT);
                    buttonStateOpen=false;
                }
            }
        });


        mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {
                // TODO Auto-generated method stub
                 Toast.makeText(MainActivity.this, "Time for an upgrade!", Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void addDrawerItems() {
        String[] osArray = { "Android", "iOS", "Windows", "OS X", "Linux" };
        mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, osArray);
        mDrawerList.setAdapter(mAdapter);
    }



}

Answer 1

Approach 1

if You have Fixed height of your layout the you can set that much of margin from top to ListView

Approach 2

use this method to calculate the height of your RelativeLayout

then

ViewTreeObserver viewTreeObserver = view.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
 viewTreeObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
  view.getViewTreeObserver().removeGlobalOnLayoutListener(this);
  viewWidth = view.getWidth();
  viewHeight = view.getHeight();
}
 });
}

then use this to set Runtime margin to ListView from top

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
lp.setMargins(left, top, right, bottom);
imageView.setLayoutParams(lp);

Answer 2

Yes you can create a drawer layout without action bar, it is very possible, Just do these following steps:

public class NavigationDrawerFragment extends Fragment implements View.OnClickListener {

    View drawerView;
    DrawerLayout mDrawerLayout;
    ActionBarDrawerToggle mDrawerToggle;
    RelativeLayout mRlUBAccLayout, mRlPaymentLayout, mRlAutoPayLayout;
    TextView mTvUBAccount, mTvMakePayment, mTvAutoPay;
    DialogClass mDialog;

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        drawerView = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
        mRlUBAccLayout = (RelativeLayout) drawerView.findViewById(R.id.rl_accountlayout);
        mRlPaymentLayout = (RelativeLayout) drawerView.findViewById(R.id.rl_mkpaymentlayout);
        mRlAutoPayLayout = (RelativeLayout) drawerView.findViewById(R.id.rl_autppaylayout);


        mTvUBAccount = (TextView) drawerView.findViewById(R.id.tv_ubaccount);
        mTvMakePayment = (TextView) drawerView.findViewById(R.id.tv_mkpayment);
        mTvAutoPay = (TextView) drawerView.findViewById(R.id.tv_autopay);

        mRlPaymentLayout.setOnClickListener(this);
        mRlUBAccLayout.setOnClickListener(this);
        mRlAutoPayLayout.setOnClickListener(this);
        return drawerView;
    }

    public void showDrawer(DrawerLayout drawerLayout) {
        mDrawerLayout = drawerLayout;
        mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, R.string.drawer_open, R.string.drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                getActivity().invalidateOptionsMenu();
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                getActivity().invalidateOptionsMenu();
                super.onDrawerClosed(drawerView);
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                if(HomeFragmentActivity.defaultInstantance().viewingFragment == HomeFragmentActivity.Fragments.ACCOUNT_FRAGMENT){
                    setNavDrawerColor(0);
                }else if(HomeFragmentActivity.defaultInstantance().viewingFragment == HomeFragmentActivity.Fragments.PAYMENT_FRAGMENT){
                    setNavDrawerColor(1);
                }else if(HomeFragmentActivity.defaultInstantance().viewingFragment == HomeFragmentActivity.Fragments.AUTOPAY_FRAGMENT){
                    setNavDrawerColor(2);
                }
            }

        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mDrawerLayout.post(new Runnable() {
            @Override
            public void run() {
                mDrawerToggle.syncState();
            }
        });
    }
}

From your activity call this method showDrawer(Drawerlayout). And add this code in the xml for the view which shows the drawer layout:

<fragment
        android:id="@+id/fr_navdrawer"
        android:name="apjenius.vinton.NavigationDrawerFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

and find the fragment for navigation drawer in the activity using the below code:

mNavigationDrawerFragment =  (NavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.fr_navdrawer);
        mNavigationDrawerFragment.showDrawer((DrawerLayout) findViewById(R.id.dw_drawerLayout));

Answer 3

Try to set the height and the width of the action bar =0dp from layout app_bar_.. so it will not effect on the code but will remove the action bar like this

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />