create player bottom ui

app/build.gradle.kts

@@ -51,6 +51,8 @@ dependencies {
     implementation(libs.androidx.constraintlayout)
     implementation(libs.androidx.activity.compose)
     implementation(libs.androidx.material3)
+    implementation(libs.androidx.ui.tooling)
+    implementation(libs.androidx.material.icons.extended.android)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/net/newpipe/newplayer/PlayerFragment.kt

@@ -5,12 +5,11 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.fragment.app.Fragment
-import androidx.compose.material3.Text
 import net.newpipe.newplayer.ui.PlayerUI
+import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
 
 class PlayerFragment : Fragment() {
 
@@ -25,7 +24,9 @@ class PlayerFragment : Fragment() {
         composeView.apply {
             setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
             setContent {
-                PlayerUI(activity as Activity)
+                VideoPlayerTheme {
+                    PlayerUI()
+                }
             }
         }
         return view

app/src/main/java/net/newpipe/newplayer/ui/PlayerUI.kt

@@ -2,43 +2,82 @@ package net.newpipe.newplayer.ui
 
 import android.app.Activity
 import android.content.pm.ActivityInfo
+
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Button
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Fullscreen
+import androidx.compose.material.icons.filled.ShoppingCart
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Slider
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import net.newpipe.newplayer.ui.theme.AppTheme
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
+import androidx.compose.ui.unit.dp
 import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
 
 @Composable
-fun PlayerUI(activity: Activity) {
+fun PlayerUI() {
-    var isFullscreen = rememberSaveable { mutableStateOf(false) }
 
-    if (isFullscreen.value)  {
+    Surface(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White)
+    ) {
+        Box() {
+            BottomUI(modifier = Modifier
+                .align(Alignment.BottomStart)
+                .padding(start = 16.dp, end = 16.dp)
+                .defaultMinSize(minHeight = 40.dp)
+                .fillMaxWidth())
+        }
+        Text("hello gurken")
+    }
+}
+
+@Composable
+private fun CenterUI(modifier: Modifier) {
+
+}
+
+@Composable
+private fun BottomUI(modifier: Modifier) {
+    var isFullscreen: Boolean by rememberSaveable { mutableStateOf(false) }
+
+    if (isFullscreen) {
         LockScreenOrientation(orientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE)
     }
-    
-    VideoPlayerTheme() {
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(Color.Black)
-        ) {
-            Text(
-                "hello gurken",
-                color = Color.White
-            )
-            Button(onClick = { isFullscreen.value = !isFullscreen.value }) {
-                Text("Switch to fullscreen")
-            }
-        }
 
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = modifier
+    ) {
+        Text("06:45")
+        Slider(value = 0.4F, onValueChange = {}, modifier = Modifier.weight(1F))
+        Text("09:40")
+        IconButton(onClick = { isFullscreen = !isFullscreen }) {
+            Icon(
+                imageVector = Icons.Filled.Fullscreen,
+                contentDescription = "Fullscreen"
+            )
+        }
     }
 }
 
@@ -46,3 +85,11 @@ fun PlayerUI(activity: Activity) {
 private fun ViewInFullScreen() {
     LockScreenOrientation(orientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE)
 }
+
+@Preview
+@Composable
+fun PlayerUIPreview() {
+    VideoPlayerTheme {
+        PlayerUI()
+    }
+}

app/src/main/java/net/newpipe/newplayer/ui/theme/Color.kt

@@ -2,10 +2,34 @@ package net.newpipe.newplayer.ui.theme
 
 import androidx.compose.ui.graphics.Color
 
-val Purple80 = Color(0xFFD0BCFF)
+val video_player_primary = Color(0xFFE53935)
-val PurpleGrey80 = Color(0xFFCCC2DC)
+val video_player_onPrimary = Color(0xFF452B00)
-val Pink80 = Color(0xFFEFB8C8)
+val video_player_primaryContainer = Color(0xFF633F00)
+val video_player_onPrimaryContainer = Color(0xFFFFDDB3)
+val video_player_secondary = Color(0xFFDDC2A1)
+val video_player_onSecondary = Color(0xFF3E2D16)
+val video_player_secondaryContainer = Color(0xFF56442A)
+val video_player_onSecondaryContainer = Color(0xFFFBDEBC)
+val video_player_tertiary = Color(0xFFB8CEA1)
+val video_player_onTertiary = Color(0xFF243515)
+val video_player_tertiaryContainer = Color(0xFF3A4C2A)
+val video_player_onTertiaryContainer = Color(0xFFD4EABB)
+val video_player_error = Color(0xFFFFB4AB)
+val video_player_errorContainer = Color(0xFF93000A)
+val video_player_onError = Color(0xFF690005)
+val video_player_onErrorContainer = Color(0xFFFFDAD6)
+val video_player_background = Color(0xFF1F1B16)
+val video_player_onBackground = Color(0xFFEAE1D9)
+val video_player_surface = Color(0xFF000000)
+val video_player_onSurface = Color(0xFFEAE1D9)
+val video_player_surfaceVariant = Color(0xFF4F4539)
+val video_player_onSurfaceVariant = Color(0xFFD3C4B4)
+val video_player_outline = Color(0xFF9C8F80)
+val video_player_inverseOnSurface = Color(0xFF1F1B16)
+val video_player_inverseSurface = Color(0xFFEAE1D9)
+val video_player_inversePrimary = Color(0xFF825500)
+val video_player_shadow = Color(0xFF000000)
+val video_player_surfaceTint = Color(0xFFFFB951)
+val video_player_outlineVariant = Color(0xFF4F4539)
+val video_player_scrim = Color(0xFF000000)
 
-val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)

app/src/main/java/net/newpipe/newplayer/ui/theme/Theme.kt

@@ -6,12 +6,36 @@ import androidx.compose.material3.darkColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
-private val DarkColorScheme = darkColorScheme(
+private val VideoPlayerColorScheme = darkColorScheme(
-    primary = Purple80,
+    primary = video_player_primary,
-    secondary = PurpleGrey80,
+    onPrimary = video_player_onPrimary,
-    tertiary = Pink80,
+    primaryContainer = video_player_primaryContainer,
-    onBackground = Color(0xFF1C1B1F),
+    onPrimaryContainer = video_player_onPrimaryContainer,
-    background = Color.Black,
+    secondary = video_player_secondary,
+    onSecondary = video_player_onSecondary,
+    secondaryContainer = video_player_secondaryContainer,
+    onSecondaryContainer = video_player_onSecondaryContainer,
+    tertiary = video_player_tertiary,
+    onTertiary = video_player_onTertiary,
+    tertiaryContainer = video_player_tertiaryContainer,
+    onTertiaryContainer = video_player_onTertiaryContainer,
+    error = video_player_error,
+    errorContainer = video_player_errorContainer,
+    onError = video_player_onError,
+    onErrorContainer = video_player_onErrorContainer,
+    background = video_player_background,
+    onBackground = video_player_onBackground,
+    surface = video_player_surface,
+    onSurface = video_player_onSurface,
+    surfaceVariant = video_player_surfaceVariant,
+    onSurfaceVariant = video_player_onSurfaceVariant,
+    outline = video_player_outline,
+    inverseOnSurface = video_player_inverseOnSurface,
+    inverseSurface = video_player_inverseSurface,
+    inversePrimary = video_player_inversePrimary,
+    surfaceTint = video_player_surfaceTint,
+    outlineVariant = video_player_outlineVariant,
+    scrim = video_player_scrim,
 )
 
 @Composable
@@ -19,7 +43,7 @@ fun VideoPlayerTheme(
     content: @Composable () -> Unit
 ) {
     MaterialTheme(
-        colorScheme = DarkColorScheme,
+        colorScheme = VideoPlayerColorScheme,
         typography = Typography,
         content = content
     )

gradle/libs.versions.toml

@@ -11,6 +11,8 @@ activity = "1.9.0"
 constraintlayout = "2.1.4"
 activityCompose = "1.9.0"
 material3 = "1.2.1"
+uiTooling = "1.6.8"
+materialIconsExtendedAndroid = "1.7.0-beta04"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -23,6 +25,8 @@ androidx-activity = { group = "androidx.activity", name = "activity", version.re
 androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "constraintlayout" }
 androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }
+androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "uiTooling" }
+androidx-material-icons-extended-android = { group = "androidx.compose.material", name = "material-icons-extended-android", version.ref = "materialIconsExtendedAndroid" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }