More work
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
index 77ab230..bf1735e 100644
--- a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
@@ -1,6 +1,10 @@
package com.airbnb.lottie.compose
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
@Composable
fun rememberLottieAnimationState(
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
index 7059508..270cde5 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
@@ -6,7 +6,11 @@
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.ScrollableRow
import androidx.compose.foundation.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
@@ -14,7 +18,9 @@
import androidx.compose.runtime.*
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.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
@@ -74,15 +80,19 @@
@Composable
private fun PlayerPage(
spec: LottieAnimationSpec,
- backgroundColor: Color? = null,
+ animationBackgroundColor: Color? = null,
) {
val backPressedDispatcher = BackPressedDispatcherAmbient.current
val compositionResult = rememberLottieComposition(spec)
val animationState = rememberLottieAnimationState(autoPlay = true, repeatCount = Integer.MAX_VALUE)
val scaffoldState = rememberScaffoldState()
var focusMode by remember { mutableStateOf(false) }
- val border = remember { mutableStateOf(false) }
- val speed = remember { mutableStateOf(false) }
+ var backgroundColor by remember { mutableStateOf(animationBackgroundColor) }
+
+ val borderToolbar = remember { mutableStateOf(false) }
+ val speedToolbar = remember { mutableStateOf(false) }
+ val backgroundColorToolbar = remember { mutableStateOf(false) }
+
val failedMessage = stringResource(R.string.failed_to_load)
val okMessage = stringResource(R.string.ok)
@@ -139,7 +149,7 @@
modifier = Modifier
.fillMaxSize()
.align(Alignment.Center)
- .maybeDrawBorder(border.value)
+ .maybeDrawBorder(borderToolbar.value)
)
if (compositionResult is LottieCompositionResult.Loading) {
DebouncedCircularProgressIndicator(
@@ -149,17 +159,24 @@
)
}
}
- if (speed.value && !focusMode) {
+ if (speedToolbar.value && !focusMode) {
SpeedToolbar(
speed = animationState.speed,
onSpeedChanged = { animationState.speed = it }
)
}
+ if (backgroundColorToolbar.value && !focusMode) {
+ BackgroundColorToolbar(
+ animationBackgroundColor = animationBackgroundColor,
+ onColorChanged = { backgroundColor = it }
+ )
+ }
if (!focusMode) {
PlayerControlsRow(animationState, compositionResult())
Toolbar(
- border = border,
- speed = speed,
+ border = borderToolbar,
+ speed = speedToolbar,
+ backgroundColor = backgroundColorToolbar,
warnings = compositionResult()?.warnings ?: emptyList()
)
}
@@ -258,9 +275,57 @@
}
@Composable
+private fun BackgroundColorToolbar(
+ animationBackgroundColor: Color?,
+ onColorChanged: (Color) -> Unit,
+) {
+ Row(
+ horizontalArrangement = Arrangement.SpaceBetween,
+ modifier = Modifier
+ .drawTopBorder()
+ .padding(vertical = 12.dp, horizontal = 16.dp)
+ .fillMaxWidth()
+ ) {
+ listOfNotNull(
+ colorResource(R.color.background_color1),
+ colorResource(R.color.background_color2),
+ colorResource(R.color.background_color3),
+ colorResource(R.color.background_color4),
+ colorResource(R.color.background_color5),
+ colorResource(R.color.background_color6),
+ animationBackgroundColor.takeIf { it != Color.White },
+ ).forEachIndexed { i, color ->
+ val strokeColor = if (i == 0) colorResource(R.color.background_color1_stroke) else color
+ BackgroundToolbarItem(
+ color = color,
+ strokeColor = strokeColor,
+ onClick = { onColorChanged(color) }
+ )
+ }
+ }
+}
+
+@Composable
+private fun BackgroundToolbarItem(
+ color: Color,
+ strokeColor: Color = color,
+ onClick: () -> Unit,
+) {
+ Box(
+ modifier = Modifier
+ .clip(CircleShape)
+ .background(color)
+ .clickable(onClick = onClick)
+ .preferredSize(24.dp)
+ .border(1.dp, strokeColor, shape = CircleShape)
+ )
+}
+
+@Composable
private fun Toolbar(
border: MutableState<Boolean>,
speed: MutableState<Boolean>,
+ backgroundColor: MutableState<Boolean>,
warnings: List<String>,
) {
var showWarningsDialog by remember { mutableStateOf(false) }
@@ -298,6 +363,13 @@
onClick = { speed.value = it },
modifier = Modifier.padding(end = 8.dp)
)
+ ToolbarChip(
+ iconRes = R.drawable.ic_color,
+ label = stringResource(R.string.toolbar_item_color),
+ isActivated = backgroundColor.value,
+ onClick = { backgroundColor.value = it },
+ modifier = Modifier.padding(end = 8.dp)
+ )
}
}
diff --git a/sample-compose/src/main/res/drawable/ic_color.xml b/sample-compose/src/main/res/drawable/ic_color.xml
new file mode 100644
index 0000000..69dfd9a
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_color.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24.0"
+ android:viewportHeight="24.0">
+ <path
+ android:fillColor="#FF000000"
+ android:pathData="M12,3c-4.97,0 -9,4.03 -9,9s4.03,9 9,9c0.83,0 1.5,-0.67 1.5,-1.5 0,-0.39 -0.15,-0.74 -0.39,-1.01 -0.23,-0.26 -0.38,-0.61 -0.38,-0.99 0,-0.83 0.67,-1.5 1.5,-1.5L16,16c2.76,0 5,-2.24 5,-5 0,-4.42 -4.03,-8 -9,-8zM6.5,12c-0.83,0 -1.5,-0.67 -1.5,-1.5S5.67,9 6.5,9 8,9.67 8,10.5 7.33,12 6.5,12zM9.5,8C8.67,8 8,7.33 8,6.5S8.67,5 9.5,5s1.5,0.67 1.5,1.5S10.33,8 9.5,8zM14.5,8c-0.83,0 -1.5,-0.67 -1.5,-1.5S13.67,5 14.5,5s1.5,0.67 1.5,1.5S15.33,8 14.5,8zM17.5,12c-0.83,0 -1.5,-0.67 -1.5,-1.5S16.67,9 17.5,9s1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5z"/>
+</vector>
diff --git a/sample-compose/src/main/res/values/colors.xml b/sample-compose/src/main/res/values/colors.xml
index f8c6127..b30c688 100644
--- a/sample-compose/src/main/res/values/colors.xml
+++ b/sample-compose/src/main/res/values/colors.xml
@@ -7,4 +7,13 @@
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
+
+ <color name="background_color1">#ffffff</color>
+ <color name="background_color1_stroke">#848484</color>
+ <color name="background_color2">#000000</color>
+ <color name="background_color3">#FF5A5F</color>
+ <color name="background_color4">#008489</color>
+ <color name="background_color5">#A61D55</color>
+ <color name="background_color6">#FFB400</color>
+ <color name="background_color7">#A61D55</color>
</resources>
\ No newline at end of file
diff --git a/sample-compose/src/main/res/values/strings.xml b/sample-compose/src/main/res/values/strings.xml
index 6e40248..00faace 100644
--- a/sample-compose/src/main/res/values/strings.xml
+++ b/sample-compose/src/main/res/values/strings.xml
@@ -21,6 +21,7 @@
</plurals>
<string name="toolbar_item_border">Border</string>
<string name="toolbar_item_speed">Speed</string>
+ <string name="toolbar_item_color">Background</string>
<string name="failed_to_load">Failed to load composition</string>
<string name="ok">OK</string>
