Chapter 1: Understanding Imperative Programming

Have you ever developed an Android application and felt overwhelmed by the need to constantly manage the state of your user interface? Each time a user interacts with your app—be it through clicks, swipes, or other actions—you find yourself racing to refresh the UI components. This predicament exemplifies the realm of imperative programming, which has been the conventional method for creating UIs on Android.

What is Imperative Programming?

The traditional imperative programming model dictates that developers explicitly instruct the application on how to render the UI in response to user actions.

The Challenges of Imperative UIs: A Case Study on Calendar Events

Consider a basic UI element—a calendar event card. This card typically contains a title, owner, meeting link, an optional guest list, and a room name. If the guest list exceeds five individuals, it should condense.

At first glance, this seems simple. However, in the world of imperative programming, complications can arise swiftly.

The Downside: Complexity in Managing State Changes

The primary hurdle with imperative UIs lies in their handling of ongoing state alterations. Implementing new functionalities or adjusting existing ones often necessitates modifications across various segments of code, complicating maintenance efforts.

But There’s Light at the End of the Tunnel!

Despite its limitations, imperative programming still has merit. Yet, an emerging paradigm known as declarative UI is gaining traction due to its straightforwardness and ease of maintenance. This is where Jetpack Compose makes a grand entrance, but we will delve into that later!

Imperative Example in Kotlin

To illustrate the imperative approach, here is a simplified Kotlin function that manages the UI for a calendar event card (animations omitted for clarity):

fun updateEventCard(title: String, owner: String, link: String, guestList: List<String>, room: String?) {

// Update basic properties

textViewTitle.text = title

textViewOwner.text = owner

textViewLink.text = link

// Manage guest list state

if (guestList.isEmpty()) {

textViewGuestList.visibility = View.GONE

} else {

if (guestList.size > 5) {

textViewGuestList.text = "Guests: ${guestList.size}"

buttonShowGuests.visibility = View.VISIBLE

} else {

textViewGuestList.text = guestList.joinToString(", ")

buttonShowGuests.visibility = View.GONE

}

}

// Manage room state (details omitted for brevity)

}

This snippet showcases how the logic can quickly escalate in complexity due to numerous conditional statements and visibility controls.

A Practical Example in Kotlin: Building a Simple Counter App

For a practical demonstration, let's create a basic counter application featuring a button that increments a displayed counter.

Activity (Imperative Approach):

class CounterActivity : AppCompatActivity() {

private var counter = 0

private lateinit var binding : ImperativeCounterActivityBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ImperativeCounterActivityBinding.inflate(layoutInflater)

setContentView(binding.root)

updateCounterText()

binding.incrementButton.setOnClickListener {

counter++

updateCounterText()

}

}

private fun updateCounterText() {

binding.counterText.text = counter.toString()

}

}

Layout (activity_counter.xml):

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:id="@+id/counterText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<Button

android:id="@+id/incrementButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Increment"/>

</LinearLayout>

Explanation:

• Activity: A variable tracks the current count. Within onCreate, the UI elements are initialized through binding, and the initial counter value is set.
• Layout: This XML defines the UI with a TextView for the counter and a Button for incrementing the count.

Highlights of the Imperative Approach:

• The code directly manipulates UI elements based on user actions (button clicks).
• Binding provides access to UI elements in real-time.
• The counter's state (its integer value) is distinct from its UI representation (the text displayed).
• The UI must be manually updated (in this case, the text view) whenever the counter value changes.

While the above example is straightforward, it highlights how imperative programming necessitates explicit instructions to modify UI elements based on user actions and application logic.

Remember: Although imperative programming has been a cornerstone in Android development for years, its complexity can lead to cumbersome code, especially in intricate UIs. Stay tuned for upcoming articles where we will explore declarative UIs and Jetpack Compose!

Chapter 2: The Shift to Declarative UI

The first video titled "Rethinking UI: Imperative to Declarative" discusses the transition from traditional imperative programming to a more modern declarative approach, shedding light on its advantages and implications.

In the second video titled "Types of sentences | Declarative, Imperative, Interrogative & Exclamatory," the various types of sentences are explored, providing insights into how different programming paradigms can be perceived through the lens of language.