Jetpack Compose — EmptyComposeActivity

If you are new to compose and would like to know how to get started then check my previous article Jetpack Compose — Hello World.

If you have already enabled compose for your project then please follow along. In this article we will learn about few composable functions which are auto generated when we created an Empty Compose Activity.

If our minSdkVersion is 21 then we can see the Empty Compose Activity option in the New Android Activity window while creating a new Activity.

(In project window right-click the app folder and select New > Activity > Gallery... to see the below window)

Lets see how an Empty Compose Activity looks like:

We have the onCreate method which calls setContent{} block. The content under this block will be the root of the given activity.

Let us first see what the annotations in the above code snippet mean.

  1. @Composable : This annotation is used to make the function composable. A composable function can only be called from another composable function.
  2. @Preview : This annotation is used to show preview of a composable function in the Android Studio preview. We can pass parameters to this preview annotation to define the way in which the @Composable will be rendered within the preview. The showBackground (= true) parameter in the above code snippet will make @Composable use a default background. Other parameters that we can pass to this preview annotation are as below:

Now, we will see what the meaning of each composable functions in the Empty Compose Activity.

1. ComposeGettingStartedTheme: The name of this composable function may be different for your project. ‘ComposeGettingStarted’ is the name of my project so the composable theme function generated for you will start with your project name. We can find this composable function in Theme.kt class under ui > theme package. This composable function sets a default theme for the composable function passed within it.

2. Surface: This composable function is used to handle drawing shapes and providing elevation to the composable item inside it. We can set shape, elevation, borders, background and content color (used by text and icon components as default color).

3. Greeting: We can name this composable function anything we want. This is the function where we create our layout.

4. Text: This composable function is used to show text in our layout. It is similar to TextView we used in our xml layouts. We can pass the following parameters to Text composable function:

5. DefaultPreview: This composable function has @Preview annotation so this function is used to show the preview of the composable function passed within it in the Android Studio preview.

I hope we are now clear with the what Android Studio has for us in the Empty Compose Activity. Its time we start creating our own composable functions and begin this journey of creating layouts with Jetpack Compose.

Take Care!!🙂

#Android_Enthusiast , #Problem_solver, #Senior_Software_Engineer by Profession. I have experience of working on 20+ Android Applications in various domains.