How to convert my slide menu like foursquare menu?

Question

Right now I have a sliding menu as follows,

enter image description here

I want to style it like foursquare sliding menu,

enter image description here

Here is my layout

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >

      <Button
          android:id="@+id/oneButton"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_alignParentTop="true"
          android:layout_marginLeft="5dp"
          android:layout_marginTop="5dp"
           android:drawableLeft="@drawable/ic_dashboard"
             android:gravity="left|center_vertical"
          android:text="@string/duo_dashboard" />

      <Button
          android:id="@+id/twoButton"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_alignParentRight="true"
          android:layout_below="@+id/oneButton"
          android:layout_marginLeft="5dp"
          android:drawableLeft="@drawable/ic_settings"
          android:gravity="left|center_vertical"
          android:text="@string/title_settings" />

       <Button
          android:id="@+id/threeButton"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_alignParentRight="true"
          android:layout_below="@+id/twoButton"
          android:layout_marginLeft="5dp"
          android:drawableLeft="@drawable/ic_todo"
          android:gravity="left|center_vertical"
          android:text="@string/title_todo" />

  </RelativeLayout>
</LinearLayout> </RelativeLayout>

could you please give more details on what you are trying to do? do you want to replicate the colors? or the whole style? — Tarek K. Ajaj, Aug 29 '13 at 05:23

score 1 · Answer 1 · answered Aug 29 '13 at 06:49

1

Provided by Android: Displaying the navigation drawer

http://developer.android.com/design/patterns/navigation-drawer.html

answered Aug 29 '13 at 06:49

PrvN

2,385
6
28
30

am already using sliding menu library for this, was asking about the styling this cant be an answer – Sajeetharan Aug 29 '13 at 06:53

ThanosFisherman · Accepted Answer · 2013-10-08T01:12:40.290

Just a raw guess here. The line splitter can probably be achieved by the divider property like so.

 <ListView
        android:id="@+id/left_drawer"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@drawable/gradientshape" <!--thats what im talking about-->
        android:dividerHeight="0.5dp" />

Where gradientshape must be a gradient xml file like so

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
    android:startColor="@color/dark_black" <!--use whatever colors you like-->
    android:endColor="@color/light_grey"
    android:type="linear"
    android:angle="270" /> </shape>

EDIT: Just looked at the foursquare resources the coloring and line shadows are actually achieved by a 9 patch image

How to convert my slide menu like foursquare menu?

2 Answers2