CODEWITHSUNDEEP
android
user733284
user733284

Reputation: 935

How can i make an "Gmail" like header buttons? (Pic attached)

Does any one knows how can i skin an android button to look like this:

a busy cat http://www.11sheep.com/temp/picForSO.jpg

Thanks in advance, Lior

Upvotes: 0

Views: 462

Answers (2)

Rejinderi
Rejinderi

Reputation: 11844

The following layout files will product a button with 5px radius, of course u input your own color and change the solid color to gradient to match ur screenshots, then on the button change the text colour to white or something.. I dont have time for examples now.. good luck though.

and lastly you have to apply them as background to your button like this

<Button
    android:id="@+id/btnLoveThisOne"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="Love me love u too!"
    android:background="@drawable/button_background" <!-- Yes look at me -->
/>

button_background_normal.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/button_background_normal_color"/> <!-- Change this to your own colour -->
    <corners android:radius="5px"/>
    <stroke android:width="1dp" android:color="#20ffffff"/>
</shape>

button_background_pressed.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/button_background_pressed_color"/> <!-- Change this to your own colour -->
    <corners android:radius="5px"/>
</shape>

button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" 
          android:state_pressed="false" 
          android:drawable="@drawable/button_background_normal" />

    <item android:state_focused="true" 
          android:state_pressed="true"
          android:drawable="@drawable/button_background_pressed" />

    <item android:state_focused="false" 
          android:state_pressed="true"
            android:drawable="@drawable/button_background_pressed" />
    <item android:drawable="@drawable/button_background_normal" />
</selector>

Upvotes: 2

Pete Houston
Pete Houston

Reputation: 15079

I know two ways to make it:

  1. a Button or TextView with an image having that engraving rectangle, for stretch, use 9.patch :)
  2. a Button or TextView with transparent background and a selector drawing the shape border

However, I don't know exactly how they did as shown in your picture.

Upvotes: 1

Related Questions