Music Player in Jetpack Compose

A Music Player Android App is a mobile application developed to play and manage audio files such as songs, podcasts, and other sound files on Android devices. These apps typically provide features like:

Play, Pause, and Stop: Basic controls for starting, pausing, and stopping music.
Playlist Management: Ability to create, edit, and delete playlists.
Shuffle and Repeat: Options to shuffle the playback order of songs or repeat tracks or playlists.
Background Playback: Ability to keep playing music even when the app is minimized or the phone screen is off.
Notification Controls: Control playback (like pause or skip) from the notification panel.
Seek Bar: Allows users to skip to different parts of the track.
Media Metadata: Display of album art, track title, artist name, and other information.
Media Control Integration: Compatibility with hardware controls like headphones or Bluetooth devices for playback control.
Equalizer Settings: Adjustments for sound effects, bass, and treble.
Offline Playback: Ability to play songs stored locally on the device.

Music player apps can also support different audio formats (MP3, WAV, AAC, FLAC, etc.) and can include features like online streaming, lyrics display, or integration with cloud services depending on the functionality the developer wants to implement.

Welcome to Coding Bihar Jetpack Compose Tutorial, In this tutorial we will learn to build a simple music player app using Jetpack Compose. The best thing of this tutorial is that we are not using any third party library for this app.

How to build a simple MP3 Player App in Jetpack Compose

Building a simple MP3 player app in Jetpack Compose requires handling media playback, file permissions, and UI updates. Here’s a step-by-step guide:

Features of the MP3 Player App

Request storage permission to read MP3 files.
Display a list of songs from the device storage.
Play an MP3 file when clicked.
Show a player screen with play/pause and seek controls.
Support background playback with a Foreground Service and media notifications.
Implement autoplay for the next song.

Step 1: Add Required Dependencies

1.1. Request Storage Permission (Android 13 and above)

For Android 10–12, use READ_EXTERNAL_STORAGE, and for Android 13+, use READ_MEDIA_AUDIO.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

1.2. Add these dependencies in your build.gradle:

implementation ("androidx.navigation:navigation-compose:2.8.7")
implementation("io.coil-kt:coil-compose:2.5.0")

Step 2: Setting Up Navigation

MusicPlayerApp (Main Composable)

NavHost is used for navigation between SongListScreen and PlayerScreen.
The song_list screen shows a list of MP3 files.
The player/{title}/{artist}/{filePath}/{index} screen plays the selected song.


@Composable
fun MusicPlayerApp(mediaPlayer: MediaPlayer) {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "song_list") {
        composable("song_list") {
            SongListScreen(navController) // Pass mediaPlayer here
        }
        composable("player/{title}/{artist}/{filePath}/{index}") { backStackEntry ->
            val title = backStackEntry.arguments?.getString("title") ?: ""
            val artist = backStackEntry.arguments?.getString("artist") ?: ""
            val filePath = backStackEntry.arguments?.getString("filePath") ?: ""
            val index = backStackEntry.arguments?.getString("index")?.toInt() ?: 0
            PlayerScreen(navController, title, artist, filePath, mediaPlayer, index)
        }
    }
}

Step 3: Requesting Permission & Fetching Songs

RequestPermission Composable


@Composable
fun RequestPermission(onGranted: () -> Unit) {
    val context = LocalContext.current
    val permission = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
        android.Manifest.permission.READ_MEDIA_AUDIO
    } else {
        android.Manifest.permission.READ_EXTERNAL_STORAGE
    }

    val permissionLauncher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.RequestPermission()
    ) { isGranted ->
        if (isGranted) {
            onGranted()
        } else {
            Toast.makeText(context, "Permission denied", Toast.LENGTH_SHORT).show()
        }
    }

    LaunchedEffect(Unit) {
        permissionLauncher.launch(permission)
    }
}

Step 4: Fetch MP3 Files from Storage


