[Compose] Upgrade to Alpha 11 (#1732)
Upgrades Compose to Alpha 11!
I migrated some deprecated APIs, mostly related to effects. Also wrapped the player controls and toolbar in the AnimatedVisibility composable so toggling focus mode feels a little less jumpy.
diff --git a/build.gradle b/build.gradle
index 25dd1fa..ab1533e 100644
--- a/build.gradle
+++ b/build.gradle
@@ -2,8 +2,8 @@
buildscript {
ext {
- composeVersion = '1.0.0-alpha10'
- kotlinVersion = '1.4.21'
+ composeVersion = '1.0.0-alpha11'
+ kotlinVersion = '1.4.21-2'
daggerVersion = '2.30.1'
}
@@ -16,7 +16,7 @@
}
dependencies {
classpath 'org.ajoberstar:grgit:1.9.3'
- classpath 'com.android.tools.build:gradle:7.0.0-alpha04'
+ classpath 'com.android.tools.build:gradle:7.0.0-alpha05'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlinVersion"
classpath 'org.ajoberstar:grgit:1.9.3'
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index 743ba8b..79f7a09 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -3,4 +3,4 @@
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
-distributionUrl=https://services.gradle.org/distributions/gradle-6.8-rc-1-all.zip
+distributionUrl=https://services.gradle.org/distributions/gradle-6.8-all.zip
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
index 58eefee..8cf482e 100644
--- a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimation.kt
@@ -9,7 +9,7 @@
import androidx.compose.runtime.dispatch.withFrameNanos
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.onCommit
+import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
@@ -34,7 +34,7 @@
fun rememberLottieComposition(spec: LottieAnimationSpec): LottieCompositionResult {
val context = AmbientContext.current
var result: LottieCompositionResult by remember { mutableStateOf(LottieCompositionResult.Loading) }
- onCommit(spec) {
+ DisposableEffect(spec) {
var isDisposed = false
val task = when (spec) {
is LottieAnimationSpec.RawRes -> LottieCompositionFactory.fromRawRes(context, spec.resId)
diff --git a/sample-compose/build.gradle b/sample-compose/build.gradle
index 7a9030a..dfc9d74 100644
--- a/sample-compose/build.gradle
+++ b/sample-compose/build.gradle
@@ -65,7 +65,7 @@
implementation "androidx.compose.material:material:$composeVersion"
implementation "androidx.compose.material:material-icons-extended:$composeVersion"
implementation "androidx.compose.ui:ui-tooling:$composeVersion"
- implementation "androidx.navigation:navigation-compose:1.0.0-alpha05"
+ implementation "androidx.navigation:navigation-compose:1.0.0-alpha06"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0-rc01'
implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.0-rc01'
@@ -83,7 +83,7 @@
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-moshi:2.9.0'
- implementation "dev.chrisbanes.accompanist:accompanist-coil:0.4.2"
+ implementation "dev.chrisbanes.accompanist:accompanist-coil:0.5.0"
implementation 'com.airbnb.android:mvrx:2.0.0-beta3'
testImplementation 'junit:junit:4.13.1'
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
index f6d8a16..318758c 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/ComposeActivity.kt
@@ -69,7 +69,12 @@
BottomNavItemData.values().forEach { item ->
BottomNavigationItem(
- icon = { Icon(vectorResource(item.iconRes)) },
+ icon = {
+ Icon(
+ imageVector = vectorResource(item.iconRes),
+ contentDescription = null
+ )
+ },
label = { Text(stringResource(item.labelRes)) },
selected = currentRoute == item.route.route,
onClick = {
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
index e10f8d0..9b8c695 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/composables/AnimationRow.kt
@@ -39,7 +39,8 @@
modifier = Modifier
.padding(end = 16.dp)
.preferredSize(40.dp)
- .background(color = previewBackgroundColor)
+ .background(color = previewBackgroundColor),
+ contentDescription = null
)
Text(
title,
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
index 88fccf9..8cfe62e 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesPage.kt
@@ -1,7 +1,8 @@
package com.airbnb.lottie.sample.compose.lottiefiles
import androidx.annotation.StringRes
-import androidx.compose.animation.core.animateAsState
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
@@ -74,8 +75,8 @@
) {
val textWidth = remember { mutableStateOf(0) }
val pxRatio = with(AmbientDensity.current) { 1.dp.toPx() }
- val tabWidth by animateAsState(if (isSelected) (textWidth.value / pxRatio).dp else 0.dp, spring(), null)
- val tabAlpha by animateAsState(if (isSelected) 1f else 0f)
+ val tabWidth by animateDpAsState(if (isSelected) (textWidth.value / pxRatio).dp else 0.dp)
+ val tabAlpha by animateFloatAsState(if (isSelected) 1f else 0f)
Column(
modifier = Modifier
.clickable(onClick = onClick)
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt
index ff2d248..d7d0ca8 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesRecentsAndPopularPage.kt
@@ -6,18 +6,20 @@
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Repeat
import androidx.compose.runtime.Composable
-import androidx.compose.runtime.onActive
-import androidx.compose.runtime.onCommit
+import androidx.compose.runtime.SideEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.navigate
+import com.airbnb.lottie.sample.compose.R
import com.airbnb.lottie.sample.compose.Route
import com.airbnb.lottie.sample.compose.api.AnimationDataV2
import com.airbnb.lottie.sample.compose.api.LottieFilesApi
@@ -104,7 +106,7 @@
fun LottieFilesRecentAndPopularPage(mode: LottieFilesMode) {
val (viewModel, state) = mavericksViewModelAndState<LottieFilesRecentAndPopularViewModel, LottieFilesRecentAndPopularState>()
val navController = findNavController()
- onCommit(mode) {
+ SideEffect {
viewModel.setMode(mode)
}
LottieFilesRecentAndPopularPage(
@@ -135,9 +137,7 @@
) {
itemsIndexed(state.results) { index, result ->
if (index == state.results.size - 1) {
- onActive {
- fetchNextPage()
- }
+ SideEffect(fetchNextPage)
}
AnimationRow(
title = result.title,
@@ -152,7 +152,11 @@
FloatingActionButton(
onClick = fetchNextPage,
content = {
- Icon(Icons.Filled.Repeat, tint = Color.White)
+ Icon(
+ imageVector = Icons.Filled.Repeat,
+ tint = Color.White,
+ contentDescription = null
+ )
},
modifier = Modifier
.align(Alignment.BottomCenter)
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
index 25a07f7..a075b6c 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
@@ -6,6 +6,7 @@
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.OutlinedTextField
@@ -14,7 +15,7 @@
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Repeat
import androidx.compose.runtime.Composable
-import androidx.compose.runtime.onActive
+import androidx.compose.runtime.SideEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@@ -147,9 +148,7 @@
) {
itemsIndexed(state.results) { index, result ->
if (index == state.results.size - 1) {
- onActive {
- fetchNextPage()
- }
+ SideEffect(fetchNextPage)
}
AnimationRow(
title = result.title,
@@ -164,7 +163,11 @@
FloatingActionButton(
onClick = fetchNextPage,
content = {
- Icon(Icons.Filled.Repeat, tint = Color.White)
+ Icon(
+ imageVector = Icons.Filled.Repeat,
+ tint = Color.White,
+ contentDescription = null
+ )
},
modifier = Modifier
.align(Alignment.BottomCenter)
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 234e834..85083db 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
@@ -1,11 +1,11 @@
package com.airbnb.lottie.sample.compose.player
import androidx.activity.OnBackPressedDispatcher
-import androidx.compose.foundation.ScrollableColumn
-import androidx.compose.foundation.ScrollableRow
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.*
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@@ -18,6 +18,8 @@
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredSize
import androidx.compose.foundation.layout.preferredWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
@@ -74,6 +76,7 @@
import kotlin.math.ceil
import kotlin.math.roundToInt
+@OptIn(ExperimentalAnimationApi::class)
@Composable
fun PlayerPage(
spec: LottieAnimationSpec,
@@ -105,12 +108,8 @@
}
}
- onCommit(outlineMasksAndMattes.value) {
- animationState.outlineMasksAndMattes = outlineMasksAndMattes.value
- }
- onCommit(applyOpacityToLayers.value) {
- animationState.applyOpacityToLayers = applyOpacityToLayers.value
- }
+ animationState.outlineMasksAndMattes = outlineMasksAndMattes.value
+ animationState.applyOpacityToLayers = applyOpacityToLayers.value
Scaffold(
scaffoldState = scaffoldState,
@@ -123,7 +122,10 @@
IconButton(
onClick = { backPressedDispatcher.onBackPressed() },
) {
- Icon(Icons.Default.Close)
+ Icon(
+ Icons.Default.Close,
+ contentDescription = null
+ )
}
},
actions = {
@@ -134,6 +136,7 @@
Icon(
Icons.Filled.Warning,
tint = Color.Black,
+ contentDescription = null
)
}
}
@@ -143,6 +146,7 @@
Icon(
Icons.Filled.RemoveRedEye,
tint = if (focusMode) Teal else Color.Black,
+ contentDescription = null
)
}
}
@@ -188,7 +192,11 @@
onColorChanged = { backgroundColor = it }
)
}
- if (!focusMode) {
+ AnimatedVisibility(
+ visible = !focusMode,
+ enter = expandVertically(),
+ exit = shrinkVertically()
+ ) {
PlayerControlsRow(animationState, compositionResult())
Toolbar(
border = borderToolbar,
@@ -232,7 +240,11 @@
IconButton(
onClick = { animationState.toggleIsPlaying() },
) {
- Icon(if (animationState.isPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow)
+ Icon(
+ if (animationState.isPlaying) Icons.Filled.Pause
+ else Icons.Filled.PlayArrow,
+ contentDescription = null
+ )
}
Text(
"${animationState.frame}/${ceil(composition?.durationFrames ?: 0f).toInt()}\n${progressFormatted}/$totalTimeFormatted",
@@ -256,6 +268,7 @@
Icon(
Icons.Filled.Repeat,
tint = if (animationState.repeatCount > 0) Teal else Color.Black,
+ contentDescription = null
)
}
}
@@ -364,12 +377,7 @@
outlineMasksAndMattes: MutableState<Boolean>,
applyOpacityToLayers: MutableState<Boolean>,
) {
- ScrollableRow(
- contentPadding = PaddingValues(start = 16.dp, top = 12.dp, end = 16.dp, bottom = 12.dp),
- modifier = Modifier
- .drawTopBorder()
- .fillMaxWidth()
- ) {
+ Row(Modifier.horizontalScroll(rememberScrollState())) {
ToolbarChip(
iconRes = R.drawable.ic_masks_and_mattes,
label = stringResource(R.string.toolbar_item_masks),
@@ -424,8 +432,8 @@
contentAlignment = Alignment.TopCenter,
modifier = Modifier
) {
- ScrollableColumn {
- warnings.forEachIndexed { i, warning ->
+ LazyColumn {
+ itemsIndexed(warnings) { i, warning ->
Text(
warning,
fontSize = 8.sp,
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/ToolbarChip.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/ToolbarChip.kt
index 749f2e0..8a7fda9 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/ToolbarChip.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/ToolbarChip.kt
@@ -49,7 +49,8 @@
vectorResource(iconRes),
tint = if (isActivated) Color.White else unActivatedColor,
modifier = Modifier
- .preferredSize(12.dp)
+ .preferredSize(12.dp),
+ contentDescription = null
)
Spacer(modifier = Modifier.preferredWidth(6.dp))
}
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt
index 356406c..95047f9 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/preview/PreviewPage.kt
@@ -95,7 +95,8 @@
vectorResource(iconRes),
modifier = Modifier
.align(Alignment.CenterVertically)
- .padding(16.dp)
+ .padding(16.dp),
+ contentDescription = null
)
Text(
stringResource(textRes),
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
index 50822b1..11caae5 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/showcase/ShowcasePage.kt
@@ -1,9 +1,9 @@
package com.airbnb.lottie.sample.compose.showcase
-import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
import androidx.compose.material.Divider
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -25,16 +25,15 @@
fun ShowcasePage() {
val (_, showcaseState) = mavericksViewModelAndState<ShowcaseViewModel, ShowcaseState>()
val featuredAnimations = showcaseState.animations
- val scrollState = rememberScrollState()
val navController = findNavController()
Box(
modifier = Modifier.fillMaxSize()
) {
- ScrollableColumn(
- scrollState = scrollState
- ) {
- Marquee("Showcase")
- featuredAnimations()?.data?.forEach { data ->
+ LazyColumn {
+ item {
+ Marquee("Showcase")
+ }
+ items(featuredAnimations()?.data.orEmpty()) { data ->
AnimationRow(
title = data.title,
previewUrl = data.preview_url ?: "",
