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

Omid Heshmatinia · Accepted Answer · 2016-03-07T14:06:48.063

0

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

edited Mar 07 '16 at 14:06

answered Mar 07 '16 at 13:07

Omid Heshmatinia

5,089
2
35
50

1

thanks sir for you answer but i am not using any third-party lib i want some custom technique to implement just that kind of vertical border shadow. – Bilal Maqbool Mar 07 '16 at 13:11
practically i had found only linkedin android app that have such border style, on other android app or any example is found – Bilal Maqbool Mar 07 '16 at 13:12
your given link even does not have such style like in iOS nav have – Bilal Maqbool Mar 07 '16 at 13:14
i understand what you want !!! you want the drawer dnt cover the view and push the view ! im editing my answer – Omid Heshmatinia Mar 07 '16 at 13:19
"you want the drawer dnt cover the view and push the view" sorry can't understand? – Bilal Maqbool Mar 07 '16 at 13:20
please also rate my question useful as many peoples will find it – Bilal Maqbool Mar 07 '16 at 13:21
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); – Bilal Maqbool Mar 07 '16 at 13:54
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(); } – Bilal Maqbool Mar 07 '16 at 13:54
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); – Bilal Maqbool Mar 07 '16 at 13:54
} }; mDrawerLayout.setDrawerListener(mDrawerToggle); if (savedInstanceState == null) { // on first time display view for first nav item displayView(0); } – Bilal Maqbool Mar 07 '16 at 13:55
this is not what i want i just want "border" – Bilal Maqbool Mar 07 '16 at 13:55
the border trick is just in the gradiant background you put in framelayout in the drawer !!! – Omid Heshmatinia Mar 07 '16 at 13:59
– Bilal Maqbool Mar 07 '16 at 14:00
i edit my answer. at the end i put you the right gradiant you should use – Omid Heshmatinia Mar 08 '16 at 04:48
if i add back ground of FrameLayout or listView in XML i didnot get color – Bilal Maqbool Mar 08 '16 at 06:24
but when i add by using code mDrawerLayout.setDrawerShadow(R.drawable.layerlist,GravityCompat.START); then i get that type of color but that is not that kind of style that i want above in the pic i get just a simple navigation style border :( – Bilal Maqbool Mar 08 '16 at 06:26

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

1 Answers1