Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android.

In the first design, we will draw a birthday greeting card like the above. For the “message” and “from” strings, we will use Text Composable. Let’s make a Composable function BirthdayGreetingWithText() and pass two parameters, one for the “message” and one for the “from” text. To align it in a vertical arrangement, we use the Column function.

To specify the text size of the text, Text Composable takes a parameter — fontSize. We can specify the text size with sp extension available in TextUnit Class. We can also set the text color by specifying it in the color param in Text Composable. There is a modifier param as well which allows us to specify the alignment, padding, width, height, etc.

To add background color, we can add this column inside a Surface and give color to that, let’s try that.

How do we preview this?

To preview this, we have to create a composable function with @Preview annotation to be able to see the UI in the Design tab.

Build and refresh and you will get to see something like this in the Design preview. It is a surface with a Magenta color with two Text Composable in vertical arrangement aligned in the center horizontal in white color and some padding with some fontSize.

To add an image to the greeting card, let’s use Image Composable. painterResource Composable uses the parameter id of the drawable and returns painter which can be used in Image Composable. Feel free to choose any drawable image that feels attractive in your greeting card.

Let’s make another Composable function BirthdayGreetingWithImage() with 3 params — message, from, and image. Let’s use a Box layout for this. The box layout is used to stack elements on top of one another. Box layout also lets you configure the specific alignment of the elements that it contains.

Let’s preview the greeting card with image and text.

In this design, let’s create a Compose article UI. This contains an image with full-screen width. It has 3 text elements with some font size and padding. The second and third text elements are in Justify text alignment. Note that all the elements are placed in vertical order. So, we can use Column Composable to arrange the elements. Let’s write a Composable function — ComposeArticle() that accepts one image and 3 text values.

To align text in Justify, we can set the textAlign param in Text Composable as TextAlign.Justify. To preview this, let’s add another function — ComposeArticlePreview()

In this design, we will create a design that looks like a task manager, which shows the UI like above when all your tasks are done. It has an image and 2 text elements. All the items are center-aligned horizontally and vertically. Let’s write a Composable function — TaskManager() for this.

To set the elements in the vertical center, we have assigned the value Arrangement.Center to verticalArrangement param in Column Composable. And to set elements in the horizontal center, we have used Alignment.CenterHorizontally in horizontalAlignment param in Column Composable. Let’s preview this by writing another Preview Composable function — TaskManagerPreview()

In this design, the screen is divided into 4 quadrants. Each Quadrant has 2 text elements in the center of that quadrant. All quadrants have different colors.

Let’s first draw what one card (quadrant) looks like. Each card has 2 text elements. The second text uses Justify as text alignment. The first one is bold. And both text combined is placed in the center horizontally and vertically.

If we preview this, this will show one quadrant preview.

Now, we have to show 4 quadrants. For this, we can use 2 rows in a column. To assign each composable quadrant equal width, set the modifier weight as 1f in each card composable. And to set each quadrant of equal height, set modifier weight as 1f in each row in the column. Let’s look into the code.

Let’s preview this.

In this design, we will create a business card Composable. There are two sections in it. One is the top layer in which we have an image and two text elements. It is placed in the center horizontally. Let’s create a Composable for the top portion — BusinessCardTop()

Let’s preview this and see how does it look like,

Great! Now, let’s look at the bottom section. The bottom section has 3 rows arranged in a column. Each row has an image and a text. Let’s also add some padding to them to make them look nice.

Let’s preview this and see how does it look like.

Awesome! The row item is ready. Let’s add 3 rows in a column. Add your different contact details here.

Let’s preview this.

Going well so far. We have the top section ready and we have the bottom section ready. Now, let’s make some changes and add some weight to the UI.

This article was originally published on proandroiddev.com on October 27, 2022