RatingBarの画像を変更してみる

Android



今回はRatingbarの画像を変更してみます。



今作ってるアプリでRatingbarを使ってみようと思ったんですが、
表示される画像が機種によってまちまちなので、
自分で作った☆の画像を設定してみようと思います。

画像を作成

InkscapeとかGimpで適当に☆を作ります。
3パターン必要です。


  • ☆の設定されていない状態
  • ☆が半分設定された状態
  • ☆が完全に設定された状態



名前は適当にbtn01,btn02,btn03としておきます。


次にstyle.xmlとrating.xmlを作成します。

style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyRating" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/rating</item>
        <item name="android:minHeight">38dip</item>
        <item name="android:maxHeight">38dip</item>
        <item name="android:thumb">@null</item>
        <item name="android:isIndicator">true</item>
    </style>
</resources>


rating.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/btn01" />
    <item android:id="@+android:id/secondaryProgress" 
        android:drawable="@drawable/btn02" />
    <item android:id="@+android:id/progress" 
        android:drawable="@drawable/btn03" />
</layer-list>



これらの画像とXMLをdrawableフォルダに入れておきます。
※drawableの全てのフォルダに入れるか、no-dpiに入れるかしないとエラーになるので注意が必要です。


実際に使ってみる
<RatingBar 
    android:numStars="5"
    android:stepSize="0.5"
    android:rating="1"
    android:layout_gravity="center_horizontal"
    style="@style/MyRating"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

style="@style/MyRating"とすることで、
オリジナルのスタイルを適用できます。



今回はこちらのサイトを参考にしました。
http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/