How to set background image for custom radio button android with original scale ratio?

Question

I need to implement a timeline bar as attached image

I try to use custom radio button to draw each node: layout xml file:

<LinearLayout 
android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    >
    <RadioGroup 
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:layout_gravity="center"
       android:gravity="center"
       android:checkedButton="@+id/first">
       <RadioButton android:id="@+id/first"
          style="@style/timeLineRadioButton"/>
       <RadioButton android:id="@+id/second"
          style="@style/timeLineRadioButton"/>
       <RadioButton android:id="@+id/third"
          style="@style/timeLineRadioButton"/>
       <RadioButton android:id="@+id/fourth"
          style="@style/timeLineRadioButton"/>
    </RadioGroup>
</LinearLayout>

res/values/style.xml:

<style name="timeLineRadioButton">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:gravity">top|center</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:button">@null</item>
    <item name="android:background">@drawable/button_radio</item>
    <item name="android:scaleType">matrix</item>
</style>

res/drawable/button_radio.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:state_pressed="false"
      android:drawable="@drawable/radio_button_pressed"/>
  <item android:state_checked="false" android:state_pressed="false"
      android:drawable="@drawable/radio_button"/>
  <item android:state_checked="true" android:state_pressed="true"
      android:drawable="@drawable/radio_button_pressed"/>
  <item android:state_checked="false" android:state_pressed="true"
      android:drawable="@drawable/radio_button"/>
</selector>

The timeline display ok, but background was scale with different ratio

so, please help me to fix background image with original ratio scale

Answer 1

According to your code, I guess you want to achieve something like scaleType="center" of ImageView, but unfortunately, there is no thing like that for RadioButton, but I think this solution may help you.

First, don't use weightSum/layout_weight in this case, just set android:layout_width="wrap_content" for RadioButtons.

Seconds, update your selector like this (note that the main point is using of bitmap tag that has gravity property, and this code I set it to center)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:state_pressed="false">
        <bitmap android:src="@drawable/radio_button_pressed" android:gravity="center" />
  </item>
  <item android:state_checked="false" android:state_pressed="false">
        <bitmap android:src="@drawable/radio_button" android:gravity="center" />
  </item>
  <item android:state_checked="true" android:state_pressed="true">
        <bitmap android:src="@drawable/radio_button_pressed" android:gravity="center" />
  </item>
  <item android:state_checked="false" android:state_pressed="true">
        <bitmap android:src="@drawable/radio_button" android:gravity="center" />
  </item>
</selector>

So the result is your RadioButton's background will behave like scaleType="center"

Hope this helps!