fun fetchSongsFromDevice(context: Context): List<Song> {
    val songList = mutableListOf<Song>()
    val contentResolver = context.contentResolver
    val uri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI

    val projection = arrayOf(
        MediaStore.Audio.Media._ID,
        MediaStore.Audio.Media.TITLE,
        MediaStore.Audio.Media.ARTIST,
        MediaStore.Audio.Media.DATA // File path for the song
    )

    val selection = MediaStore.Audio.Media.IS_MUSIC + "!= 0"
    val cursor = contentResolver.query(uri, projection, selection, null, null)

    cursor?.use {
        val idColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media._ID)
        val titleColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media.TITLE)
        val artistColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media.ARTIST)
        val dataColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media.DATA)

        while (it.moveToNext()) {
            val id = it.getLong(idColumn)
            val title = it.getString(titleColumn)
            val artist = it.getString(artistColumn)
            val data = it.getString(dataColumn)

            songList.add(Song(id, title, artist, data))
        }
    }

    return songList
}

Step 5: Display MP3 Songs in List


@Composable
fun SongListScreen(navController: NavHostController) {
    val context = LocalContext.current
    var songs by remember { mutableStateOf(emptyList<Song>()) }

    RequestPermission(onGranted = {
        songs = fetchSongsFromDevice(context)
    })

    Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) {
        if (songs.isEmpty()) {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text("No Songs Found", textAlign = TextAlign.Center)
            }
        } else {
            SongList(songs = songs) { song ->
                // Navigate to the Player Screen with encoded song details
                val index = songs.indexOf(song)
                navController.navigate("player/${Uri.encode(song.title)}/${Uri.encode(song.artist)}/${Uri.encode(song.filePath)}/$index")
            }
        }
    }
}

@Composable
fun SongList(songs: List<Song>, onPlay: (Song) -> Unit) {
    LazyColumn {
        items(songs) { song ->
            Text(
                text = "${song.title} - ${song.artist}",
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onPlay(song) }
                    .padding(16.dp)
            )
        }
    }
}

Request to get permission to read storage

Step 5: Music Player Screen

Uses MediaPlayer to play/pause music.
Shows progress bar for track position.
Handles Next/Previous song navigation.


@Composable
fun PlayerScreen(
    navController: NavHostController,
    title: String,
    artist: String,
    filePath: String,
    mediaPlayer: MediaPlayer,
    currentIndex: Int
) {
    val context = LocalContext.current
    var isPlaying by remember { mutableStateOf(false) }
    var albumArtUri by remember { mutableStateOf<String?>(null) }
    var progress by remember { mutableFloatStateOf(0f) }
    var totalDuration by remember { mutableIntStateOf(0) } // Total duration of the song

    // Use a local variable for songs
    val songs = fetchSongsFromDevice(context)

    LaunchedEffect(filePath) {
        playSong(context, mediaPlayer, filePath) {
            isPlaying = false
        }
        albumArtUri = getAlbumArtUri(context, filePath)
        isPlaying = true

        totalDuration = mediaPlayer.duration // Get the duration of the song
        progress = 0f // Reset progress when the song changes

        // Update progress every second while playing
        while (isPlaying) {
            progress = mediaPlayer.currentPosition.toFloat() / totalDuration // Calculate progress
            delay(1000) // Update every second
        }
    }
    Box(
        Modifier.fillMaxSize()
            .background(Color.Cyan)
    ) {

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .systemBarsPadding()
        ) {
            Text(text = "Now Playing", style = MaterialTheme.typography.titleLarge)
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Text(text = artist, style = MaterialTheme.typography.bodyMedium)

            // Display album art
            if (albumArtUri != null) {
                Image(
                    painter = rememberAsyncImagePainter(model = albumArtUri),
                    contentDescription = "Album Art",
                    modifier = Modifier
                        .size(128.dp)
                        .align(Alignment.CenterHorizontally)
                        .clip(RoundedCornerShape(8.dp)),
                    contentScale = ContentScale.Crop
                )
            } else {
                Image(
                    painter = painterResource(R.drawable.ic_launcher_background),
                    contentDescription = "Album Art",
                    modifier = Modifier
                        .size(128.dp)
                        .align(Alignment.CenterHorizontally)
                        .clip(RoundedCornerShape(8.dp)),
                    contentScale = ContentScale.Crop
                )
            }

            // Linear Progress Indicator
            LinearProgressIndicator(
                progress = { progress },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 16.dp),
                color = Color.Cyan,
                // color = MaterialTheme.colors.primary,
            )

            // Control Buttons
            Row(
                horizontalArrangement = Arrangement.SpaceAround,
                modifier = Modifier.fillMaxWidth().padding(top = 16.dp)
            ) {
                IconButton(onClick = {
                    // Previous song
                    val prevIndex = if (currentIndex > 0) currentIndex - 1 else songs.size - 1
                    val prevSong = songs[prevIndex]
                    navController.navigate(
                        "player/${Uri.encode(prevSong.title)}/${Uri.encode(prevSong.artist)}/${
                            Uri.encode(
                                prevSong.filePath
                            )
                        }/$prevIndex"
                    )
                }) {
                    Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = "Previous")
                }

                IconButton(onClick = {
                    if (isPlaying) {
                        mediaPlayer.pause()
                        isPlaying = false
                    } else {
                        mediaPlayer.start()
                        isPlaying = true
                    }
                }) {
                    Icon(
                        imageVector = if (isPlaying) Icons.Default.Close else Icons.Default.PlayArrow,
                        contentDescription = "Play/Pause"
                    )
                }

                IconButton(onClick = {
                    // Next song
                    val nextIndex = (currentIndex + 1) % songs.size
                    val nextSong = songs[nextIndex]
                    navController.navigate(
                        "player/${Uri.encode(nextSong.title)}/${Uri.encode(nextSong.artist)}/${
                            Uri.encode(
                                nextSong.filePath
                            )
                        }/$nextIndex"
                    )
                }) {
                    Icon(imageVector = Icons.Default.PlayArrow, contentDescription = "Next")
                }
            }
        }
    }
}

