Created outline for rating star images

ultrasonic/src/main/kotlin/org/moire/ultrasonic/fragment/PlayerFragment.kt

@@ -8,13 +8,17 @@
 package org.moire.ultrasonic.fragment
 
 import android.annotation.SuppressLint
+import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Color.argb
 import android.graphics.Point
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.LayerDrawable
 import android.os.Build
 import android.os.Bundle
 import android.os.Handler
 import android.os.Looper
+import android.util.TypedValue
 import android.view.GestureDetector
 import android.view.LayoutInflater
 import android.view.Menu
@@ -34,6 +38,8 @@ import android.widget.SeekBar.OnSeekBarChangeListener
 import android.widget.TextView
 import android.widget.Toast
 import android.widget.ViewFlipper
+import androidx.annotation.AttrRes
+import androidx.annotation.ColorInt
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.core.content.res.ResourcesCompat
 import androidx.core.view.MenuHost
@@ -52,6 +58,7 @@ import androidx.recyclerview.widget.ItemTouchHelper.ACTION_STATE_DRAG
 import androidx.recyclerview.widget.ItemTouchHelper.ACTION_STATE_IDLE
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
+import com.google.android.material.R as RM
 import com.google.android.material.button.MaterialButton
 import com.google.android.material.progressindicator.CircularProgressIndicator
 import io.reactivex.rxjava3.disposables.CompositeDisposable
@@ -167,8 +174,10 @@ class PlayerFragment :
     private lateinit var repeatButton: MaterialButton
     private lateinit var progressBar: SeekBar
     private lateinit var progressIndicator: CircularProgressIndicator
-    private val hollowStar = R.drawable.ic_star_hollow
-    private val fullStar = R.drawable.ic_star_full
+    private val hollowStar = R.drawable.star_hollow_outline
+    private val fullStar = R.drawable.star_full_outline
+    private lateinit var hollowStarDrawable: Drawable
+    private lateinit var fullStarDrawable: Drawable
 
     private var _binding: CurrentPlayingBinding? = null
     // This property is only valid between onCreateView and
@@ -270,6 +279,11 @@ class PlayerFragment :
         val ratingLinearLayout = view.findViewById<LinearLayout>(R.id.song_rating)
         if (!useFiveStarRating) ratingLinearLayout.isVisible = false
 
+        hollowStarDrawable = ResourcesCompat.getDrawable(resources, hollowStar, null)!!
+        fullStarDrawable = ResourcesCompat.getDrawable(resources, fullStar, null)!!
+        setLayerDrawableColors(hollowStarDrawable as LayerDrawable)
+        setLayerDrawableColors(fullStarDrawable as LayerDrawable)
+
         fiveStar1ImageView.setOnClickListener { setSongRating(1) }
         fiveStar2ImageView.setOnClickListener { setSongRating(2) }
         fiveStar3ImageView.setOnClickListener { setSongRating(3) }
@@ -1100,7 +1114,7 @@ class PlayerFragment :
                 it.loadImage(albumArtImageView, currentSong, true, 0)
             }
 
-            updateSongRating()
+            updateSongRatingDisplay()
         } else {
             currentSong = null
             songTitleTextView.text = null
@@ -1115,7 +1129,7 @@ class PlayerFragment :
             }
         }
 
-        updateSongRating()
+        updateSongRatingDisplay()
 
         updateMediaButtonActivationState()
     }
@@ -1276,20 +1290,36 @@ class PlayerFragment :
         return false
     }
 
