Jetpack Compose
Leave a rating/review
Notes: 01. Review Android UI Toolkit
At the time of the recording of this video course, the Android Studio version that was being used was Canary. Since then, new versions of Android Studio, Kotlin and Compose have launched. We have reviewed the course and all content and materials are updated as of September 2022.
Check out the Room Database: Getting Started if you want to explore the Librarian application project and how its built internally.
Intro
[Slide 1 - App UI with Yeti]
Every single application you build needs to have a user interface. Otherwise, the users won’t be able to use it! :]
[Slide 2 - Visually appealing apps]
It’s not just important that you have an interface, it’s also important that it’s visually appealing, and that you build components that have a reusable design system.
Most applications use the same style for their components, to be consistent. It helps users navigate the app, and it helps developers develop them, as you don’t have to build ten or twenty different complex components, you just need three or four that you use all over.
[Slide 3 - Heavily Coupled UI issues]
However, the UI Toolkit Android has been using for years is not that helpful, when it comes to reusability.
The issue is that the UI definition and logic are completely separate entities for the most part. You define the UI or the layouts of your screens in XML.
But the logic and behavior of the components you’ve built is defined through Kotlin or Java code. This means you have to connect the XML definition with the Kotlin code, just to make things work.
This is very tedious, and generates a lot of boilerplate code, as you can’t just copy over the components you’ve built to a different screen, or a different project even!
[Slide 4 - Overhead]
So this means you have to learn two or three languages, to just write one screen. And for that one screen, you often need to define two or three, or even more files, just to make it work, and build the code in a clean way.
That’s a lot of overhead for each developer, and tons of boilerplate code you need to write.
[Slide 5 - UI Toolkit deprecation]
And finally, the UI toolkit we use currently, with Views and ViewGroups and lots of other things is soooo old. It’s over 10 years old, and every year brought new features, and tons of new issues, API challenges and limitation, and deprecated code.
If you ever opened the View class from Android, you’d notice how many thousands of lines of code it has. Or if you open a user-facing component such as a Button, or an EditText, you’d see how many layers of inheritance those classes have.
This just shows how poorly designed the system was, or rather how quickly it was developed, without thinking about optimizations and composition over inheritance.
[Slide 6 - Jetpack Compose]
It would be awesome if there was a reusable UI framework in Android, that favors composition and lets you write your UI all in the same language as your business logic, while being optimized and beautiful! That’s just too much to ask for, right?
Not anymore! Fast forward to 2019. and 2020., there’s a new player in the UI toolkit town, called Jetpack Compose!
Jetpack Compose is a fully Kotlin based, DSL-like set of fresh components that let you develop your apps in a beautiful, reusable and fast way!
[Slide 7 - Composable functions]
At the heart of Compose lie Composable functions. Such functions let the special Kotlin compiler know that you’re building UI components, which lets you preview them directly in Android studio.
Every Composable function uses the @Composable annotation, and you can only use compose within such functions. Similar to how you can only call suspend functions within coroutines or other suspend functions.
This limits the toolkit to be used only within itself, promoting security in your apps.
[Slide 8 - Declarative functions]
Additionally, Composable functions are declarative by nature, meaning you don’t tell the UI to show data, to change or to add something new to the tree.
You instead create a declarative definition, which tells the UI how to draw itself. Within it you also define how different states in the UI should be handled and it automatically lets the system adapt to the state. You’ll learn more about it later, but it’s said that Jetpack Compose is a function of state. Meaning any time the state changes, so does the Compose UI.
[Slide 9 - Project]
I hope you’re really excited to learn about compose! You’ll be learning lots about the topic in this course, by building an awesome app called Librarian.
Librarian is an app where you can add your books to a library, and review them. This app was also featured in the Room Database: Getting Started course, so if you want to learn more about how it works, make sure to check out that course!
[Switch to project]
To open the Librarian project, you need Android Studio 4 Canary, as compose and its compiler are beta features!
Because Compose and the Canary versions of Android Studio are developing quickly, the course version might be different from the newest, but things should work fine even if you use a newer version! :]
After you open the project, you should see the following structure.
[Show structure]
For the most part, you’ll only be working within the ui package! In the last part of the course you’ll also add some architecture and expand the di package, which stands for Dependency Injection.
As the application’s logic is fully built and prepared for you, there’s not much to explain, but if you want to dive into the repository, database and model packages, check out the previously mentioned Room Database: Getting Started course.
The app’s UI however has several features. You can add books, reading lists and book reviews for starters. This is the entry point for new data to be shown in the app.
After that, you have the books, reviews and reading lists fragments on the Main screen, used to show this data.
The rest of the features, such as the bookReviewDetails and readingListDetails are used to show the details of those pieces of data, and let you add even more specialized data, such as reading entries to your reviews, and books to your reading lists.
You can have as many books, reviews and reading lists as you want! You will also be able to delete them, filter the books and add more items to each of the lists! :]
Pretty cool. If you open the final project of the course, you’ll see how all of this nicely comes together in a clean and beautiful app, that works with both dark and light modes!
But I’m sure you’re dying to dive into the code and Jetpack Compose, so let’s do that, in the next episode! :]