Jetpack Compose
Shubham Sharma
Immediate Joiner (Kotlin | MVVM | Jetpack Compose | Flutter | React Native??)
Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will transform your data into a UI hierarchy. When the data changes or is updated then the framework automatically recalls these functions and updates the view for you. In this article, we will see some of the basic topics which are helpful before starting with Jetpack Compose.
What is Jetpack Compose??
Jetpack Compose is a modern UI toolkit recently launched by Google which is used for building native Android UI. It simplifies and accelerates the UI development with less code, Kotlin APIs, and powerful tools.?
Jetpack Compose is totally declarative programming, which means you can describe your user interface by invoking a set of composable.For past ten years we have been using a traditional way of imperative UI design.
Imperative programming vs Declarative programming
Imperative UI This is the most common paradigm. It involves having a separate prototype/model of the application’s UI. This design focuses on the how rather than the what. A good example is XML layouts in Android. We design the widgets and components which are then rendered for the user to see and interact with.
Imperative UI sample code:
XML:
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Kotlin:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_checkbox)
tvName.text = "Hello World"
}
}
Declarative UI
This emerging design trend emphasizes designing the user interface based on received data, focusing on "what" needs to be displayed. It promotes using a single programming language to create the entire application.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text(text = "Hello World")
}
}
}
In JetPack Compose there is no need for any xml code. We can create views using composable.
Composable Function
It's same as any function in programming. But we need to annotate with @Composable annotation.
Syntax:
@Composable
fun MethodName(parameter: String) {
//your content
}
Example:
领英推荐
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
In this example we created new composable function - Greeting(). We use the Text() as content. It's an inbuilt composable function. We can add composable functions to another composable function.
After creating a composable function we can use it as content.
Sample Hello world App using Jetpack Compose:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting("World")
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
What are the Benefits of Using Jetpack Compose??
What Challenges Do We Can Solve using Jetpack Compose??
Some Basic Functions of Jetpack Compose
Should I use Jetpack compose in my existing Android Studio?
If you are using stable version - Answer is No.
You need Android studio Beta Version. Beta version link .
And also you need to add some dependencies for Jetpack Compose.
//compose_version = '1.0.2'
implementation 'androidx.activity:activity-compose:1.3.0-alpha06'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"
Final thoughts
Compose provides a modern approach to defining your UI that enables you to separate concerns effectively. Because Composable functions are so similar to normal kotlin functions, the tools with which you write and refactor them will fit neatly into your kit of Android development skills.
In the next post, I’m going to shift the focus to some of the implementation details of Compose and its compiler. For additional resources on Compose, discover more here.
Sr. Android Developer | Passionate About Scalable & User-Centric Apps
12 个月Hello Good morning, I am stuck in an issue Could you please help me out
Thank you for sharing