Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit db8431f5 authored by Graciela Wissen Putri's avatar Graciela Wissen Putri
Browse files

Support lottieDynamicProperties in Illustration widget 

Implementation follows LottieColorUtils#applyDynamicColors and copies
settingslib colors.

Change background in Illustration to transparent to follow
IllustrationPreference.

Bug: 293138315
Test: Manual
Change-Id: If87751d1530a16cd43e6a87c1f5a63c6c9a52dfd
parent 9c9649e4

packages/SettingsLib/Spa/spa/res/values/colors.xml

0 → 100644
+67 −0
Original line number Diff line number Diff line 
<?xml version="1.0" encoding="utf-8"?>

<!--

  Copyright (C) 2023 The Android Open Source Project



  Licensed under the Apache License, Version 2.0 (the "License");

  you may not use this file except in compliance with the License.

  You may obtain a copy of the License at



       http://www.apache.org/licenses/LICENSE-2.0



  Unless required by applicable law or agreed to in writing, software

  distributed under the License is distributed on an "AS IS" BASIS,

  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

  See the License for the specific language governing permissions and

  limitations under the License.

  -->



<resources>

    <color name="settingslib_protection_color">@android:color/white</color>



    <!-- Dynamic colors-->

    <color name="settingslib_color_blue600">#1a73e8</color>

    <color name="settingslib_color_blue400">#669df6</color>

    <color name="settingslib_color_blue300">#8ab4f8</color>

    <color name="settingslib_color_blue100">#d2e3fc</color>

    <color name="settingslib_color_blue50">#e8f0fe</color>

    <color name="settingslib_color_green600">#1e8e3e</color>

    <color name="settingslib_color_green500">#34A853</color>

    <color name="settingslib_color_green400">#5bb974</color>

    <color name="settingslib_color_green100">#ceead6</color>

    <color name="settingslib_color_green50">#e6f4ea</color>

    <color name="settingslib_color_red600">#d93025</color>

    <color name="settingslib_color_red500">#B3261E</color>

    <color name="settingslib_color_red400">#ee675c</color>

    <color name="settingslib_color_red100">#fad2cf</color>

    <color name="settingslib_color_red50">#fce8e6</color>

    <color name="settingslib_color_yellow600">#f9ab00</color>

    <color name="settingslib_color_yellow400">#fcc934</color>

    <color name="settingslib_color_yellow100">#feefc3</color>

    <color name="settingslib_color_yellow50">#fef7e0</color>

    <color name="settingslib_color_grey900">#202124</color>

    <color name="settingslib_color_grey800">#3c4043</color>

    <color name="settingslib_color_grey700">#5f6368</color>

    <color name="settingslib_color_grey600">#80868b</color>

    <color name="settingslib_color_grey500">#9AA0A6</color>

    <color name="settingslib_color_grey400">#bdc1c6</color>

    <color name="settingslib_color_grey300">#dadce0</color>

    <color name="settingslib_color_grey200">#e8eaed</color>

    <color name="settingslib_color_grey100">#f1f3f4</color>

    <color name="settingslib_color_grey50">#f8f9fa</color>

    <color name="settingslib_color_orange600">#e8710a</color>

    <color name="settingslib_color_orange400">#fa903e</color>

    <color name="settingslib_color_orange300">#fcad70</color>

    <color name="settingslib_color_orange100">#fedfc8</color>

    <color name="settingslib_color_pink600">#e52592</color>

    <color name="settingslib_color_pink400">#ff63b8</color>

    <color name="settingslib_color_pink300">#ff8bcb</color>

    <color name="settingslib_color_pink100">#fdcfe8</color>

    <color name="settingslib_color_purple600">#9334e6</color>

    <color name="settingslib_color_purple400">#af5cf7</color>

    <color name="settingslib_color_purple300">#c58af9</color>

    <color name="settingslib_color_purple100">#e9d2fd</color>

    <color name="settingslib_color_cyan600">#12b5c8</color>

    <color name="settingslib_color_cyan400">#4ecde6</color>

    <color name="settingslib_color_cyan300">#78d9ec</color>

    <color name="settingslib_color_cyan100">#cbf0f8</color>

