Blog Infos
Author
Published
Topics
,
Published
Designing your first composable.

 app and be used in production by millions of users.
We configured our Gradle and Kotlin versions, and now we are ready to start planning how we should build the following screen:

 

 

Jetpack Compose vs XML

 demonstrates in his amazing video, Thinking in compose, we start from the smaller pieces of UI and combine them to eventually form the screen we want.

 

Start small

What is a Composable?
@Composable
private fun ClickableTextButton(
    text: String,
    onClick: () -> Unit
)

Compose is similar in this way.

 

 

First Piece of the puzzle
@Composable
private fun ClickableTextButton(
text: String,
onClick: () -> Unit
) {
Box {
TextButton(
onClick = onClick,
modifier = Modifier
.padding(start = 15.dp, end = 15.dp, bottom = 20.dp)
.fillMaxWidth()
) {
Text(
text = text,
fontFamily = latoFamily,
fontWeight = FontWeight.Normal,
fontSize = 14.sp,
color = colorResource(id = R.color.lemonade_night),
modifier = Modifier.alpha(0.5f)
)
}
}
}
view raw TextButton.kt hosted with ❤ by GitHub

Job Offers

Job Offers


    Kotlin Backend Developer and Mobile Enthusiast (m/f/d)

    Axel Springer National Media & Tech
    Berlin
    • Full Time
    apply now

    Android Developer

    Small and Modern GmbH
    Hamburg, Remote (Germany)
    • Full Time
    apply now

    Senior Kotlin Android Entwickler (m/w/d)

    Deutsche Post IT Services (Berlin) GmbH
    Berlin
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

,

Orchestrate your UI tests with Conductor

In a world where a bug in a mobile application could cost millions and fixes take weeks to be deployed, detecting issues early is as important as ever. But the learning curve is steep, tests…
Watch Video

Orchestrate your UI tests with Conductor

DMITRY ZAYTSEV
Engineering Manager
mobile.dev

Orchestrate your UI tests with Conductor

DMITRY ZAYTSEV
Engineering Manager
mobile.dev

Orchestrate your UI tests with Conductor

DMITRY ZAYTSEV
Engineering Manager
mobile.dev

Jobs

Let’s break that down:
@Composable
fun ClickableTextButton(...) {
    Box(...) {
        TextButton(...) {
           Text(...)
        }
    }
}

Notice how every composable take a function as a parameter, it is a composable function and its signature looks like this:

@Composable
fun MyComposable(content: @Composable () -> Unit)
The Box

From the google developers website

The Text Button
TextButton(
   onClick = onClick,
   modifier = Modifier
            .padding(start = 15.dp, end = 15.dp, bottom = 20.dp)
            .fillMaxWidth()
)
The Text
Text(
    text = text,
    fontFamily = latoFamily,
    fontWeight = FontWeight.Normal,
    fontSize = 14.sp,
    color = colorResource(id = R.color.my_color)
)
Fonts
val latoFamily = FontFamily(
   Font(R.font.lato_bold, FontWeight.Bold),
   Font(R.font.lato_light, FontWeight.Light),
   Font(R.font.lato_regular, FontWeight.Normal),
)

The font assets should go under res/fonts like this:

 

 

Now our screen looks like this

 

 

That’s it for now!

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu