Android App Development

Introduction to Jetpack Compose

January 27, 2022

Build better apps faster with Jetpack Compose

In this post, i will try to explain what is jetpack compose and how to setup environment, creating project for jetpack compose.

Overview

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. It makes building Android UI faster and easier.

Android isn’t the only supported platform. For start, you can use it in Web and Desktop — Multiplatform apps.

Advantages of Jetpack Compose(Pros)

  • Writing less code affects all stages of development.
  • Compose uses a declarative API, which means that all you need to do is describe your UI.
  • Compose is compatible with all your existing code.
  • It is easy to update and easy to test.
  • It is easily compatible with the existing views present in Android.
  • It increase the development speed.
  • It removes the boilerplate of findViewById or ViewBinding references.

Disadvantages of Jetpack Compose(Cons)

  • The downside of this solution is re-rendering preview each time code will change and builds are not that fast.
  • It’s little slower than xml to render a change.(Try to build release build with turn off debug logs and should be works fine 😊 )
  • Some components are not supported, and some features are is coming. You can take a look roadmap.

Setup Instructions

  • Install the last version of Android Studio from this.
  • Create an app using the Empty Compose Activity template. The default template already contains some Compose elements.
Empty Compose Activity
Finish to Creating Compose Project
  • Update to compose version to “1.0.5” in the root compose_version build.gradle file.
root/build.gradle
  • Also update kotlin version to “1.5.31” that cause of you do not get build error.
root/build.gradle
  • Now you are ready.
Project

Theme in Compose

Jetpack Compose offers an implementation of Material Design, a comprehensive design system for creating digital interfaces. A Material Theme contains colortypography and shape attributes. When you customize these attributes, your changes are automatically reflected in the components you use to build your app.

@Composable
fun JetComposeDemoTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}

MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}

Color: Colors are modelled in Compose with the Color class, a simple data-holding class. Styling with colors from the wrapped theme is easy and you can use values from the theme anywhere a color is needed.

package com.developersancho.jetcomposedemo.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
private val DarkColorPalette = darkColors(
primary = Purple200,
primaryVariant = Purple700,
secondary = Teal200
)

private val LightColorPalette = lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Teal200

Typography: Material defines a type system, encouraging you to use a small number of semantically-named styles.

package com.developersancho.jetcomposedemo.ui.theme

import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

// Set of Material typography styles to start with
val Typography = Typography(
body1 = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 16.sp
)
/* Other default text styles to override
button = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.W500,
fontSize = 14.sp
),
caption = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 12.sp
)
*/
)

Shape: Material defines a shape system, allowing you to define shapes for large, medium, and small components.

package com.developersancho.jetcomposedemo.ui.theme

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dp

val Shapes = Shapes(
small = RoundedCornerShape(4.dp),
medium = RoundedCornerShape(4.dp),
large = RoundedCornerShape(0.dp)
)

MainActivity in Compose

In order to start developing with Jetpack compose, we need a Class that is inherited from the Activity or Fragment classes.

setContent{}: This block defines the activity’s layout where we call composable functions.(in xml like “setContentView(R.layout.activity_main)” )

Surface(): Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface casts shadows.

Modifiers: Could be compared to xml attributes that you traditionally use to style your UI. Applied matters and by leveraging padding and coloring in various orders we can achieve many different UI combinations.

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetComposeDemoTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Innovance")
}
}
}
}
}

Text(): This puts a text view on screen. Also the function that is defined by the Compose UI library displays a text label on the screen.(in xml like “TextView” )

@Composable: This annotation specifies the following method is using Jetpack compose for creating views.

  • Composable functions can only be called from other composable functions. Jetpack Compose uses a Kotlin compiler plugin to transform these composable functions into the app’s UI elements.
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name :)")
}

@Preview: This annotation will be shown onto the studio’s design section. Preview is just for the development, when we run in actual device it’s not gonna be useful.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetComposeDemoTheme {
Greeting("Innovance")
}
}
Preview

One More Things

  • Jetpack Compose is built around Kotlin. In some cases, Kotlin provides special idioms that make it easier to write good Compose code.
  • Jetpack Compose is like Flutter has widgets and xml has Views etc.
  • Compose methods should start with capital letters.
  • We define spacing using padding there is no margin concept for composables.

References

Happy coding!

Author: Mesut Genç

Tags

Android App Development Declarative UI Jetpack Compose Kotlin