MOBILE APPLICATION Lecture no 22

DEVELOPMENT
ADDING IMAGES USING
JETPACK COMPOSE
We can add images using image compose in jetpack compose
We can add the image in drawable just like we did for xml
First we need to import new image in drawable
Then we can add it anywhere in our app by refereeing it to that
folder
IMAGES COMPOSABLE
Column {
Spacer(modifier = Modifier.height(32.dp))
Image(
painter = painterResource(id = R.drawable.iiui_logo), // your image name
contentDescription = "App Logo",
modifier = Modifier
.size(150.dp)
.padding(8.dp),
contentScale = ContentScale.Crop
)
}
OUTPUT
NOTIFICATION BAR IN
JETPACK COMPOSE
Notification bar appear at the top of the screen
It allows the app to display an important message to the user in
form of
1. Toast
2. Snackbar
3. Topbar
4. dialog
SNACK BAR NOTIFICATION
Snakbar notification is used to display a message at the bottom of
the screen
It is similar to toast in term of looks as it captures minimum
attention
But the difference is that we need to manually dismiss it and it
doesn’t disappear on its own
EXAMPLE
val snackbarHostState = remember { SnackbarHostState() }
val coroutineScope = rememberCoroutineScope()

Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) }
) { paddingValues ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues)
.padding(16.dp)
)
EXAMPLE CONT…
{
Button(onClick = {
coroutineScope.launch {
snackbarHostState.showSnackbar(
message = "This is a notification",
actionLabel = "Dismiss"
) } }) {
Text("Show Notification")
} } } }
OUTPUT
TOP BAR
Just like toast and snackbar are displayed at the bottom of screen,
we can use toolbar to display notification at the top of the screen
MAIN ACTIVITY CLASS
var showMessage by remember { mutableStateOf(false) }
Column {
Spacer(Modifier.padding(32.dp))
Greeting(showMessage = showMessage, message =
"This is a top notification")
Spacer(Modifier.padding(32.dp))
Button(onClick = { showMessage = true }) {
Text("Show Top Notification")
}
COMPOSABLE
AnimatedVisibility(visible = showMessage) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(Color.Red)
.padding(16.dp)
){
Text(
text = message,
color = Color.White,
style = MaterialTheme.typography.bodyMedium
) } }
OUTPUT
SYSTEM NOTIFICATION
System notification displays notification in status bar
Most apps add notification in status bar
MAIN ACTVITY
private val CHANNEL_ID = "my_channel_id"
private val NOTIFICATION_ID = 101
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
createNotificationChannel()
setContent {
MyApplicationTheme {
Surface {
Button(onClick = {
showNotification()
}) {
Text("Show Notification")
} } } } }
SHOW NOTIFICATION
private fun showNotification() {
val builder = NotificationCompat.Builder(this, CHANNEL_ID)
.setSmallIcon(android.R.drawable.ic_dialog_info)
.setContentTitle("Simple Notification")
.setContentText("This is a notification from Jetpack Compose!")
.setPriority(NotificationCompat.PRIORITY_DEFAULT)

with(NotificationManagerCompat.from(this)) {
notify(NOTIFICATION_ID, builder.build())
}
}
CREATE NOTIFICATION
private fun createNotificationChannel() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
val name = "Sample Channel"
val descriptionText = "This channel is used for sample notifications"
val importance = NotificationManager.IMPORTANCE_DEFAULT
val channel = NotificationChannel(CHANNEL_ID, name, importance).apply {
description = descriptionText
}
val notificationManager: NotificationManager =
getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
notificationManager.createNotificationChannel(channel)
}
}
ANDROID MANIFEST
<uses-permission
android:name="android.permission.POST_NOTIFICATIONS" />
OUTPUT
DIALOG
AlertDialog(
onDismissRequest = { /* dismiss */ },
title = { Text("Important!") },
text = { Text("Are you sure?") },
confirmButton = { Button(onClick = { }) { Text("Yes") } }
)
OUTPUT