Requesting Location Permission in Jetpack Compose - UI UX
UI for prominent disclosure when requesting for permissions from user.
I'm going to show you how to implement run time permission request with Jetpack Compose. The library which we are going to use is called Accompanist. Watch the video until the end!.
The rememberPermissionState(permission: String) API allows you to request a certain permission to the user and check for the status of the permission.
Step1:
A library which provides Android runtime permissions support for Jetpack Compose.
implementation 'com.google.accompanist:accompanist-permissions:0.24.13-rc'..
Step2:
In our AndroidManifeastxml we need to declare permission (in this example we are going to request location permission)
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
..
Step3:
In our MainActivity.kt we are calling this permission request function
class MainActivity : ComponentActivity() {
@OptIn(ExperimentalPermissionsApi::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Material3ComposeTheme {
RequestPermission(permission = Manifest.permission.ACCESS_FINE_LOCATION)
}
}
}
}..
Step4:
In this SinglePermission.kt, we are going to request permission from user, if user already deny means we will show simple alert dialog info message otherwise will show custom full screen dialog.
package compose.material.theme
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import com.google.accompanist.permissions.*
@ExperimentalPermissionsApi
@Composable
fun RequestPermission(
permission: String,
rationaleMessage: String = "To use this app's functionalities, you need to give us the permission.",
) {
val permissionState = rememberPermissionState(permission)
HandleRequest(
permissionState = permissionState,
deniedContent = { shouldShowRationale ->
PermissionDeniedContent(
rationaleMessage = rationaleMessage,
shouldShowRationale = shouldShowRationale
) { permissionState.launchPermissionRequest() }
},
content = {
/* Content(
text = "PERMISSION GRANTED!",
showButton = false
) {}*/
}
)
}
@ExperimentalPermissionsApi
@Composable
fun HandleRequest(
permissionState: PermissionState,
deniedContent: @Composable (Boolean) -> Unit,
content: @Composable () -> Unit
) {
when (permissionState.status) {
is PermissionStatus.Granted -> {
content()
}
is PermissionStatus.Denied -> {
deniedContent(permissionState.status.shouldShowRationale)
}
}
}
@Composable
fun Content(showButton: Boolean = true, onClick: () -> Unit) {
if (showButton) {
val enableLocation = remember { mutableStateOf(true) }
if (enableLocation.value) {
CustomDialogLocation(
title = "Turn On Location Service",
desc = "Explore the world without getting lost and keep the track of your location.\n\nGive this app a permission to proceed. If it doesn't work, then you'll have to do it manually from the settings.",
enableLocation,
onClick
)
}
}
}
@ExperimentalPermissionsApi
@Composable
fun PermissionDeniedContent(
rationaleMessage: String,
shouldShowRationale: Boolean,
onRequestPermission: () -> Unit
) {
if (shouldShowRationale) {
AlertDialog(
onDismissRequest = {},
title = {
Text(
text = "Permission Request",
style = TextStyle(
fontSize = MaterialTheme.typography.headlineLarge.fontSize,
fontWeight = FontWeight.Bold
)
)
},
text = {
Text(rationaleMessage)
},
confirmButton = {
Button(onClick = onRequestPermission) {
Text("Give Permission")
}
}
)
}
else {
Content(onClick = onRequestPermission)
}
}..
Step 5:
In this CustomDialogLocation.kt, we make custom dialog in android jetpack compose.
package compose.material.theme
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
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
* Dialog : https://www.boltuix.com/2022/07/compose-custom-animating-dialog.html
* */
@Composable
fun CustomDialogLocation(
title: String? = "Message",
desc: String? = "Your Message",
enableLocation: MutableState<Boolean>,
onClick: () -> Unit
) {
Dialog(
onDismissRequest = { enableLocation.value = false}
) {
Box(
modifier = Modifier.padding(top = 20.dp, bottom = 20.dp)
// .width(300.dp)
// .height(164.dp)
.background(
color = MaterialTheme.colorScheme.onPrimary,
shape = RoundedCornerShape(25.dp,5.dp,25.dp,5.dp)
)
.verticalScroll(rememberScrollState())
) {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
//.........................Image: preview
Image(
painter = painterResource(id = R.drawable.permission_location),
contentDescription = null,
contentScale = ContentScale.Fit,
/* colorFilter = ColorFilter.tint(
color = MaterialTheme.colorScheme.primary
),*/
modifier = Modifier
.padding(top = 5.dp)
.height(320.dp)
.fillMaxWidth(),
)
//.........................Spacer
//.........................Text: title
Text(
text = title!!,
textAlign = TextAlign.Center,
modifier = Modifier
// .padding(top = 5.dp)
.fillMaxWidth(),
letterSpacing = 2.sp,
fontWeight = FontWeight.Bold,
style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.primary,
)
Spacer(modifier = Modifier.height(8.dp))
//.........................Text : description
Text(
text = desc!!,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(top = 10.dp, start = 25.dp, end = 25.dp)
.fillMaxWidth(),
letterSpacing = 1.sp,
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.primary,
)
//.........................Spacer
Spacer(modifier = Modifier.height(24.dp))
//.........................Button : OK button
val cornerRadius = 16.dp
val gradientColors = listOf(Color(0xFFff669f), Color(0xFFff8961))
val roundedCornerShape = RoundedCornerShape(topStart = 30.dp,bottomEnd = 30.dp)
Button(
modifier = Modifier
.fillMaxWidth()
.padding(start = 32.dp, end = 32.dp),
onClick=onClick,
contentPadding = PaddingValues(),
colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent
),
shape = RoundedCornerShape(cornerRadius)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(
brush = Brush.horizontalGradient(colors = gradientColors),
shape = roundedCornerShape
)
.padding(horizontal = 16.dp, vertical = 8.dp),
contentAlignment = Alignment.Center
) {
Text(
text ="Enable",
fontSize = 20.sp,
color = Color.White
)
}
}
//.........................Spacer
Spacer(modifier = Modifier.height(12.dp))
TextButton(onClick = {
enableLocation.value = false
}) { Text("Cancel", style = MaterialTheme.typography.labelLarge) }
Spacer(modifier = Modifier.height(24.dp))
}
}
}
}
..
..
Comments
Post a Comment