Step 6: Playing the Song

fun playSong(context: Context, mediaPlayer: MediaPlayer, filePath: String, onCompletion: () -> Unit) {
    try {
        Log.d("MediaPlayer", "Playing song with filePath: $filePath")
        mediaPlayer.reset()  // Stop the current song if playing
        mediaPlayer.setDataSource(filePath)  // Check filePath here
        mediaPlayer.prepare()
        mediaPlayer.start()

        mediaPlayer.setOnCompletionListener {
            onCompletion()  // When the song completes, trigger the callback
        }
    } catch (e: Exception) {
        e.printStackTrace()
        Toast.makeText(context, "Error playing song: ${e.message}", Toast.LENGTH_SHORT).show()
    }
}

Full Code is below:

package com.codingbihar.mp3musicplayer

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.media.MediaMetadataRetriever
import android.media.MediaPlayer
import android.net.Uri
import android.os.Build
import android.provider.MediaStore
import android.util.Log
import android.widget.Toast
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.IconButton
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import coil.compose.rememberAsyncImagePainter
import kotlinx.coroutines.delay
import java.io.File

@Composable
fun MusicPlayerApp(mediaPlayer: MediaPlayer) {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "song_list") {
        composable("song_list") {
            SongListScreen(navController) // Pass mediaPlayer here
        }
        composable("player/{title}/{artist}/{filePath}/{index}") { backStackEntry ->
            val title = backStackEntry.arguments?.getString("title") ?: ""
            val artist = backStackEntry.arguments?.getString("artist") ?: ""
            val filePath = backStackEntry.arguments?.getString("filePath") ?: ""
            val index = backStackEntry.arguments?.getString("index")?.toInt() ?: 0
            PlayerScreen(navController, title, artist, filePath, mediaPlayer, index)
        }
    }
}

@Composable
fun SongListScreen(navController: NavHostController) {
    val context = LocalContext.current
    var songs by remember { mutableStateOf(emptyList<Song>()) }

    RequestPermission(onGranted = {
        songs = fetchSongsFromDevice(context)
    })

    Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) {
        if (songs.isEmpty()) {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text("No Songs Found", textAlign = TextAlign.Center)
            }
        } else {
            SongList(songs = songs) { song ->
                // Navigate to the Player Screen with encoded song details
                val index = songs.indexOf(song)
                navController.navigate("player/${Uri.encode(song.title)}/${Uri.encode(song.artist)}/${Uri.encode(song.filePath)}/$index")
            }
        }
    }
}

@Composable
fun SongList(songs: List<Song>, onPlay: (Song) -> Unit) {

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
   
    ) {

        LazyColumn {
            items(songs) { song ->
                Text(
                    text = "${song.title} - ${song.artist}",
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable { onPlay(song) }
                        .padding(16.dp),
                    fontSize = 20.sp
                )
            }
        }
    }
}

