Your First Kotlin Android App: An App From Scratch

Transcript: 06. Get Started with Jetpack Compose

Ever since the first Android phones were released over a decade ago, the development tools for creating Android apps have evolved at a rapid pace.

Android developers have the constant challenge of keeping up with the software development kit advancements that occur year after year.

At the 2019 Google IO event, Google introduced Jetpack Compose or Compose for short, which is the fancy new way to create user interfaces for Android apps.

One of the cool things about Jetpack Compose is that your user interfaces are created completely in code. While you’re coding, you can see a dynamic preview of this code in the design view in Android Studio.

This is nice because Compose, in combination with Android Studio’s tooling, gives you the benefits of being able to visualize your work as you go. It also makes working with Compose really nice in a real-world, team-based environment.

Google has been promoting Jetpack Compose as the preferred way to build new apps for many reasons, for example:

• You require less code to build a Compose-based user interfaces.
• Jetpack Compose adopts the declarative approach to build user interfaces, so you just describe your UI, and they update accordingly to state changes. This also means it’s way easier to build and test reusable UI components.

So if you have to write less code, easily create reusable components that can be tested, have a live preview as you code your UI, what do you think happens?

Yep, you got it right…

• This leads to faster development, which reduces the time to ship your Android apps. All thanks to the power of Jetpack Compose and Android Studio’s development tools.
• Plus, it’s plain fun! As you’ll see for yourself in this course, creating beautiful user interfaces with Compose is pure joy.

It’s important to know that Jetpack Compose isn’t the only way of making user interfaces on Android. You can also use something called Views, which is the framework that Android developers had to use before Compose was released.

The View approach adopts the imperative pattern of building user interfaces. This means that when the app state changes, you have to manually select a view you want to update, and this can lead to state-related bugs if you fail to update the correct view.

Also, the Views are created in XML, which stands for Extensible Markup Language. Unlike Jetpack Compose where your UI is declared in Kotlin code, you don’t need to manage UI logic in separate files or different languages.

We can go on and on about the challenges of building Android apps with the view-based approach, but one thing is certain: Jetpack Compose makes creating beautiful user interfaces with fewer bottlenecks compared to the earlier approach.

Now, I want to point out that the View approach is still a valid way to make Android apps. In fact, I’d say there are still probably more developers using Views than Jetpack Compose.

If Jetpack Compose is so great, why is that?

Well, there are three main reasons:

First - Compose only works on Android 5 or later. Even though Android 13 is out now, some companies need to support earlier versions of Android and are just getting to a place where they can start switching to Compose.

Second - Compose is still not as mature as Views. Think about it: Views have been out since the early days of Android, so there was a lot of time to get things right.

But Jetpack Compose is much younger. This means there are still some missing features and rough edges. Some companies still want to give Compose a little more time to catch up, or they’ll have to use some Views to account for missing features. Yes, you can actually have a part of your app using Views or Compose interchangeably.

Third and finally - many companies have already written their apps using Views. It can be a ton of work to rewrite an entire app in Jetpack Compose! So, a lot of that old View-based legacy code will remain for quite some time.

So, now its time to answer your burning question…

…which should I learn: Jetpack Compose or Views?

As of today, here’s our answer.

It’s both!

If you’re serious about being a professional Android developer, our recommendation is to learn both Compose and Views.

Learning Compose is important because it’s the future of Android development. Compose is huge, and there’s a lot to learn, so it’s a good idea to get started now. And if you’re making a new app, you can make it with Compose today.

Learning the View-based approach is important too. If you end up working at a company that already has an Android app shipped to the Play Store, there’s a high chance that it’s using Views. So if you want to work at one of those companies, it’s important for you to be able to work with those codebases too.

I also want to point out that it’s not all or nothing: it’s possible to make a certain part of your app with Compose, and the rest with Views.

As companies begin to transition from Views to Compose, we expect to see many codebases with a mixture of both Compose and View code in the years ahead.

Let me give you a brief overview of the starter code. You don’t need to understand everything I explain now as we’ll still cover them in this course and down the learning path.

First, you have the MainActivity class. For most Compose-based apps, you just need one.

Years back and before Compose, an Activity used to represent one screen. So a Login screen is one activity and a Profile screen would be another Activity. But over the years, Android have provided APIs to improve the navigation process. Now an Activity in this case is the entry point for the content of your app.

And inside it, it has an onCreate function. You know it’s a function because it is denoted with the fun keyword. And a function or method in Kotlin just represents an action. So this action would run when you open your app and the MainActivity is created.

And what do we want to do when the Activity is created? Simple!!! We want to set the content of the screen to the Greeting composable. And that’s the basic explanation of the code in the MainActivity.

Don’t worry about what a Surface or a theme is, you’ll learn about them when you style your app in the next course in the learning path. You’ll also learn what a class is later in this course.

Now, if you look at the Greeting function, you can see something called a Composable above it. We’ll talk about composables in the next episode, but for now, you can call it a UI element, a widget, or a component.

@Composable as used here is an annotation because it is preceded by the @ symbol. An annotation in Kotlin simply attaches metadata to a construct, in this case, a function. So with this, Kotlin and Android knows that this function represents a part of a UI and it should act accordingly.

For example, the composable annotation tells Android that this function can only be called inside a composable. And this means that Surface from the MainActivity is also a composable.

Inside this, we display a Text composable. To show you that Text is a composable, hold down the Cmd key and click on it. This takes you to its definition, and you can see the @Composable annotation above the Text definition.

Let’s head back to the main activity.

Next, below the Greeting composable is another composable named GreetingPreview. But this time around, it has an additional annotation, @Preview. This function simply displays the composable passed to it in Android Studio’s Live Preview feature. In this case, the Greeting composable will be displayed in the preview window.

To see Live preview in action, go ahead and click on the “split” tab above. If you havent built and ran your app like we did in the previous episode, you should see a message telling you to build and refresh you app in order to see the preview.

Go ahead and click “Build and Refresh” if you see it.

Now you can see the composable displayed. The Live Preview just gives you a quick visual feedback of the UI we’re building in real time. You dont have to run your app on a device or emulator to see how it looks. This helps to speed up development time.

So i can easily change “Hello” to “Hi” like so…

Text(text = "Hi $name!")

And it updates almost instantly in the preview panel and also in the emulator.

The Preview window will come in handy as you build Bullseye.

This is first course in our “Android & Kotlin for Beginners” learning path, and we’re taking a Compose-first approach here because Compose is the future of Android development.

This way, you can be sure that you’re learning the latest and greatest techniques, making your skills future-proof and in high demand.

If you follow along with this course, and then continue on through the rest of the courses as recommended by “Android & Kotlin for Beginners” learning path, you’ll get a solid start developing Android apps and you’ll build up your programming skills in Kotlin.

Once you’re done with this learning path, there’s still more to do! You can move onto more advanced learning paths, like Android User Interfaces, Android Data and Networking, and Android IDEs and Tools. Where you go next depends on what you want or need to learn. There’s no wrong choice.

Now, do note that some of these courses still uses the View approach and we’re constantly updating our library as we fully transition to Compose. So don’t be put off if you come across a course that uses Views. We’re also on the Jetpack Compose transition train too 🙂

So for new Android developers having to learn two ways of creating user interfaces at once, these are definitely some interesting times.

But hey!!! Learning new things is part of the joy of being a programmer. We’re loving learning Jetpack Compose and are so excited to be on the cutting edge of the future, and we hope you enjoy this journey with us!

Let’s start building Bullseye in the next episode.