Completed custom fm ui and implemented player, callbacks and volume toggling.

.idea/other.xml

@@ -179,17 +179,6 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2400" />
         </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="31" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="q2q" />
-          <option name="id" value="q2q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Z Fold3" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1768" />
-          <option name="screenY" value="2208" />
-        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="samsung" />

app/src/main/java/com/woka/home/views/FMActivity.kt

@@ -2,24 +2,34 @@ package com.woka.home.views
 
 import android.annotation.SuppressLint
 import android.graphics.Color
-import android.os.Build
 import android.os.Bundle
-import android.webkit.WebSettings
-import android.webkit.WebViewClient
+import android.util.Log
 import androidx.activity.enableEdgeToEdge
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
+import androidx.media3.common.MediaItem
+import androidx.media3.common.Player
+import androidx.media3.exoplayer.ExoPlayer
 import com.woka.R
 import com.woka.databinding.ActivityFmactivityBinding
+import com.woka.utils.TAG
 import com.woka.utils.WokaBaseActivity
+import com.woka.utils.hide
+import com.woka.utils.show
+import com.woka.utils.toast
+import kotlin.math.max
+import kotlin.math.min
+import kotlin.math.round
 
 class FMActivity : WokaBaseActivity() {
 
-    companion object{
-        private const val FM_URL = "https://wokastaging.in/api/woka_fm"
+    companion object {
+        private const val FM_URL = "https://stream.rcast.net/71643"
+        private const val VOLUME_STEP = 0.2f
     }
 
     private lateinit var binding: ActivityFmactivityBinding
+    private lateinit var player: ExoPlayer
 
     @SuppressLint("SetJavaScriptEnabled")
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -35,7 +45,29 @@ class FMActivity : WokaBaseActivity() {
 
         window.navigationBarColor = Color.BLACK
 
+        player = ExoPlayer.Builder(this).build()
+
+        initPlayer()
+
         clickEvents()
+
+        setObservers()
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        player.stop()
+        player.release()
+    }
+
+    private fun initPlayer() {
+        binding.playBtn.hide()
+        binding.progressBar.show()
+
+        player.setMediaItem(MediaItem.fromUri(FM_URL))
+        player.playWhenReady = true
+        player.volume = 0.6f
+        player.prepare()
     }
 
     private fun clickEvents() {
@@ -43,7 +75,71 @@ class FMActivity : WokaBaseActivity() {
             root.setOnClickListener {
                 onBackPressedDispatcher.onBackPressed()
             }
+
+            fmView.setOnClickListener {}
+
+            playBtn.setOnClickListener {
+                if (player.isPlaying) player.pause()
+                else player.play()
+            }
+
+            volumeDown.setOnClickListener {
+                if (player.volume == 0.0f){
+                    return@setOnClickListener
+                }
+
+                player.volume = max(0.0f, player.volume - VOLUME_STEP)
+
+                updateVolumeButtons()
+            }
+
+            volumeUp.setOnClickListener {
+                if (player.volume == 1.0f){
+                    return@setOnClickListener
+                }
+
+                player.volume = min(1.0f, player.volume + VOLUME_STEP)
+
+                updateVolumeButtons()
+            }
         }
     }
 
+    private fun setObservers() {
+        player.addListener(object : Player.Listener {
+            override fun onIsPlayingChanged(isPlaying: Boolean) {
+                super.onIsPlayingChanged(isPlaying)
+                binding.playBtn.show()
+
+                binding.playBtn.setImageResource(
+                    if (isPlaying) {
+                        R.drawable.ic_pause_filled
+                    } else {
+                        R.drawable.ic_play_filled_2
+                    }
+                )
+            }
+        })
+    }
+
+    private fun updateVolumeButtons(){
+        val volume = (Math.round(player.volume * 10) / 10.0).toFloat()
+        Log.d(TAG, "updateVolumeButtons: $volume")
+        binding.apply {
+            when {
+                volume <= 0.0f -> {
+                    volumeDown.alpha = 0.5f
+                    volumeUp.alpha = 1f
+                }
+                volume >= 1f -> {
+                    volumeUp.alpha = 0.5f
+                    volumeDown.alpha = 1f
+                }
+                else -> {
+                    volumeUp.alpha = 1f
+                    volumeDown.alpha = 1f
+                }
+            }
+        }
+    }
 }

app/src/main/res/drawable/gradient_fm_play.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <gradient android:angle="180"
+        android:startColor="#9742E4"
+        android:endColor="#5E1FC4"/>
+
+    <corners
+        android:radius="@dimen/_30sdp"
+        />
+</shape>

app/src/main/res/drawable/ic_pause_filled.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="512" android:viewportWidth="512" android:width="24dp">
+      
+    <path android:fillColor="#000000" android:pathData="M256,0C114.63,0 0,114.63 0,256c0,141.37 114.63,256 256,256s256,-114.63 256,-256C512,114.63 397.38,0 256,0zM224,336h-64V176h64V336zM352,336h-64V176h64V336z"/>
+    
+</vector>

app/src/main/res/drawable/ic_play_filled_2.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="512"
+    android:viewportHeight="512">
+
+    <path
+        android:fillColor="#000000"
+        android:pathData="M256,0C114.63,0 0,114.63 0,256c0,141.37 114.63,256 256,256c141.37,0 256,-114.63 256,-256C512,114.63 397.37,0 256,0zM351.06,258.9l-144,85.94c-1.03,0.63 -2.34,0.66 -3.41,0.03c-1.03,-0.59 -1.69,-1.7 -1.69,-2.94v-85.95v-85.95c0,-1.22 0.66,-2.34 1.69,-2.94c1.06,-0.61 2.38,-0.58 3.41,0.03l144,85.96c1.03,0.59 1.64,1.72 1.64,2.89C352.7,257.19 352.09,258.3 351.06,258.9z" />
+
+</vector>

app/src/main/res/layout/activity_fmactivity.xml

@@ -24,12 +24,12 @@
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/fm_view"
+        app:layout_constraintBottom_toBottomOf="parent"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:padding="15dp"
         android:orientation="vertical"
-        android:background="@drawable/img_fm_bg"
-        app:layout_constraintBottom_toBottomOf="parent">
+        android:background="@drawable/img_fm_bg">
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -45,20 +45,99 @@
                 android:scaleType="fitXY"
                 />
 
-            <RelativeLayout
+            <androidx.constraintlayout.widget.ConstraintLayout
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content">
 
                 <ImageView
+                    android:id="@+id/img1"
                     android:layout_width="@dimen/_260sdp"
                     android:layout_height="@dimen/_120sdp"
                     android:src="@drawable/img_fm_1"
                     android:contentDescription="@string/image"
                     android:scaleType="fitXY"
                     android:layout_marginTop="-20dp"
+                    app:layout_constraintTop_toTopOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
                     />
 
-            </RelativeLayout>
+                <View
+                    android:id="@+id/volume_view"
+                    android:layout_width="@dimen/_150sdp"
+                    android:layout_height="@dimen/_40sdp"
+                    android:background="@drawable/gradient_fm"
+                    android:layout_below="@id/img1"
+                    app:layout_constraintTop_toBottomOf="@id/img1"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"/>
+
+                <ImageView
+                    android:id="@+id/volume_down"
+                    android:layout_width="@dimen/_20sdp"
+                    android:layout_height="@dimen/_20sdp"
+                    android:contentDescription="@string/image"
+                    android:src="@drawable/ic_like_filled"
+                    app:tint="@color/white"
+
+                    app:layout_constraintTop_toTopOf="@id/volume_view"
+                    app:layout_constraintBottom_toBottomOf="@id/volume_view"
+                    app:layout_constraintStart_toStartOf="@id/volume_view"
+                    app:layout_constraintEnd_toStartOf="@id/play_btn_view"
+                    />
+
+                <ImageView
+                    android:id="@+id/volume_up"
+                    android:layout_width="@dimen/_20sdp"
+                    android:layout_height="@dimen/_20sdp"
+                    android:contentDescription="@string/image"
+                    android:src="@drawable/ic_like_filled"
+                    app:tint="@color/white"
+
+                    app:layout_constraintTop_toTopOf="@id/volume_view"
+                    app:layout_constraintBottom_toBottomOf="@id/volume_view"
+                    app:layout_constraintEnd_toEndOf="@id/volume_view"
+                    app:layout_constraintStart_toEndOf="@id/play_btn_view"
+                    />
+
+                <RelativeLayout
+                    android:id="@+id/play_btn_view"
+                    android:layout_width="@dimen/_50sdp"
+                    android:layout_height="@dimen/_50sdp"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintTop_toTopOf="@id/volume_view"
+                    app:layout_constraintBottom_toBottomOf="@id/volume_view"
+
+                    android:background="@drawable/gradient_fm_play"
+                    >
+
+                    <ImageView
+                        android:id="@+id/play_btn"
+                        android:visibility="gone"
+                        android:layout_width="match_parent"
+                        android:layout_height="match_parent"
+                        android:contentDescription="@string/image"
+                        android:src="@drawable/ic_play_filled_2"
+                        android:layout_margin="12dp"
+                        android:scaleType="fitXY"
+                        app:tint="@color/white" />
+
+                    <ProgressBar
+                        android:id="@+id/progress_bar"
+                        android:visibility="gone"
+                        android:layout_width="match_parent"
+                        android:layout_height="match_parent"
+
+                        android:layout_margin="12dp"
+
+                        android:indeterminateTint="@color/white"
+                        android:indeterminate="true"
+                        />
+
+                </RelativeLayout>
+
+            </androidx.constraintlayout.widget.ConstraintLayout>
 
             <ImageView
                 android:layout_width="@dimen/_140sdp"