At the time I write this article, Jetpack Compose is still under alpha. I will provide dependencies version at the beginning of all articles, if you use different versions, the code may need to be adjusted.
// Project build.gradle
buildscript {
ext {
compose_version = '1.0.0-alpha06'
}
ext.kotlin_version = "1.4.10"
repositories {
google()
jcenter()
}
dependencies {
classpath "com.android.tools.build:gradle:4.2.0-alpha16"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
// ... Other code
// /app/build.gradle
plugins {
id 'com.android.application'
id 'kotlin-android'
}
android {
compileSdkVersion 30
defaultConfig {
applicationId "com.nextfunc.jetpackcomposeexample"
minSdkVersion 21
targetSdkVersion 30
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
useIR = true
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion compose_version
kotlinCompilerVersion '1.4.10'
}
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.2.1'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.ui:ui-tooling:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.0-beta01'
testImplementation 'junit:junit:4.13.1'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}
In this article, let’s learn how to show a dialog using Jetpack Compose.
1. Create an empty project
Launch your Android Studio and create a new empty Compose project. If you are not sure how to do this, you can read this article.
After creating project successfully, run the code and you will see “Hello Android” text. We will remove this text in next step.
2. Remove unnecessary code to have a blank screen
Open your MainActivity.kt, adjust the code (after this step, the app will show blank (white) screen).
package com.nextfunc.jetpackcomposeexample
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.ui.platform.setContent
import com.nextfunc.jetpackcomposeexample.ui.JetpackComposeExampleTheme
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeExampleTheme {
// A surface container using the 'background' color from the theme
Surface(color =
MaterialTheme.colors.background) {
}
}
}
}
}
3. Create new Composable to show a Button at the center of screen and the alert dialog
// ComposeDialogDemo.kt
package com.nextfunc.jetpackcomposeexample.demo.dialog
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.AlertDialog
import androidx.compose.material.Button
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@Composable
fun ComposeDialogDemo() {
// State to manage if the alert dialog is showing or not.
// Default is false (not showing)
val (showDialog, setShowDialog) = remember { mutableStateOf(false) }
Column(
// Make the column fill the whole screen space (width and height).
modifier = Modifier.fillMaxSize(),
// Place all children at center horizontally.
horizontalAlignment = Alignment.CenterHorizontally,
// Place all children at center vertically.
verticalArrangement = Arrangement.Center
) {
Button(
onClick = {
setShowDialog(true)
}) {
Text("Show Dialog")
}
// Create alert dialog, pass the showDialog state to this Composable
DialogDemo(showDialog, setShowDialog)
}
}
@Composable
fun DialogDemo(showDialog: Boolean, setShowDialog: (Boolean) -> Unit) {
if (showDialog) {
AlertDialog(
onDismissRequest = {
},
title = {
Text("Title")
},
confirmButton = {
Button(
onClick = {
// Change the state to close the dialog
setShowDialog(false)
},
) {
Text("Confirm")
}
},
dismissButton = {
Button(
onClick = {
// Change the state to close the dialog
setShowDialog(false)
},
) {
Text("Dismiss")
}
},
text = {
Text("This is a text on the dialog")
},
)
}
}
4. Add the Composable created in step 3 to blank screen in step 2
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeExampleTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
// New
ComposeDialogDemo()
}
}
}
}
}
Here is the result:
If you are looking for mobile/web Software Engineers to build you next projects, please Drop us your request!
Creator of Coflutter.
Founder & CTO at Bumbii Technology
Founder at Bumbii K12
Follow him on Twitter, Github, StackOverflow, LinkedIn, Upwork.
good info