CODEWITHSUNDEEP
androidlayoutshapes
Bogdan
Bogdan

Reputation: 461

Android custom buttons

I am creating custom buttons in android but want to avoid repetition.

I'm trying to create 2 togglable buttons which share the same design but a different image icon instead of text.

Currently I have this:

enter image description here

And i'm using this xml as a drawable resource:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <item>
        <shape>
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
            <corners android:radius="20dp"/>
        </shape>
    </item>

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

            <solid android:color="#edebeb"></solid>

            <corners android:radius="20dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <size android:height="150dp" android:width="150dp"></size>
            <padding
                android:bottom="5dp"
                android:left="-5dp"
                android:right="5dp"
                android:top="-5dp" />

            <solid android:color="#fff"></solid>

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

</layer-list>

How can I display a different image in the center of each button without duplicating the xml file?

Is there any way I can pass a value to each button in the .java file of my activity so that i can use it to show a different image for each button?

Upvotes: 5

Views: 2155

Answers (3)

Nick Cardoso
Nick Cardoso

Reputation: 21733

If you use an ImageView then you can set the icon as src and still use your drawable as the background:

 <ImageView ...
    android:src="@drawable/ic_whatever"
    android:background="@drawable/background" />

All views support onClick so it can still act as a button. Alternatively you can nest drawables so you can have the following for each different button style:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <item android:drawable="@drawable/ic_whatever" />
    <item android:drawable="@drawable/background" />
</layer-list>

The java version of what I suggested above (from an Activity):

public void onCreate(...) {
    ...
    ((ImageView) findViewById(R.id.my_button)).setImageResource(R.drawable.ic_whatver);
}

Upvotes: 2

Aawaz Gyawali
Aawaz Gyawali

Reputation: 3344

I would like to add more on thestalker's answer.

Use the library to design the button and change the Image Source from the code.

Example

       <mehdi.sakout.fancybuttons.FancyButton
            android:id="@+id/btn_twitter"
            android:layout_width="50dp"
            android:layout_height="30dp"
            android:layout_below="@+id/imageView2"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:padding="7sp"
            fancy:fb_borderColor="#55acee"
            fancy:fb_borderWidth="2dp"
            fancy:fb_defaultColor="#fff"
            fancy:fb_focusColor="#4d55acee"
            fancy:fb_iconResource="@drawable/twitter"
            fancy:fb_radius="200dp" />

Change the line 

        fancy:fb_iconResource="@drawable/twitter"

to your desired image drawable.

Upvotes: 0

Noobification
Noobification

Reputation: 319

I found this tool pretty useful: http://angrytools.com/android/button/

If you want a border around your background image, you may try tweaking the style with that, particularly the <stroke/> tag.

.

You can show different images as long as each button has a unique ID. In your layout XML, add android:background="@drawable/img_file_name_without_xtension" for each button.

To do that programatically in Java: 

Button myButton = (Button) findViewById(R.id.buttonID); 
myButton.setBackgroundResource(R.drawable.img_file_name_without_xtension);

Upvotes: -1

Related Questions