Android side navigation drawer : how to have such vertical border and image logo

Question

help me actually 2ND image is of iOS navigation drawer, i want same drawer in android, i had a drawer that is close to it but not know how to add such 3D munu border and to add just image logo above the place of HOME

Want this type of NAV border but without using this Lib

play.google.com/store/apps/details?id=com.slidingmenu.example

Image 1 - had made this navigation drawer

Image 2 - i want such navigation border

• In android it is like this one - linkedin

www.learn2crack.com/wp-content/uploads/2014/06/device-2014-06-06-120657.png

i am using such codes

• drawer

  <android.support.v4.widget.DrawerLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  
  <FrameLayout
      android:id="@+id/frame_container"
      android:layout_width="match_parent"
      android:background="@drawable/layerlist"
      android:layout_height="match_parent" />
  
  <ListView
      android:id="@+id/list_slidermenu"
      android:layout_width="240dp"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      android:choiceMode="singleChoice"
      android:divider="#CFCFCF"
      android:dividerHeight="1dp"    
      android:listSelector="@drawable/list_selector"
      android:background="@color/list_background"/>
  </android.support.v4.widget.DrawerLayout>
  

• to add border

mDrawerLayout.setDrawerShadow(R.drawable.layerlist,GravityCompat.START);

• R.drawable.layerlist

  <?xml version="1.0" encoding="utf-8"?>
  

  <item>
      <shape
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:shape="rectangle" >
          <gradient
              android:endColor="#BFBFBF"
              android:startColor="#EDEDED"
               />
      </shape>
  </item>
  <item android:right="15dp">
      <shape
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:shape="rectangle" >
          <solid android:color="#FFFFFF" />
      </shape>
  </item>
  

• list_selector

  <?xml version="1.0" encoding="utf-8"?>
  

  <item android:drawable="@drawable/list_item_bg_normal" android:state_activated="false"/>
  <item android:drawable="@drawable/list_item_bg_pressed" android:state_pressed="true"/>
  <item android:drawable="@drawable/list_item_bg_pressed" android:state_activated="true"/>
  

MAIN_ACTIVITY Code

    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;

    FrameLayout mainView;
mainView = (FrameLayout) findViewById(R.id.frame_container);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.list_slidermenu);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.overflow_icon, // nav menu toggle icon
                R.string.app_name, // nav drawer open - description for
                                    // accessibility
                R.string.app_name // nav drawer close - description for
                                    // accessibility
        ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                // calling onPrepareOptionsMenu() to show action bar icons
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                // calling onPrepareOptionsMenu() to hide action bar icons
                invalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);


                float xPositionOpenDrawer = mDrawerList.getWidth();
                float xPositionWindowContent = (slideOffset * xPositionOpenDrawer);
                mainView.setX(xPositionWindowContent);

            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        if (savedInstanceState == null) {
            // on first time display view for first nav item
            displayView(0);
        }

thanks

Answer 1

all you need is this library

https://github.com/mikepenz/MaterialDrawer

it give you everything you need, even without adding anything to your xml.

EDIT :

If you dnt want to use any library, you should do that by this:

Your XMl should be like this

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

<LinearLayout
    android:id="@+id/frame_container"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/view" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--PUT YOUR VIEW HERE-->

    </RelativeLayout>
</LinearLayout>
<RelativeLayout
    android:layout_width="240dp"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="#CFCFCF"
        android:dividerHeight="1dp"/>
    <FrameLayout
        android:layout_width="5dp"
        android:layout_height="match_parent"
        android:background="@drawable/MY_GRADIANT_BACKGROUND"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

pay attention to two things ! 1. make a gradiant background and put it on the frame layout above the list 2. i used a toolbar! so pay attention to activity theme in your manifest and use an NOACTIONBAR one.

in your activity you should handle drawer sliding and slide the MAIN VIEW with the drawer as it slides:

mDrawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.drawer_button, R.string.app_name, R.string.app_name)
    {
        @SuppressLint("NewApi")
        public void onDrawerSlide(View drawerView, float slideOffset)
        {
            float moveFactor;
                moveFactor = -(drawerView.getWidth() * slideOffset);

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
            {
               ((View)findViewById(R.id.frame_container)).setTranslationX(moveFactor);
            }
            else
            {
                TranslateAnimation anim = new TranslateAnimation(lastTranslate, moveFactor, 0.0f, 0.0f);
                anim.setDuration(0);
                anim.setFillAfter(true);
                ((View)findViewById(R.id.content_frame)).startAnimation(anim);

            }
            lastTranslate = moveFactor;
        }

    };
    mDrawerLayout.setDrawerListener(mDrawerToggle);

EDIT :

for border just make a shape drawble in your res folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:type="linear"
    android:angle="180"
    android:startColor="#50666666"
    android:endColor="#10444444"/>

and put it as background to the small frame layout above your list. pay attention to my XML !!!!