Compose Custom Animating Dialog - Location Permission UI UX
Custom Compose Animating Dialog for Jetpack Compose UI UX.
UI for prominent disclosure when requesting for permissions from user.
Let us create 'Custom Compose Animating Dialog screen' UI UX (Animating dialog) in Jetpack Compose using kotlin.
In our : MainActivity.kt (just call the InfoDialog function when user on click)
package compose.material.theme
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import compose.material.theme.ui.theme.Material3ComposeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Material3ComposeTheme {
val infoDialog = remember { mutableStateOf(false) }
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Column(
modifier = Modifier
.padding(20.dp)
.verticalScroll(rememberScrollState())
) {
Spacer(modifier = Modifier.height(47.dp))
//...................................................................
// Info dialog demo button to show Info Jetpack compose custom dialog
Button(
onClick = {
infoDialog.value = true
},
modifier = Modifier.align(Alignment.CenterHorizontally),
) {
Text(
text = "Show Confirmation Dialog",
color = MaterialTheme.colorScheme.onPrimaryContainer,
style = MaterialTheme.typography.labelLarge,
)
}
}
}
if (infoDialog.value) {
InfoDialog(
title = "Turn on Location Service",
desc = "Explore the world without getting lost and keep the track of your location.",
onDismiss = {
infoDialog.value = false
}
)
}
}
}
}
}
/*
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
Material3ComposeTheme {
Greeting("Android")
}
}*/
In our : InfoDialog.kt (custom dialog box UI design)
package compose.material.theme
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
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 androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
/*
This example demonstrates how to make custom dialog in android jetpack compose in android.
* Button : https://www.boltuix.com/2021/12/button_25.html
* Clip Modifier : https://www.boltuix.com/2021/12/clip-modifier_24.html
* Alert Dialog : https://www.boltuix.com/2021/12/alert-dialog_25.html
* Column : https://www.boltuix.com/2021/12/column-layout_25.html
* Box : https://www.boltuix.com/2021/12/box-layout_25.html
* Type.kt : https://www.boltuix.com/2021/12/typography_27.html
* Color.kt : https://www.boltuix.com/2022/05/google-material-design-color.html
* */
@Composable
fun InfoDialog(
title: String?="Message",
desc: String?="Your Message",
onDismiss: () -> Unit
) {
Dialog(
onDismissRequest = onDismiss
) {
Box(
modifier = Modifier
.height(460.dp)
) {
Column(
modifier = Modifier
) {
Spacer(modifier = Modifier.height(130.dp))
Box(
modifier = Modifier
.height(490.dp)
.background(
color = MaterialTheme.colorScheme.onPrimary,
shape = RoundedCornerShape(25.dp, 10.dp, 25.dp, 10.dp)
)
) {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(24.dp))
Text(
text = title!!,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(top = 10.dp)
.fillMaxWidth(),
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onPrimaryContainer,
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = desc!!,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(top = 10.dp, start = 25.dp, end = 25.dp)
.fillMaxWidth(),
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onPrimaryContainer,
)
Spacer(modifier = Modifier.height(24.dp))
Button(
onClick = onDismiss,
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(5.dp))
) {
Text(
text = "Later",
color = Color.White
)
}
ElevatedButton(
onClick = onDismiss,
colors= ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary),
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(5.dp))
) {
Text(
text = "Enable Location",
color = Color.White
)
}
Spacer(modifier = Modifier.width(8.dp))
}
}
}
HeaderImage(
modifier = Modifier
.size(200.dp)
.align(Alignment.TopCenter)
/*.border(
border = BorderStroke(width = 5.dp, color = Color.White),
shape = CircleShape
)*/
)
}
}
}
In our : Header.kt (we need to .json file on res/raw's folder), you can download json file from https://accounts.lottiefiles.com/ (to use lottie .json file we need to add dependency from our build.gradle file : implementation "com.airbnb.android:lottie-compose:4.2.0")
package compose.material.theme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.animateLottieCompositionAsState
import com.airbnb.lottie.compose.rememberLottieComposition
@Composable
fun HeaderImage(modifier: Modifier) {
val composition by rememberLottieComposition(spec = LottieCompositionSpec.RawRes(R.raw.location))
val progress by animateLottieCompositionAsState(composition = composition)
LottieAnimation(
composition = composition,
progress = progress,
modifier = modifier
)
}
/*
* https://accounts.lottiefiles.com/
* */
..
..
..
Get More
Comments
Post a Comment