Basic Color Animation State Changes in Jetpack Compose


Creating a smooth color transition is easy! This animation shifts the color of the leaf from green to red in exactly two seconds (2000 milliseconds).

Leaf.kt

var clicked by remember { mutableStateOf(false) }
val leafColor by animateColorAsState(
    targetValue = if (clicked) Color.Red else Color.Green,
    animationSpec = tween(2000)
)
drawPath(path = path, brush = SolidColor(leafColor))


Full code here: https://gist.github.com/PopularPenguin/ae7e33dc16d6c1db597a5141f2e37e9d

Comments

Post a Comment

Popular posts from this blog

Permissions in Jetpack Compose

Image
  Permissions in Android just got a lot easier to manage thanks to Compose and the Google Accompanist library. Now we can create a composable function to wrap any other function that might need to access permissions easily like this: AcceptPermissions { MainScreen () } Add the following dependency in your build.gradle (module) file: implementation "com.google.accompanist:accompanist-permissions:0.23.1" We then set up a composable function to check our permissions and display a dialog to the user. If the user doesn't accept the permissions, we also create a composable to show if the user denied the permissions. Permissions.kt @OptIn ( ExperimentalPermissionsApi :: class ) @Composable fun AcceptPermissions ( content : @Composable () -> Unit ) { val permissions = mutableListOf ( android. Manifest . permission . ACCESS_COARSE_LOCATION , android. Manifest . permission . ACCESS_FINE_LOCATION , android. Manifest . permission . WRITE_EXTERNAL_S...
Read more

Jetpack Compose Login UI

Image
In this tutorial, we will implement a login screen’s UI using Jetpack Compose. Open a new Empty Compose Project, name it Compose Login, and add the Compose navigation dependency to your module’s build.gradle file:   build.gradle (Module) // Navigation implementation "androidx.navigation:navigation-compose:2.5.0" MainActivity.kt package com.popularpenguin.composelogin import android.os. Bundle import androidx.activity. ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.runtime. Composable import androidx.compose.ui. Modifier import androidx.compose.ui.tooling.preview. Preview import androidx.lifecycle.viewmodel.compose.viewModel import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController import com.popularpenguin.compo...
Read more

Card Animations in Jetpack Compose

Image
  I've created a small demo program to show how to use animations in your Android app. This app deals cards from a deck when clicked and returns them to the deck when it is clicked a second time. CardComponents.kt BaseCard @Composable fun BaseCard ( modifier : Modifier = Modifier , elevation : Dp = 0 . dp , content : @Composable () -> Unit ) { val shape = RoundedCornerShape ( 10 . dp ) Card ( modifier = modifier . size ( width = CARD_WIDTH . dp , height = CARD_HEIGHT . dp ) . clip ( shape ) . border ( 2 . dp , Color . Black , shape ) , elevation = elevation , content = content ) } Composable function which is used as a common base for both the card deck and animated cards. Parameters include an optional modifier extension, elevation which will be set so the cards can overlap, and the content lambda. Deck @Composable fun Deck ( modifier : Modifier = Modifier , onClick : () -> Unit ) { BaseC...
Read more