-    private fun updateSongRating() {
+    private fun updateSongRatingDisplay() {
         val rating = currentSong?.userRating ?: 0
 
-        fiveStar1ImageView.setImageResource(if (rating > 0) fullStar else hollowStar)
-        fiveStar2ImageView.setImageResource(if (rating > 1) fullStar else hollowStar)
-        fiveStar3ImageView.setImageResource(if (rating > 2) fullStar else hollowStar)
-        fiveStar4ImageView.setImageResource(if (rating > 3) fullStar else hollowStar)
-        fiveStar5ImageView.setImageResource(if (rating > 4) fullStar else hollowStar)
+        fiveStar1ImageView.setImageDrawable(getStarForRating(rating, 0))
+        fiveStar2ImageView.setImageDrawable(getStarForRating(rating, 1))
+        fiveStar3ImageView.setImageDrawable(getStarForRating(rating, 2))
+        fiveStar4ImageView.setImageDrawable(getStarForRating(rating, 3))
+        fiveStar5ImageView.setImageDrawable(getStarForRating(rating, 4))
     }
 
+    private fun getStarForRating(rating: Int, position: Int): Drawable {
+        return if (rating > position) fullStarDrawable else hollowStarDrawable
+    }
+
+    private fun setLayerDrawableColors(drawable: LayerDrawable) {
+        drawable.apply {
+            getDrawable(0).setTint(requireContext().themeColor(RM.attr.colorSurface))
+            getDrawable(1).setTint(requireContext().themeColor(RM.attr.colorAccent))
+        }
+    }
+
+    @ColorInt
+    fun Context.themeColor(@AttrRes attrRes: Int): Int = TypedValue()
+        .apply { theme.resolveAttribute(attrRes, this, true) }
+        .data
+
     private fun setSongRating(rating: Int) {
         if (currentSong == null) return
         currentSong?.userRating = rating
-        updateSongRating()
+        updateSongRatingDisplay()
 
         RxBus.ratingSubmitter.onNext(
             RatingUpdate(

ultrasonic/src/main/res/drawable/ic_star_full_outline.xml

@@ -0,0 +1,17 @@
+<!--
+  ~ ic_star_full_outline.xml
+  ~ Copyright (C) 2009-2023 Ultrasonic developers
+  ~
+  ~ Distributed under terms of the GNU GPLv3 license.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,17.27 L18.18,21 16.54,13.97 22,9.24 14.81,8.63 12,2 9.19,8.63 2,9.24 7.46,13.97 5.82,21Z"
+      android:strokeWidth="0.6"
+      android:strokeColor="#000000"/>
+</vector>

ultrasonic/src/main/res/drawable/ic_star_hollow_outline.xml

@@ -0,0 +1,17 @@
+<!--
+  ~ ic_star_hollow_outline.xml
+  ~ Copyright (C) 2009-2023 Ultrasonic developers
+  ~
+  ~ Distributed under terms of the GNU GPLv3 license.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M22,9.24 L14.81,8.62 12,2 9.19,8.63 2,9.24 7.46,13.97 5.82,21 12,17.27 18.18,21 16.55,13.97ZM12,15.4 L8.24,17.67 9.24,13.39 5.92,10.51 10.3,10.13 12,6.1 13.71,10.14 18.09,10.52 14.77,13.4 15.77,17.68z"
+      android:strokeWidth="0.4"
+      android:strokeColor="#000000"/>
+</vector>

ultrasonic/src/main/res/drawable/star_full_outline.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/ic_star_full" />
+    <item android:drawable="@drawable/ic_star_full_outline" />
+</layer-list>

ultrasonic/src/main/res/drawable/star_hollow_outline.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/ic_star_hollow" />
+    <item android:drawable="@drawable/ic_star_hollow_outline" />
+</layer-list>

ultrasonic/src/main/res/layout-land/current_playing.xml

@@ -56,7 +56,7 @@
                         a:importantForAccessibility="no"
                         a:padding="10dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_2"
@@ -69,7 +69,7 @@
                         a:importantForAccessibility="no"
                         a:padding="10dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_3"
@@ -82,7 +82,7 @@
                         a:importantForAccessibility="no"
                         a:padding="10dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_4"
@@ -95,7 +95,7 @@
                         a:importantForAccessibility="no"
                         a:padding="10dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_5"
@@ -108,7 +108,7 @@
                         a:importantForAccessibility="no"
                         a:padding="10dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow" />
+                        a:src="@drawable/star_hollow_outline" />
 
                 </LinearLayout>
 

ultrasonic/src/main/res/layout/current_playing.xml

@@ -48,65 +48,65 @@
                         a:layout_width="0dip"
                         a:layout_height="fill_parent"
                         a:layout_weight="1"
-                        a:padding="5dip"
                         a:background="@android:color/transparent"
                         a:focusable="false"
                         a:gravity="center_vertical"
+                        a:importantForAccessibility="no"
+                        a:padding="5dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow"
-                        a:importantForAccessibility="no" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_2"
                         a:layout_width="0dip"
                         a:layout_height="fill_parent"
                         a:layout_weight="1"
-                        a:padding="5dip"
                         a:background="@android:color/transparent"
                         a:focusable="false"
                         a:gravity="center_vertical"
+                        a:importantForAccessibility="no"
+                        a:padding="5dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow"
-                        a:importantForAccessibility="no" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_3"
                         a:layout_width="0dip"
                         a:layout_height="fill_parent"
                         a:layout_weight="1"
-                        a:padding="5dip"
                         a:background="@android:color/transparent"
                         a:focusable="false"
                         a:gravity="center_vertical"
+                        a:importantForAccessibility="no"
+                        a:padding="5dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow"
-                        a:importantForAccessibility="no" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_4"
                         a:layout_width="0dip"
                         a:layout_height="fill_parent"
                         a:layout_weight="1"
-                        a:padding="5dip"
                         a:background="@android:color/transparent"
                         a:focusable="false"
                         a:gravity="center_vertical"
+                        a:importantForAccessibility="no"
+                        a:padding="5dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow"
-                        a:importantForAccessibility="no" />
+                        a:src="@drawable/star_hollow_outline" />
 
                     <ImageView
                         a:id="@+id/song_five_star_5"
                         a:layout_width="0dip"
                         a:layout_height="fill_parent"
                         a:layout_weight="1"
-                        a:padding="5dip"
                         a:background="@android:color/transparent"
                         a:focusable="false"
                         a:gravity="center_vertical"
+                        a:importantForAccessibility="no"
+                        a:padding="5dip"
                         a:scaleType="fitCenter"
-                        a:src="@drawable/ic_star_hollow"
-                        a:importantForAccessibility="no" />
+                        a:src="@drawable/star_hollow_outline" />
 
                 </LinearLayout>
             </LinearLayout>