1. JetPack Compose Introduction

Updated: Sep 30, 2021

What’s JetPack Compose?

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.


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.


Sample Code and output



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"
     />

Java:

public class MainActivity extends AppCompatActivity {

    TextView tvName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_checkbox);
        tvName = findViewById(R.id.tv_name);
        tvName.setText("Hello World");
    }
}


Declarative UI This pattern is an emerging trend that allows the developers to design the user interface based on the data received. This on the other hand focuses on the what. This design paradigm makes use of one programming language to create an 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.


Advantages of JetPack Compose

  • It is very fast and offers a smooth performance.

  • It’s simple to learn.

  • It is possible to interoperate with an imperative approach.

  • Offers a better way to implement loose coupling principles.

  • It is 100% made in Kotlin which makes it a modern approach in Android development.

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!")
}

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 here.


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"

Conclusion

We will see more composable functions in our upcoming tutorial.

Refer to the official tutorial page for some basic details about Jetpack Compose.

https://developer.android.com/jetpack/compose/tutorial


Sample projects available in Github

https://github.com/android/compose-samples



3,084 views1 comment

Recent Posts

See All

This site developed for Jetpack Compose tutorial. We will post tutorials frequently. You can also join our community by clicking login. 

  • Twitter
  • LinkedIn

You have any queries contact me. 

Subscribe for latest updates

Thanks for submitting!