1

I want to design below buttons in android. I used shape drawable to design it.

http://i48.tinypic.com/9gh7ye.png

I almost design this but cant get the boarder on the buttons.(Upper boarder on each button).

U can see that each button have dark boarder on top . How to design this.I heard about layerlist but dont know how to use it?

can anyone know this?Please share your thoughts.Thanks in advance.

Newest Button xml-->

 <Button
        android:id="@+id/buttonRefresh"
        android:layout_width="@dimen/titlebar_refresh_button_width"
        android:layout_height="@dimen/titlebar_button_height"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/refresh_btn_state_list_drawable"
        android:drawableLeft="@drawable/refresh"
        android:paddingLeft="14dp" />

  1. newest_btn_state_list_drawable.xml

    <item android:drawable="@drawable/newest_btn_shape_drawable_h" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="@drawable/newest_btn_shape_drawable_f" android:state_selected="true"/>
<!-- focused -->
<item android:drawable="@drawable/newest_btn_shape_drawable"/>
<!-- default -->

2.newest_btn_shape_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="45"
        android:endColor="#6080A8"
        android:startColor="#6080A8" />

    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp" />

    <stroke
        android:width="0.2dip"
        android:color="#000000" >
    </stroke>

</shape>

3.newest_btn_shape_drawable_h.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="45"
        android:endColor="#405070"
        android:startColor="#405070" />

    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp" />

    <stroke
        android:width="1dip"
        android:color="#000000" >
    </stroke>

</shape>

4.newest_btn_shape_drawable_h.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="45"
        android:endColor="#405070"
        android:startColor="#405070" />

    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp" />

    <stroke
        android:width="1dip"
        android:color="#000000" >
    </stroke>

</shape>
Ani
  • 1,611
  • 4
  • 14
  • 16
  • Can you share your xml file... – Aamir Shah Oct 04 '12 at 09:30
  • I design this using shape drawable not using layerlist. Ok I will put one of button xml.(not possible to put all shape drawables) – Ani Oct 04 '12 at 09:33
  • Ask your graphic designer to have the border as you like if you r using background .png file for the buttons. So what is layerlist? – Randroid Oct 04 '12 at 09:34
  • I am not using any image as background. using layerlist,shape drawable etc we can design our own shapes for button. – Ani Oct 04 '12 at 09:40
  • Probably [android-segmentedradiobutton](https://github.com/makeramen/android-segmentedradiobutton) can be helpful for you. – Adil Soomro Oct 04 '12 at 09:43
  • Have a look at [this post](http://stackoverflow.com/q/6003382/593709) too. – Adil Soomro Oct 04 '12 at 09:46
  • @Adil -In that they use colors and I want top side shade only on each button – Ani Oct 04 '12 at 10:21

0 Answers0