Android: Scale background image of RadioButton or another way to make a RadioButton an Image

Question

I'm making an app that is related to a card game and as such has many images of cards appear throughout the app. In one section I need the user to select one of four cards, with only one selection ever being possible and I want to have the card to change color slightly after being clicked to show that it is the currently selected one.

For the bulk of this task a RadioGroup with RadioButtons makes perfect sense since the functionality for having a checked/unchecked state and unselecting all other options when a new one is picked is built in; however, the issue is that I want the buttons to be the cards themselves and therefore an image with no text whatsoever.

At first this post looked promising: Adding custom radio buttons in android

My use of this strategy:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="4dp"
    android:layout_weight="5"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/label_seatGod"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="8"
        android:gravity="center_vertical"
        android:text="@string/ex2"
        android:textColor="@color/font_condition_labels"
        android:textSize="@dimen/font_gen_label_size"
        android:textStyle="bold" />

    <RadioGroup
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="8" >

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@drawable/power_aphrodite"
            android:checked="false"
            android:text="@null" />
    </RadioGroup>

</LinearLayout>

which resulted in:

This is almost perfect. No text and the entire region of the clickable button space is composed of the image I want, EXCEPT that as you can see the image is not scaled at all and is cropped on the edges. Above the RadioButton you can see a LinearLayout with 4 ImageButtons that demonstrate exactly how I want the RadioButton/card image to appear (ignore the grey for now I haven't finished padding the views).

Essentially, I want a RadioButton that functions normally but looks exactly like one of the four ImageButtons in the top section. Ideally scaleType="fitCenter" would be the fix since it is what I am using in the example ImageButtons, but you cannot apply that attribute to the button drawable of a RadioButton or its background directly.

So how can I get the image to scale and not be cropped without resorting to some performance tanking layout jurry rigging or creating an entirely new RadioButton class?

Thanks in advance.

Is there an option you can use vector drawable or different assets per dpi? — deathangel908, May 24 '18 at 07:47
can you try hardcoding the width and height of your buttons according to your card so that it is not square? — Suhaib Roomy, May 24 '18 at 08:00
@deathangel908 - I'll consider that but I'd like to avoid that for something this simple, especially considering that there exists such a simple way to so this with ImageView. There has to be a way to use similar functionality with an image in something else. Kinda silly that scaleType isn't an attribute for most image uses. — oblivioncth, May 24 '18 at 18:32
@Suhaib Roomy - That just changes which portion is cropped, doesn't apply scaling at all. — oblivioncth, May 24 '18 at 18:33
Check via [layout inspector](https://developer.android.com/studio/debug/layout-inspector) if radio button is a complex element, and if there's an imageview inside. Also grep source of rafiobutton for `button` attribute and check how's it set — deathangel908, May 24 '18 at 19:30
@deathangel908 My first time using the inspector but it does not seem like it has anything under it. — oblivioncth, May 25 '18 at 22:39

score 0 · Answer 1 · answered May 24 '18 at 09:53

0

Maybe you could try adding this to your RadioButton in the xml:

    android:scaleType="centerCrop"

answered May 24 '18 at 09:53

Daniel Albiol

19
4

As I said in the question RadioButton doesn't have that attribute unlike ImageButton. – oblivioncth May 24 '18 at 18:27

Android: Scale background image of RadioButton or another way to make a RadioButton an Image

1 Answers1