Button Corners Rounded Background Image

Question

I want to create Button with background.png and rounded corners. How to do this?

I wrote this code on MainActivity:

<Button 
    android:layout_width="match_parent"
    android:layout_height="40dip"
    android:text="LOGIN TO THE GAME"
    android:textColor="#ffffff"
    android:background="@drawable/button_corners" />

And i create file 'button_corners.xml' which contain:

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

    <corners
        android:radius="10dip" />

    <stroke
        android:width="0.5dp"
        android:color="#000000" />

</shape>

And now how to add background-image to this button? Help!

score 0 · Answer 1 · answered Apr 30 '14 at 14:48

Buttons with rounded corners and a picture, I've never used. But with buttons with background with colors, without any images, I used this code:

On Activity:

<Button 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:text="Ementas"
    android:background="@drawable/button_corners"/>

And on file 'button_corners.xml':

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

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

    <gradient
        android:startColor="@color/green_dark"
        android:endColor="@color/green_light"
        android:angle="270" />
</shape>

And I still have a file with colors:

<resources>
    <color name="green_dark">#98B505</color>
    <color name="green_light">#5F7102</color>
</resources>

The final result like this:

enter image description here

I think to use images, the code should not be too different.

your code doesnt say ..where to add the background image...please include even the image..if possible — bvsss, Oct 30 '14 at 09:36

score 0 · Answer 2 · answered Jan 23 '15 at 19:51

Use a Linear Layout(A) and set whatever image you have as it's background. Then use another Linear Layout(B) to place inside Linear Layout(A) and give that Layout a background with rounded corners.

<LinearLayout
            android:id="@+id/A"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/whateverimage"
            android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/B"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/roundedstuff"
            android:orientation="vertical" >
</LinearLayout>
</LinearLayout>

roundedstuff.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient 
    android:startColor="#00000000" 
    android:endColor="#00000000" />
 <padding android:left="2dp"
    android:top="2dp"
    android:right="2dp"
    android:bottom="2dp" />
<stroke
    android:width="2dp"
    android:color="#ffffff" />
<corners 
    android:bottomRightRadius="10dp" 
    android:radius="10dp"
    android:bottomLeftRadius="10dp" 
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />

Save that to drawable folder

Button Corners Rounded Background Image

2 Answers2