Android Jetpack Compose Basics & App Review

Hello fellow developers, several months have passed since my last article. The reason behind my silence is actually good news. I am so happy to announce that I have landed a job. 💪🎊 The name of the company I joined is @Getir. Getir is one of the most successful companies here in Turkey and last month we have become the second unicorn company in Turkey. It’s been 5 months here and I am really getting used to professional experience. This is so exciting!

After a short catch-up session, let me continue with the topic. In February Jetpack Compose Beta version is announced and I wanted to try this new API and write about it. (Actually, I have tried it months ago but let's not dig into that :))

What is Jetpack Compose?

Jetpack Compose is a new UI toolkit announced by Google to make it faster and easier native apps. One of the most important features is Compose offers declarative APIs!

Today, we’re launching the beta release of Jetpack Compose, our new UI toolkit designed to make it faster and easier to build native apps across all Android platforms. Compose offers modern, declarative Kotlin APIs, helping you build beautiful, responsive apps with way less code. Built to integrate with existing Android apps and Jetpack libraries, you can adopt Compose at your own pace by combining Android Views and Compose.

Benefits

1. Concise and Idiomatic Kotlin

Built with the benefits that Kotlin brings

2. Declarative

Fully declarative for defining UI components, including drawing and creating custom layouts

3. Compatible

Compatible with existing views

4. Enable Beautiful Apps

Designed with Material Design out of the box and animations from the start

5. Accelerate Development

Accelerate development by writing less code and using tools

What we have in Beta?

• Coroutines support
• Accessibility support for Talkback — support for other technologies will be in Stable
• Easy to use Animations, with a completely new API since alpha.
• Interoperability with Views
• Material UI Components, all with @Sampled code
• Lazy Lists — Jetpack Compose’s take on RecyclerView
• DSL-based Constraint Layout
• Modifiers
• Testing
• Theming and Graphics, with easy support for Dark and Light mode
• Input and gestures
• Text and editable text
• Window management

Building an App with Jetpack Compose

First of all, you need to download and use the Canary version of Android Studio Arctic Fox.

Select a new project above, after that select “Empty Compose Activity”.

Select a new project above, after that select “Empty Compose Activity”.

buildFeatures {
    compose true
}

Don't forget to set the compose flag in build.gradle.

SetContent method in onCreate is basically the XML layout of the activity. We will call composable functions there. I will move with my compose app which I did for #AndroidDevChallenge week 1. But first, let’s create a composable function as an example.

The benefit of using compose is you can make an app with component-based architecture easily. Just write your all components separately and call them in a single layout. Simple as that.

“Preview” annotation allows us to see and make changes to our component without run the app.

Column & Row: You can think Column is the linear layout basically and row is the horizontal linear layout.

Modifier: Modifier is a collection of elements used for decorating or adding behavior to UI elements like backgrounds, padding, etc.

MovieItem() is our composable item and it will look like this

Let’s Review My Adoption App

In the case of my adoption app, my pet item is 👆

Surface

@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: () -> Unit
): @Composable Unit

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.

Text

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): @Composable Unit

As you can see from the Text component, you can give attributes like style, textAlign, fontWeight like in the example.

LazyColumn

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    content: LazyListScope.() -> Unit
): @Composable Unit

A LazyColumn is a scrolling list that lists currently visible items. It’s similar to a recycler view. I didn't use the Button component here, I gave a click event to every item to open the detail screen.

I hope this article helps you to understand the Compose even a little bit and its implementation. See you in another article. Bye!

Github repo: https://github.com/CanerGures/Adoption-App-Jetpack-Compose

Let's connect: https://www.linkedin.com/in/canergures/