Modern Android Development

  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...

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

  Creating a great background gradient for your UI is easy with https://cssgradient.io . This site will let you play with color hex codes and stop values to get your UI just right. It will also generate the CSS code for you if you are using this gradient for a website. For the above login Android app, the background is composed of a linear gradient with three color values (#00D4FF, #097959, #020024 specifically). These colors represent the gradient's start, middle, and end color. In Compose, you would set this background with the following code within a modifier inside a column (or any composable that you want to set a background color). Login.kt Column ( modifier = Modifier . fillMaxSize () . background ( brush = Brush .linearGradient( 0.0f to ThemeGradientStart , 0.5f to ThemeGradientMid , 0.7f to ThemeGradientEnd ) ) The variables ThemeGradientStart, ThemeGradientMid, and ThemeGra...