Jetpack Compose Basics Part 1

Hello Devs,

Many of you know about Jetpack Compose and How it is getting Popular Nowadays

In this article, I am going to cover Three Question

1. What?
2. Why?
3. How?

What?

Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

Why?

It makes building Android UI faster and easier.

https://developer.android.com/jetpack/compose/why-adopt

How?

Many of you already knows that compose UI can be created simmilarly like Flutter

So, Let’s start with the basics steps to simply create Text Field

Gradle Used to Create a Sample Text Field

androidx.activity:activity-compose:1.3.1
androidx.compose:compose-compiler:1.0.1
androidx.navigation:navigation-compose:2.4.0-alpha06
androidx.compose.runtime:runtime:1.0.1
androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02
androidx.compose.ui:ui:1.0.1
androidx.compose.foundation:foundation:1.0.1
androidx.compose.ui:ui-tooling:1.0.1
androidx.compose.foundation:foundation-layout:1.0.1
androidx.compose.material:material:1.0.1
androidx.compose.runtime:runtime-saveable:1.0.1
androidx.compose.runtime:runtime-livedata:1.0.1

setContent {
  
    val scrollState = rememberScrollState()
    
    Column(
        modifier = Modifier.verticalScroll(scrollState)) {
        TitleComponent("Thank you for reading this artical")
    }
}
@Composable
fun TitleComponent(title: String) {
    Text(
        title, style = TextStyle(
            fontFamily = FontFamily.Monospace, 
            fontWeight = FontWeight.W900,
            fontSize = 14.sp, 
            color = Color.Black
        ), modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
    )
}
// Now to Get Preview of Your TextField in Android Studio
// Use Below Code
@Preview
@Composable
fun SimpleTextPreview() {
        Column(
                modifier = Modifier.
                verticalScroll(rememberScrollState())
        ) {
                TitleComponent("Thank you for reading this artical")
        }
}

Now Let’s Check How your Output looks like

Simple Right??

So this is about to basics or How to start with the Jetpack Compose

Photo by Hello I'm Nik on Unsplash

Thank you. Let's meet in the next article with some new Compose UI Component

Until then Good Bye :)

Do write your thoughts it really keeps me motivated

Jetpack Compose Basics Part 2