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


    Android App Developer

    sipgate GmbH
    Düsseldorf, Remote
    • Full Time
    apply now

    Android Build Engineer

    Pinterest
    San Francisco, CA | Seattle, WA
    • Full Time
    apply now

    Senior Mobile Systems SDK Engineer

    Sauce Labs
    Remote
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

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
Ask yourself a fairly standard question for any interview to fill an Android position:…
READ MORE
blog
This is part of a multi-part series about learning to use Jetpack Compose through…
READ MORE
blog
UI created with XML is traditionally tested with Espresso and UIAutomator. However, Jetpack Compose…
READ MORE
blog
It’s been almost a year since I wrote an article on how I handle…
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