title: Android: center background of radio button
body: <p>I need to use custom radio buttons with background image, and space them evenly horizontally, I can achieve the spacing but cannot position the background image in the center of each button. My layout is as below.</p>
  
  
  
  <pre><code>&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="58dp"&gt;
  
  
      &lt;RadioGroup
          android:id="@+id/group_bottom_bar"
          android:layout_width="match_parent"
          android:layout_height="52dp"
  
          android:orientation="horizontal"&gt;
  
          &lt;RadioButton
              android:id="@+id/v4_btn_trip"
              style="@style/BottomTabBarButtonStyle"
              android:button="@drawable/v4_tabbar_radio_trip" /&gt;
  
          &lt;RadioButton
              android:id="@+id/v4_btn_agenda"
              style="@style/BottomTabBarButtonStyle"
              android:button="@drawable/v4_tabbar_radio_agenda" /&gt;
  
          &lt;RadioButton
                  android:id="@+id/v4_btn_favorite"
                  style="@style/BottomTabBarButtonStyle"
              android:button="@drawable/v4_tabbar_radio_favorite" /&gt;
  
          &lt;RadioButton
                  android:id="@+id/v4_btn_settings"
                  style="@style/BottomTabBarButtonStyle"
              android:button="@drawable/v4_tabbar_radio_settings" /&gt;
  
      &lt;/RadioGroup&gt;
  
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>The style is per below: </p>
  
  <pre><code>&lt;style name="BottomTabBarButtonStyle"&gt;
          &lt;item name="android:layout_width"&gt;wrap_content&lt;/item&gt;
          &lt;item name="android:layout_height"&gt;wrap_content&lt;/item&gt;
          &lt;item name="android:gravity"&gt;center_horizontal&lt;/item&gt;
          &lt;item name="android:layout_weight"&gt;1&lt;/item&gt;
  </code></pre>
  
  <p>I already set the gravity to center_horizontal.</p>
  
  <p>I tried to replace <code>android:button</code> with <code>android:background</code> but that just stretched the image.</p>
  
  <p>One of the selector files (v4_tabbar_radio_trip)</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:drawable="@drawable/ic_bottom_tab_trip_active" android:state_checked="true" android:state_pressed="true" /&gt;
      &lt;item android:drawable="@drawable/ic_bottom_tab_trip_active" android:state_pressed="true" /&gt;
      &lt;item android:drawable="@drawable/ic_bottom_tab_trip_active" android:state_checked="true" /&gt;
      &lt;item android:drawable="@drawable/ic_bottom_tab_trip" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>This is its current state.
  <strong>Update:</strong> The expected output is that the background image (the two dots) is in the middle of the greyed area (which is the radio button), not aligned to the left. Similarly for other icons</p>
  
  <p><img src="https://i.stack.imgur.com/9bjBy.png" alt="enter image description here"></p>