@Composable
fun RequestPermission(onGranted: () -> Unit) {
    val context = LocalContext.current
    val permission = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
        android.Manifest.permission.READ_MEDIA_AUDIO
    } else {
        android.Manifest.permission.READ_EXTERNAL_STORAGE
    }

    val permissionLauncher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.RequestPermission()
    ) { isGranted ->
        if (isGranted) {
            onGranted()
        } else {
            Toast.makeText(context, "Permission denied", Toast.LENGTH_SHORT).show()
        }
    }

    LaunchedEffect(Unit) {
        permissionLauncher.launch(permission)
    }
}

data class Song(
    val id: Long,
    val title: String,
    val artist: String,
    val filePath: String,
    val albumArt: String? = null  // Optional field for album art URI
)

fun fetchSongsFromDevice(context: Context): List<Song> {
    val songList = mutableListOf<Song>()
    val contentResolver = context.contentResolver
    val uri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI

    val projection = arrayOf(
        MediaStore.Audio.Media._ID,
        MediaStore.Audio.Media.TITLE,
        MediaStore.Audio.Media.ARTIST,
        MediaStore.Audio.Media.DATA // File path for the song
    )

    val selection = MediaStore.Audio.Media.IS_MUSIC + "!= 0"
    val cursor = contentResolver.query(uri, projection, selection, null, null)

    cursor?.use {
        val idColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media._ID)
        val titleColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media.TITLE)
        val artistColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media.ARTIST)
        val dataColumn = it.getColumnIndexOrThrow(MediaStore.Audio.Media.DATA)

        while (it.moveToNext()) {
            val id = it.getLong(idColumn)
            val title = it.getString(titleColumn)
            val artist = it.getString(artistColumn)
            val data = it.getString(dataColumn)

            songList.add(Song(id, title, artist, data))
        }
    }

    return songList
}

@Composable
fun PlayerScreen(
    navController: NavHostController,
    title: String,
    artist: String,
    filePath: String,
    mediaPlayer: MediaPlayer,
    currentIndex: Int
) {
    val context = LocalContext.current
    var isPlaying by remember { mutableStateOf(false) }
    var albumArtUri by remember { mutableStateOf<String?>(null) }
    var progress by remember { mutableFloatStateOf(0f) }
    var totalDuration by remember { mutableIntStateOf(0) } // Total duration of the song

    // Use a local variable for songs
    val songs = fetchSongsFromDevice(context)

    LaunchedEffect(filePath) {
        playSong(context, mediaPlayer, filePath) {
            isPlaying = false
        }
        albumArtUri = getAlbumArtUri(context, filePath)
        isPlaying = true

        totalDuration = mediaPlayer.duration // Get the duration of the song
        progress = 0f // Reset progress when the song changes

        // Update progress every second while playing
        while (isPlaying) {
            progress = mediaPlayer.currentPosition.toFloat() / totalDuration // Calculate progress
            delay(1000) // Update every second
        }
    }
    Box(
        Modifier.fillMaxSize()
            .background(Color.Cyan)
    ) {

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .systemBarsPadding()
        ) {
            Text(text = "Now Playing", style = MaterialTheme.typography.titleLarge)
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Text(text = artist, style = MaterialTheme.typography.bodyMedium)

            // Display album art
            if (albumArtUri != null) {
                Image(
                    painter = rememberAsyncImagePainter(model = albumArtUri),
                    contentDescription = "Album Art",
                    modifier = Modifier
                        .size(360.dp)
                        .align(Alignment.CenterHorizontally)
                        .clip(RoundedCornerShape(8.dp)),
                    contentScale = ContentScale.Crop
                )
            } else {
                Image(
                    painter = painterResource(R.drawable.ic_logo),
                    contentDescription = "Album Art",
                    modifier = Modifier
                        .size(128.dp)
                        .align(Alignment.CenterHorizontally)
                        .clip(RoundedCornerShape(8.dp)),
                    contentScale = ContentScale.Crop
                )
            }

            // Linear Progress Indicator
            LinearProgressIndicator(
                progress = { progress },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 16.dp),
                color = Color.Red,
                // color = MaterialTheme.colors.primary,
            )

            // Control Buttons
            Row(
                horizontalArrangement = Arrangement.SpaceAround,
                modifier = Modifier.fillMaxWidth().padding(top = 16.dp)
            ) {
                IconButton(onClick = {
                    // Previous song
                    val prevIndex = if (currentIndex > 0) currentIndex - 1 else songs.size - 1
                    val prevSong = songs[prevIndex]
                    navController.navigate(
                        "player/${Uri.encode(prevSong.title)}/${Uri.encode(prevSong.artist)}/${
                            Uri.encode(
                                prevSong.filePath
                            )
                        }/$prevIndex"
                    )
                }) {
                    Image(painterResource(R.drawable.ic_previous),
                        contentDescription = "previous")
                }

                IconButton(onClick = {
                    if (isPlaying) {
                        mediaPlayer.pause()
                        isPlaying = false
                    } else {
                        mediaPlayer.start()
                        isPlaying = true
                    }
                }) {
                    Image(
                        painterResource( if (isPlaying) R.drawable.ic_pause else R.drawable.ic_play),
                        contentDescription = "Play/Pause"
                    )
                }

                IconButton(onClick = {
                    // Next song
                    val nextIndex = (currentIndex + 1) % songs.size
                    val nextSong = songs[nextIndex]
                    navController.navigate(
                        "player/${Uri.encode(nextSong.title)}/${Uri.encode(nextSong.artist)}/${
                            Uri.encode(
                                nextSong.filePath
                            )
                        }/$nextIndex"
                    )
                }) {

                    Image(painterResource(R.drawable.ic_previous),
                        contentDescription = "next")
                }
            }
        }
    }
}

