Hanan Dann Hanan Dann - 11 days ago 7
Android Question

How to make Radio buttons with centered and proportional images instead of text?

Before marking as solved, many topics tackle this problem, but non give a good solution.

I want to create

radio buttons
with centered and proportionally sized images, in an adaptive
RadioGroup
(
android:layout_width="0dp"
and
android:layout_weight="1"
)

Solutions that DON'T work:


  1. setting
    android:button="R.drawable.x"
    or
    android:drawableStart="R.drawable.x"
    and its siblings - the image will be drawn off-center, hovering around an invisible text



Example:

`<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal|center">

<RadioButton
android:id="@+id/bt_home"
style="@style/radio_btn_style"
android:button="@drawable/radio_btn_home_selector"/>

<RadioButton
android:id="@+id/bt_discover"
style="@style/radio_btn_style"
android:button="@drawable/radio_btn_discover_selector"/>

<RadioButton
android:id="@+id/bt_my_profile"
android:button="@drawable/radio_btn_my_profile_selector"
android:checked="true"
style="@style/radio_btn_style"
/>

<RadioButton
android:layout_weight="1"
android:id="@+id/bt_new_activity"
style="@style/radio_btn_style"
android:button="@drawable/radio_btn_add_activity_selector"

/>


</RadioGroup>`


Result: radio buttons are off-center





  1. setting
    android:background="R.drawable.x"
    - image will smear to fill the background.



Example:

<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal|center">

<RadioButton
android:id="@+id/bt_home"
style="@style/radio_btn_style"
android:background="@drawable/radio_btn_home_selector"
android:button="@null"/>

<RadioButton
android:id="@+id/bt_discover"
style="@style/radio_btn_style"
android:background="@drawable/radio_btn_discover_selector"
android:button="@null"/>

<RadioButton
android:id="@+id/bt_my_profile"
android:background="@drawable/radio_btn_my_profile_selector"
android:checked="true"
style="@style/radio_btn_style"
android:button="@null"/>

<RadioButton
android:layout_weight="1"
android:id="@+id/bt_new_activity"
style="@style/radio_btn_style"
android:background="@drawable/radio_btn_add_activity_selector"
android:button="@null"/>
</RadioGroup>


Result: background icons get smeared





  1. setting
    RadioButton
    android:layout_width="wrap_content"
    - bunches buttons to center, but does not space out evenly throughout
    RadioGroup
    width



Result: radio buttons bunched




This is the result I wan't:
radio buttons spaced out evenly, maintaining image proportion

Any ideas? Thanks...




P.S.:
the used style:

`<style name="radio_btn_style">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:layout_marginStart">16dp</item>

</style>`


drawable selector example:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_nav_home_selected"
android:state_checked="true"/>
<item android:drawable="@drawable/ic_nav_home"/>
</selector>