RatingBar の星の色を黄金に変更する｜Android｜開発裏話
AdMob の「ネイティブ広告」を、以下で四苦八苦しながらも、リリース済みの Android アプリ「CountablePad」に搭載しました。
ネイティブ広告には「RatingBar」が実装されていましたが、初期状態ではその星（レーティング）の色は独特なスタイルでしたので、カスタマイズしてみました。
完成した星（レーティング）の色（スタイル）は、以下の通りです。
▲ CountablePad（4.0.4）
Gmail 内で表示される広告の星（レーティング）と同じ色です。やっぱり「黄金」が落ち着きます！
▲ スポンサードリンク
対応方法
実装は、テーマで対応します。以下の「android:theme="@style/Gnt.RatingBar.Small"」を新たに作成します。
res/layout/gnt_small_template_view.xml
<RatingBar
android:id="@+id/rating_bar"
android:theme="@style/Gnt.RatingBar.Small"
style="?android:attr/ratingBarStyleSmall"
android:background="@color/gnt_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:numStars="5"
android:max="50"
android:stepSize="0.1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/ad_notification_view"
app:layout_constraintTop_toTopOf="parent" />res/values/styles.xml
<resources>
<style name="Gnt.RatingBar.Small" parent="Widget.AppCompat.RatingBar.Small">
<!-- The color applied to framework controls in their normal state. -->
<item name="colorControlNormal">#d6d7d8</item>
<!-- The color applied to framework controls in their activated (ex. checked) state. -->
<item name="colorControlActivated">#f3b713</item>
<!-- Default disabled alpha for widgets that set enabled/disabled alpha programmatically. -->
<item name="android:disabledAlpha">1.0</item>
</style>
</resources>対応は以上で終わりです。
▲ スポンサードリンク
テーマカスタマイズのテクニック
継承している「Widget.AppCompat.RatingBar.Small」の参照を辿っていく（Ctrl+B）と、以下のスタイルを見つけます。
<style name="Widget.Material.RatingBar.Small" parent="Widget.RatingBar.Small">
<item name="progressDrawable">@drawable/ratingbar_small_material</item>
<item name="indeterminateDrawable">@drawable/ratingbar_small_material</item>
<item name="minHeight">16dp</item>
<item name="maxHeight">16dp</item>
</style>星（レーティング）は「progressDrawable」のことなので、さらに「@drawable/ratingbar_small_material」を見てみます。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/background">
<bitmap
android:src="@drawable/ic_star_black_16dp"
android:tint="?attr/colorControlNormal"
android:alpha="?attr/disabledAlpha" />
</item>
<item android:id="@+id/secondaryProgress">
<bitmap
android:src="@drawable/ic_star_half_black_16dp"
android:tint="?attr/colorControlActivated" />
</item>
<item android:id="@+id/progress">
<bitmap
android:src="@drawable/ic_star_black_16dp"
android:tint="?attr/colorControlActivated"
android:tileModeX="repeat" />
</item>
</layer-list>レイヤー構造になっていて、「android:tint="?attr/colorControlNormal"」と「android:alpha="?attr/disabledAlpha"」を背景に、「android:tint="?attr/colorControlActivated"」を重ねていることが分かります。
つまり、この 3 属性をカスタマイズすれば、星（レーティング）の色（スタイル）を変更できるのです。
その結果が、以下の作成したテーマです。
res/values/styles.xml
<resources>
<style name="Gnt.RatingBar.Small" parent="Widget.AppCompat.RatingBar.Small">
<!-- The color applied to framework controls in their normal state. -->
<item name="colorControlNormal">#d6d7d8</item>
<!-- The color applied to framework controls in their activated (ex. checked) state. -->
<item name="colorControlActivated">#f3b713</item>
<!-- Default disabled alpha for widgets that set enabled/disabled alpha programmatically. -->
<item name="android:disabledAlpha">1.0</item>
</style>
</resources>知ってしまえば、簡単です！
▲ スポンサードリンク