</resources>

packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/illustration/Illustration.kt

+2 −2
Original line number Diff line number Diff line
@@ -22,11 +22,11 @@ import androidx.compose.foundation.layout.fillMaxWidth 
import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.sizeIn

import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material3.MaterialTheme

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.draw.clip

import androidx.compose.ui.graphics.Color

import com.android.settingslib.spa.framework.theme.SettingsDimension

import com.android.settingslib.spa.widget.ui.ImageBox

import com.android.settingslib.spa.widget.ui.Lottie
@@ -81,7 +81,7 @@ fun Illustration( 
                maxHeight = SettingsDimension.illustrationMaxHeight,

            )

            .clip(RoundedCornerShape(SettingsDimension.illustrationCornerRadius))

            .background(color = MaterialTheme.colorScheme.surface)

            .background(color = Color.Transparent)



        when (resourceType) {

            ResourceType.LOTTIE -> {

packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/ui/Lottie.kt

+39 −0
Original line number Diff line number Diff line
@@ -16,15 +16,24 @@ 


package com.android.settingslib.spa.widget.ui



import android.graphics.PorterDuff

import android.graphics.PorterDuffColorFilter

import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.foundation.layout.Box

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.toArgb

import androidx.compose.ui.res.colorResource

import com.airbnb.lottie.LottieProperty

import com.airbnb.lottie.compose.LottieAnimation

import com.airbnb.lottie.compose.LottieCompositionSpec

import com.airbnb.lottie.compose.LottieConstants

import com.airbnb.lottie.compose.animateLottieCompositionAsState

import com.airbnb.lottie.compose.rememberLottieComposition

import com.airbnb.lottie.compose.rememberLottieDynamicProperties

import com.airbnb.lottie.compose.rememberLottieDynamicProperty

import com.android.settingslib.spa.R



@Composable

fun Lottie(
@@ -38,6 +47,34 @@ fun Lottie( 
    }

}



object LottieColorUtils {

    private val DARK_TO_LIGHT_THEME_COLOR_MAP = mapOf(

        ".grey600" to R.color.settingslib_color_grey400,

        ".grey800" to R.color.settingslib_color_grey300,

        ".grey900" to R.color.settingslib_color_grey50,

        ".red400" to R.color.settingslib_color_red600,

        ".black" to android.R.color.white,

        ".blue400" to R.color.settingslib_color_blue600,

        ".green400" to R.color.settingslib_color_green600,

        ".green200" to R.color.settingslib_color_green500,

        ".red200" to R.color.settingslib_color_red500,

    )



    @Composable

    private fun getDefaultPropertiesList() =

        DARK_TO_LIGHT_THEME_COLOR_MAP.map { (key, colorRes) ->

            val color = colorResource(colorRes).toArgb()

            rememberLottieDynamicProperty(

                property = LottieProperty.COLOR_FILTER,

                keyPath = arrayOf("**", key, "**")

            ){ PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP) }

        }



    @Composable

    fun getDefaultDynamicProperties() =

        rememberLottieDynamicProperties(*getDefaultPropertiesList().toTypedArray())

}



@Composable

private fun BaseLottie(resId: Int) {

    val composition by rememberLottieComposition(
@@ -47,8 +84,10 @@ private fun BaseLottie(resId: Int) { 
        composition,

        iterations = LottieConstants.IterateForever,

    )

    val isLightMode = !isSystemInDarkTheme()

    LottieAnimation(

        composition = composition,

        dynamicProperties = LottieColorUtils.getDefaultDynamicProperties().takeIf { isLightMode },

        progress = { progress },

    )

}