// Helper functions (playSong, getAlbumArtUri, etc.) remain unchanged.
fun playSong(context: Context, mediaPlayer: MediaPlayer, filePath: String, onCompletion: () -> Unit) {
    try {
        Log.d("MediaPlayer", "Playing song with filePath: $filePath")
        mediaPlayer.reset()  // Stop the current song if playing
        mediaPlayer.setDataSource(filePath)  // Check filePath here
        mediaPlayer.prepare()
        mediaPlayer.start()

        mediaPlayer.setOnCompletionListener {
            onCompletion()  // When the song completes, trigger the callback
        }
    } catch (e: Exception) {
        e.printStackTrace()
        Toast.makeText(context, "Error playing song: ${e.message}", Toast.LENGTH_SHORT).show()
    }
}

fun getAlbumArtUri(context: Context, filePath: String): String? {
    val retriever = MediaMetadataRetriever()
    retriever.setDataSource(filePath)
    val albumArt = retriever.embeddedPicture
    retriever.release()

    return if (albumArt != null) {
        val bitmap = BitmapFactory.decodeByteArray(albumArt, 0, albumArt.size)
        val uri = saveBitmapToCache(context, bitmap)
        uri.toString()
    } else {
        null
    }
}

fun saveBitmapToCache(context: Context, bitmap: Bitmap): Uri {
    val file = File(context.cacheDir, "album_art.jpg")
    file.outputStream().use { out ->
        bitmap.compress(Bitmap.CompressFormat.JPEG, 85, out)
        out.flush()
    }
    return Uri.fromFile(file)
}

package com.codingbihar.mp3musicplayer

import android.media.MediaPlayer
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.codingbihar.mp3musicplayer.ui.theme.Mp3MusicPlayerTheme

class MainActivity : ComponentActivity() {
    private val mediaPlayer = MediaPlayer()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Mp3MusicPlayerTheme {
               // Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->

                    MusicPlayerApp(mediaPlayer)

            }
        }
    }
    override fun onDestroy() {
        super.onDestroy()
        mediaPlayer.release()  // Release the MediaPlayer when the activity is destroyed
    }
}

Final Output of a simple Mp3 Music Player App:

Final Output Music List Screen of Mp3 Music Player App:

Player Screen Final Output of Mp3 Music Player App:

Trending

Static Online Shopping App in Jetpack Compose

How to Create a Table in Jetpack Compose

Collapsing Toolbar in Jetpack Compose

How to build Analog Clock in Jetpack Compose

Text Clock in Android using Jetpack Compose