Add preview animations for layout preference

base/src/main/java/de/mm20/launcher2/licenses/OpenSourceLicenses.kt

@@ -217,4 +217,12 @@ val OpenSourceLicenses = arrayOf(
         licenseText = R.raw.license_apache_2,
         url = "https://source.android.com/"
     ),
+    OpenSourceLibrary(
+        name = "Lottie",
+        copyrightNote = "Copyright (c) 2017 Airbnb",
+        description = "Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web",
+        licenseName = R.string.mit_license_name,
+        licenseText = R.raw.license_mit,
+        url = "https://airbnb.design/lottie/"
+    ),
 )

i18n/src/main/res/values/strings.xml

@@ -381,6 +381,8 @@
     <string name="grant_permission">Grant</string>
     <!-- Appearance preference title -->
     <string name="preference_screen_appearance">Appearance</string>
+    <string name="preference_layout">Layout</string>
+    <string name="preference_layout_summary">General arrangement of search bar, widgets and search results</string>
     <string name="preference_theme">Theme</string>
     <string name="preference_theme_light">Light</string>
     <string name="preference_theme_dark">Dark</string>

settings.gradle.kts

@@ -379,6 +379,10 @@ dependencyResolutionManagement {
             alias("tinypinyin")
                 .to("com.github.promeg", "tinypinyin")
                 .version("2.0.2")
+
+            alias("lottie")
+                .to("com.airbnb.android", "lottie-compose")
+                .version("5.0.3")
         }
     }
 }

ui/build.gradle.kts

@@ -105,6 +105,8 @@ dependencies {
     implementation(libs.coil.core)
     implementation(libs.coil.compose)
 
+    implementation(libs.lottie)
+
     implementation(project(":material-color-utilities"))
 
     implementation(project(":base"))

ui/src/main/java/de/mm20/launcher2/ui/settings/appearance/AppearanceSettingsScreen.kt

@@ -3,12 +3,11 @@ package de.mm20.launcher2.ui.settings.appearance
 import android.graphics.drawable.ColorDrawable
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.content.res.AppCompatResources
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
@@ -18,12 +17,16 @@ import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.airbnb.lottie.LottieProperty
+import com.airbnb.lottie.compose.*
 import com.google.accompanist.pager.ExperimentalPagerApi
 import com.google.accompanist.pager.HorizontalPager
 import com.google.accompanist.pager.HorizontalPagerIndicator
@@ -50,6 +53,13 @@ fun AppearanceSettingsScreen() {
     PreferenceScreen(title = stringResource(id = R.string.preference_screen_appearance)) {
         item {
             PreferenceCategory {
+                val layout by viewModel.layout.observeAsState()
+                LayoutPreference(
+                    title = stringResource(id = R.string.preference_layout),
+                    summary = stringResource(id = R.string.preference_layout_summary),
+                    value = layout, onValueChanged = {
+                    viewModel.setLayout(it)
+                })
                 val theme by viewModel.theme.observeAsState()
                 ListPreference(
                     title = stringResource(id = R.string.preference_theme),
@@ -77,10 +87,6 @@ fun AppearanceSettingsScreen() {
                         navController?.navigate("settings/appearance/colorscheme")
                     }
                 )
-                val layout by viewModel.layout.observeAsState()
-                LayoutPreference(title = "Layout", value = layout, onValueChanged = {
-                    viewModel.setLayout(it)
-                })
                 Preference(
                     title = stringResource(R.string.preference_cards),
                     summary = stringResource(R.string.preference_cards_summary),
@@ -513,14 +519,74 @@ fun LayoutPreference(
                         count = layouts.size,
                         state = pagerState,
                         modifier = Modifier
-                            .height(150.dp)
+                            .fillMaxWidth()
                             .padding(bottom = 16.dp)
-                            .background(MaterialTheme.colorScheme.secondary)
                     ) {
-                        when (layouts[it]) {
+                        Box(
-                            AppearanceSettings.Layout.PullDown -> PullDownLayoutPreview()
+                            modifier = Modifier
-                            AppearanceSettings.Layout.Pager -> PagerLayoutPreview()
+                                .height(250.dp)
-                            else -> {}
+                                .width(141.dp)
+                                .background(MaterialTheme.colorScheme.secondary)
+                        ) {
+
+                            val composition by rememberLottieComposition(
+                                LottieCompositionSpec.RawRes(
+                                    when (layouts[it]) {
+                                        AppearanceSettings.Layout.PullDown -> R.raw.lottie_scaffold_pulldown
+                                        AppearanceSettings.Layout.Pager -> R.raw.lottie_scaffold_pager
+                                        else -> 0
+                                    }
+                                )
+                            )
+
+                            val dynamicProperties = rememberLottieDynamicProperties(
+                                rememberLottieDynamicProperty(
+                                    property = LottieProperty.COLOR,
+                                    value = MaterialTheme.colorScheme.primaryContainer.toArgb(),
+                                    keyPath = arrayOf("Pointer", "**")
+                                ),
+                                rememberLottieDynamicProperty(
+                                    property = LottieProperty.COLOR,
+                                    value = MaterialTheme.colorScheme.surface.toArgb(),
+                                    keyPath = arrayOf("SearchBar", "**")
+                                ),
+                                rememberLottieDynamicProperty(
+                                    property = LottieProperty.COLOR,
+                                    value = MaterialTheme.colorScheme.surface.toArgb(),
+                                    keyPath = arrayOf("Favorites", "**")
+                                ),
+                                rememberLottieDynamicProperty(
+                                    property = LottieProperty.COLOR,
+                                    value = MaterialTheme.colorScheme.surface.toArgb(),
+                                    keyPath = arrayOf("Apps", "**")
+                                ),
+                                rememberLottieDynamicProperty(
+                                    property = LottieProperty.COLOR,
+                                    value = Color.White.toArgb(),
+                                    keyPath = arrayOf("ClockWidget", "**")
+                                )
+                            )
+
+                            /*LaunchedEffect(null) {
+                                val drw = LottieDrawable()
+                                drw.composition = composition
+                                val list = drw.resolveKeyPath(KeyPath("**"))
+                                list.forEach {
+                                    Log.d("MM20", it.keysToString())
+                                }
+                            }*/
+
+
+                            val progress by animateLottieCompositionAsState(
+                                composition,
+                                iterations = LottieConstants.IterateForever
+                            )
+
+                            LottieAnimation(
+                                composition = composition,
+                                progress = progress,
+                                dynamicProperties = dynamicProperties
+                            )
                         }
                     }
                     HorizontalPagerIndicator(pagerState = pagerState)
@@ -530,15 +596,6 @@ fun LayoutPreference(
     }
 }
 
-@Composable
-fun PullDownLayoutPreview() {
-}
-
-
-@Composable
-fun PagerLayoutPreview() {
-}
-
 
 @Composable
 private fun getShapeName(shape: IconSettings.IconShape?): String? {