-1

Here is an example of an app that used XML to design button.

How can i have the same design with XML?

How make my buttons look like it is floating just like in the image below?

Sample

Toshi
  • 314
  • 5
  • 17

3 Answers3

6

I think you will need to use a shape drawable with a layered list, here is an example of a button that has a different color on the top and bottom (the drop shadow effect). You will set this as the background attribute of the Button.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="2dp" />

            <solid android:color="@color/button_border_dark" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape android:shape="rectangle" >
            <corners android:radius="2dp" />

            <solid android:color="@color/button_border_light" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <corners android:radius="2dp" />

            <solid android:color="@color/button_general_color" />
        </shape>
    </item>

</layer-list>
Booger
  • 18,579
  • 7
  • 55
  • 72
1

Use this one....

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:orientation="vertical" >

  <Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="25dp"
    android:layout_marginRight="25dp"
    android:background="@drawable/selected" // selected is the name of your custom file
    android:text="Register"
    android:textColor="#fff" />

 <Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="25dp"
    android:layout_marginRight="25dp"
    android:background="#37a8f7"
    android:text="Login"
    android:layout_marginTop="15dp"
    android:textColor="#fff" />

</LinearLayout>

you can make custom file selected.xml in drawable folder for red button.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#ff0000"/>
  <corners android:radius="1dp"/>
  <padding android:left="3dp" android:top="2dp"
        android:right="3dp" android:bottom="2dp" />
</shape>

and set it to your red button.

And you can make same as for your blue button.

Piyush
  • 18,895
  • 5
  • 32
  • 63
1

Here is the XML of the Button. You can also use custom typeface as well as shadows to make it the way you want. 

 <Button 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:background="@android:color/holo_blue_dark"
            android:textColor="@android:color/white"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_gravity="center"
            android:shadowColor="@android:color/holo_blue_light"
            android:id="@+id/btnClickMe"
            android:text="Click Me!"
            />
Bipin Bhandari
  • 2,694
  • 23
  • 38
  • what do you mean by typeface ? – Toshi Jan 11 '14 at 13:52
  • 1
    It means font. Refer this if you want to change font http://stackoverflow.com/questions/5497258/android-help-with-changing-button-font-type-how – Bipin Bhandari Jan 11 '14 at 13:54
  • Thanks! May i ask if the shadow is also implemented in xml? – Toshi Jan 11 '14 at 13:55
  • For shadow refer this:http://stackoverflow.com/questions/2486936/android-shadow-on-text For Button shadow: http://stackoverflow.com/questions/17108060/add-shadow-to-button-in-android and please mark if comments are helpful! Thanks – Bipin Bhandari Jan 11 '14 at 13:58