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>

知ってしまえば、簡単です！

▲ スポンサードリンク