Understanding the Declarative Paradigm

Jetpack Compose marks a fundamental shift in Android UI development. While the traditional view-based approach is centered on components and classes, the new framework follows a declarative approach.

In Chapter 1, Building Your First Compose App, I introduced you to composable functions, the basic building blocks of a Compose-based UI. In this chapter, we will briefly review how Android UIs are implemented with traditional classes and techniques. You will learn about some issues of this approach, and how a declarative framework helps overcome them.

The main sections of this chapter are set out as follows:

• Looking at the Android view system
• Moving from components to composable functions
• Examining architectural concepts

We’ll start by looking at my second sample app, HelloView. It is a re-implementation of the Hello app from Chapter 1, Building Your First Compose App. HelloView uses views, an XML layout file,...

Technical requirements

Please refer to the Technical requirements section of Chapter 1, Building Your First Compose App, for information about how to install and set up Android Studio and how to get the sample apps. This chapter covers the HelloView and Factorial samples.

Looking at the Android view system

The traditional approach to building Android UIs is to define component trees and modify them during runtime. While this can be done completely programmatically, the preferred way is to create layout files. They use XML tags and attributes to define which UI elements should be presented on screen. Let’s take a look:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <TextView
    android:id="@+id/message"
    style="@style/TextAppearance.Material3.BodyLarge"
    android:layout_width="wrap_content"
  ...

Moving from components to composable functions

So far, I explained the word component by saying that it refers to UI elements. In fact, the term is used in quite a few other areas. Generally speaking, components structure systems by separating distinct portions or parts of them. The inner workings of a component are typically hidden from the outside (known as the black box principle).

Tip

To learn more about the black box principle, please refer to https://en.wikipedia.org/wiki/Black_box.

Components communicate with other parts of the system by sending and receiving messages. The appearance or behavior of a component is controlled through a set of attributes, or properties.

Consider TextView. We set text by modifying the text property and we control its visibility through visibility. What about sending and receiving messages? Let’s look at Button. We can react to clicks (receive a message) by registering (sending a message) an OnClickListener instance. The same principle...

Examining architectural aspects

In the Component hierarchies section, I showed you that component-based UI frameworks rely on specialization. General features and concepts are implemented in the root component or one of its immediate successors. Such general features include the following:

• Location and size on screen
• Basic visual aspects such as background (color)
• Simple user interactions (reacting to clicks)

Any component will provide these features, either in a specialized way or in its basic implementation. Android’s view system is class-based, so changing functionality is done by overriding the methods of the parent.

Composable functions, on the other hand, do not have a shared set of properties. By annotating a function with @Composable, we make certain parts of Jetpack Compose aware of it. But besides not specifying a return type, composables seem to have few things in common. However, this would have been a pretty short-sighted architectural...

Summary

In this chapter, you have learned about key elements of component-centric UI frameworks. We saw some of the limitations of this approach and how the declarative paradigm can overcome them. For example, specialization takes place on a component level. If the framework is based on inheritance, the distribution of features to children may be too broad. Jetpack Compose tackles this with the modifier mechanism, which allows us to amend functionality at a very fine-grained level; this means that composables only get the functionality they need (for example, a background color).

The remaining chapters of this book are solely based on the declarative approach. In Chapter 3, Exploring the Key Principles of Compose, we will take an even closer look at composable functions and examine the concepts of composition and recomposition. And, as promised, we will also dive deep into modifiers.

Exercise

Android Studio offers an Interactive Mode for composable functions. This is great to see how they react to user input:

Figure 2.5 – Interactive Mode

Please give Interactive Mode a try and answer the following questions:

1. What happens if you click inside the preview area when Interactive Mode is not active?
2. What is the difference between Interactive Mode and Run Preview?