Gradients

 



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 ThemeGradientEnd are set in your Color.kt file.


Color.kt

val ThemeGradientStart = Color(0xFF00D4FF)
val ThemeGradientMid = Color(0xFF097959)
val ThemeGradientEnd = Color(0xFF020024)

Try the website and make your own!

https://cssgradient.io

Code for the entire app can be found at https://github.com/PopularPenguin/Compose-Login in the UI branch.

Happy coding!

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