Building UI in Jetpack Compose in Android

In the android Compact, we use LinearLayout, Relativelayout and what not to design the UI. Then we started using ConstraintLayouts to design UIs. But we still missed the trick to designing declarative UI in Android. We had a lot of different libraries to do it, but none of them had a native Android Support.
In Google IO ’19 Summit, Google launched Jetpack Compose to create declarative UI. So, basically, declarative UI means to create UI by specifying a specific set of UI elements we need and to structure it some way. Example Flutter, React , Litho etc.
Jetpack Compose is currently in Developer Preview. You should be on 4.1 Canary build of Android Studio.
After Installation Android Studio Canary you need to setup for your first Jetpack compose application so you need to check the official page
After follow the setup instructions you finally build your first Jetpack compose application congratulations!

Now you can see MainActivity class inherited from AppCompatActivity.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Greeting("Android")
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
Greeting("Android")
}
}Now let’s take look to code.
What is MaterialTheme?
This component defines the styling principles from the Material design specification. It must be present within a hierarchy of components that includes Material components, as it defines key values such as base colors and typography.
What is @Composable or Composable function?
Functions are the fundamental building blocks of an application built with Compose.
What is @Preview Annotation Mean?
Preview can be applied to @Composable methods with no parameters to show them in the Android Studio preview.
For checking purpose remove @Preview above DefaultPreview() and then press Build & Refresh your preview gone.
Layouts in Jetpack Compose
UI elements are hierarchical, with elements contained in other elements. In Compose, you build a UI hierarchy by calling composable functions from other composable functions.
Column function lets you stack elements vertically. In this let’s discuss with an example of buttons
@Composable
fun Greeting(name: String) {
val onClick: () -> Unit = { Log.e("ButtonDemo", "onClick") }
Column(modifier = Spacing(10.dp)) {
Button("Contain Button",onClick, style = ContainedButtonStyle() )
HeightSpacer(32.dp)
Button("Text Button", onClick, style = OutlinedButtonStyle())
HeightSpacer(32.dp)
val icon = +imageResource(R.drawable.ic_add)
FloatingActionButton(icon = icon, onClick = onClick,color = Color.Red, elevation = 8.dp)
}
}- ContainedButtonStyle() — this will build a button with filled colors in the material design button.
- OutlinedButtonStyle() — this will only have an outline button with white color filled
Output

Let’s Show AlertDialog using Jetpack Compose
To create a Alert Dialog we need this code snippets
@Composable
fun ShowAlertDialog() {
val openDialog = +state { true }
if (openDialog.value) {
AlertDialog(
onCloseRequest = {
},
title = {
Text(text = "Title")
},
text = {
Text("This is alert dialog in jetpack compose!")
},
confirmButton = {
Button("Confirm", onClick = {
openDialog.value = false
})
},
dismissButton = {
Button("Dismiss", onClick = {
openDialog.value = false
})
},
buttonLayout = AlertDialogButtonLayout.Stacked
)
}
}- onCloseRequest— Executes when the user tries to dismiss the Dialog by clicking outside or pressing the back button.
- buttonLayout — Specifies how the buttons are positioned inside the dialog SideBySide or Stacked.
Output

Show BottomAppBar with Fab using Jetpack Compose
To Create BottomAppbar you need below code
@Composable
fun ShowBottomAppBar(){
Column(mainAxisAlignment = MainAxisAlignment.End) {
BottomAppBarCutoutFab(getMyActionImage = {
+imageResource(R.drawable.ic_home_icon)
}, getMyNavigationImage = {
+imageResource(R.drawable.ic_heart_icon)
})
}
}
@Composable
fun BottomAppBarCutoutFab(
getMyActionImage: () -> Image,
getMyNavigationImage: () -> Image) {
val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()
val navigationIcon: @Composable() () -> Unit = {
AppBarIcon(someNavigationImage) { /* doSomething()*/}
}
val actionData = listOf(someActionImage)
BottomAppBar(
navigationIcon = navigationIcon,
fabConfiguration = BottomAppBar.FabConfiguration(cutoutShape = CircleShape) {
FloatingActionButton(
color = +themeColor { secondary },
icon = +imageResource(R.drawable.ic_add_icon),
onClick = { /** doSomething() */ })
},
actionData = actionData
) { actionImage ->
AppBarIcon(actionImage) { /* doSomething()*/ }
}
}Column mainAxisAlignment — set mainAxisAlignment end to show Appbar at End in Activity
Output:

This is how we can work around with Jetpack Compose. To read more about it try https://developer.android.com/jetpack/compose.
Happy Coding….
