Jetpack Compose: Compose Basics

Sagar Chapagain
May 21, 2020 · 5 min read

In this article, we will explore some common UI components that can be used while developing an application using Jetpack Compose.

Jetpack Compose is the declarative UI approach in native Android app development. It is currently in the pre-alpha stage. This article is the continuation of my previous article.

In Jetpack compose we can build a beautiful layout in a few minutes. It is based on material design principles and provides material design components out of the box.

Compose is built to support material design principles. Many of its UI elements implement material design out of the box.

Note: Updated for compose version 0.1.0-dev12

This article covers the following UI components and some stylings on them.

  1. Text
  2. Image
  3. Image Icon
  4. Column
  5. Row

Text

High level element that displays text and provides semantics/accessibility information

Let's start from MainActivity.kt created on a new project.

In the above code, composable function Greeting includes another composable function Text which appends the text Hello as a prefix to the parameter name and renders the text when the application is run.

The preview is displayed by another composable function DefaultPreview annotated with @Preview. The rendered preview is below.

On hovering the mouse pointer above Text, we can figure out the possible params that can be used.

We can add any parameters depending on our design requirements. Let's apply some of them on the Text as below.

The parameters for Text can be in any order and we can use only those we need. The rendered preview for Greeting is below.

Image

Image can be used to display image resources stored on the drawable folderres-> drawable as well as material image icons. For remote images we will discuss in coming articles.

For material icons:
To use material icons we have to include following material icon dependency in the app build.gradle.

In the main activity, the composable can be written as below.

Column

A layout composable that places its children in a vertical sequence.

The column is a composable layout in which other composable components can be placed in a vertical manner one after another. Let's place above two composable layouts in the Column.

The first one appears at the top and others appears below one after another as a book of stacks in a table.

Row

A layout composable that places its children in a horizontal sequence.

The Row is a composable layout in which other composable components can be placed in a horizontal manner side by side. Let’s create a row containing IconImage().

Combination of Row and Layout

Any composable layouts can be placed inside another composable. Lets put a row inside a column.

Wrapping Up

Let's combine all the above components in the main activity and build the app.

More detailed use of Rows and Columns can be found in this my sample application which calculates BMI based on entered age and weight.

Reference:
1. Android Compose Tutorial
2. Compose Sample

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store