Modern Android Development

  This tutorial will show you how to create a custom search bar in your app that will return a list of items by title or date specified in the search bar. This list will refresh every time the user types a new character or deletes the query with a half second delay (debounce) to ensure the user has paused typing before showing the result. This app shows a list of hiking trips the user has taken and saved to the database as a list. The user can update what is shown in the list by both making a search query and deleting a trip. This list is initially fetched from the database and the search query operates on the list currently in memory. Deleting a trip notifies the app to update the database and update the tripFlow in the ViewModel. Trip.kt @Entity data class Trip ( @PrimaryKey (autoGenerate = true ) var id : Int = 0 , var date : Long = System .currentTimeMillis() , var title : String = "" , var path : List < PathMarker > = mutableListOf () , var pho...

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

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

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