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>