How to give spacing between rating bar stars android?

Question

Hi I am using custom rating bar with custom images. I need to provide space between stars. When I increase minimum height and maximum height, star image remains same.

   <RelativeLayout
    android:id="@+id/RelativeLayout01"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp" 
    android:padding="5dp">

    <TextView
        android:id="@+id/allreviews"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Rating"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />

        <RatingBar
        android:id="@+id/reviewallrating"
        style="@style/customRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="3dp"
        android:layout_toRightOf="@+id/allreviews"
        android:isIndicator="false"
        android:numStars="5"
        android:stepSize="0.1" />

   </RelativeLayout>

styles: @drawable/star_rating_bar_full 12dip 12dip

   star_rating_bar_full.xml:

   <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@+android:id/background"
      android:drawable="@drawable/star_ratingbar_full_empty" />
   <!--     <item android:id="@+android:id/secondaryProgress"
      android:drawable="@drawable/star_ratingbar_full_empty" /> -->
      <item android:id="@+android:id/progress"
      android:drawable="@drawable/star_ratingbar_full_filled" />
      </layer-list>

star_ratingbar_full_empty:

   <?xml version="1.0" encoding="utf-8"?>

  <!-- This is the rating bar drawable that is used to
   show a filled cookie. -->
    <selector
   xmlns:android="http://schemas.android.com/apk/res/android">

   <item android:state_pressed="true"
  android:state_window_focused="true"
  android:drawable="@drawable/star_gray" />

  <item android:state_focused="true"
  android:state_window_focused="true"
  android:drawable="@drawable/star_gray" />

 <item android:state_selected="true"
  android:state_window_focused="true"
  android:drawable="@drawable/star_gray"/>

 <item android:drawable="@drawable/star_gray" />

 </selector>
star_ratingbar_fullfilled.xml:

  <item android:state_pressed="true"
  android:state_window_focused="true"
  android:drawable="@drawable/yellow_star" />

  <item android:state_focused="true"
  android:state_window_focused="true"
  android:drawable="@drawable/yellow_star" />

  <item android:state_selected="true"
  android:state_window_focused="true"
  android:drawable="@drawable/yellow_star" />

<item android:drawable="@drawable/yellow_star" />

I used style="?android:attr/ratingBarStyle" in styles but still output remains same.

Answer 1

You could simply add some empty space to the left and right sides of your PNGs.

That is, increase the width of the grey and yellow PNGs in GIMP (or whatever graphic editor program you use).
Just the canvas, without stretching the star icon.

Answer 2

If you are using Drawable for the stars. Make sure your drawable have some left padding according to your requirement in the png image.

Otherwise through code its not working. Some days back I stuck with the same problem. I gone through by using the left padded image. Hope it will work.