CODEWITHSUNDEEP
androidandroid-layout
wviana
wviana

Reputation: 1937

Making Custom RadioButton with image on center

I'm trying to my custom RadioButton that I trying to make to look like this:

Expected Result

So I did custom drawables that respond to the RadioButton status and used it as background. This is alright.

The problem is that I'm not been able to center the images that I set through the android:button atribute.

Here is how I'm trying to use it in my layout.

<RadioGroup
        android:id="@+id/presenter_options"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="4dp"
        android:gravity="center"
        >

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:button="@drawable/cluster_centered"
            android:gravity="center"
            android:padding="8dp"
            android:background="@drawable/presenter_radiobutton_left"
            />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="8dp"
            android:background="@drawable/presenter_radiobutton_right"
            android:button="@drawable/fire"
            />

</RadioGroup>

With this I'm getting this as result:

Actual result

I've already tried to define a drawable that sets the gravity to center, but nothing changed. Here is the custom drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/cluster" android:gravity="center"/>
    </item>
</selector>

So, how could I center the button images?

PS: I can't set each kind of button as background because it'll be dynamic in the future, so the only thing that could be in background is the blue shape.

Upvotes: 2

Views: 2262

Answers (2)

Vladimir.Shramov
Vladimir.Shramov

Reputation: 101

"on center" solution is

...

<RadioButton>
...
android:button="@null"
android:foreground="@drawable/your_selector_for_center_drawable"
android:background="@drawable/your_selector_for_background_drawable"
android:foregroundGravity="center"

Upvotes: 0

wviana
wviana

Reputation: 1937

My solution was to set android:button=@null, then set the image that I want into the android:drawableLeft attribute. So my RadioButton code is like this:

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="8dp"
    android:background="@drawable/presenter_radiobutton_left"
    android:button="@null"
    android:drawableLeft="@drawable/fire"
    />

Upvotes: 5

Related Questions