Design by declaration

In Android, design by declaration is a concept where the structure and behavior of the user interface (UI) are defined in XML files rather than in code. Instead of writing Java or Kotlin code to create UI elements and set their properties, we declare them in XML, which is a markup language that describes the layout and components of the UI. This approach allows us to separate the design of the app from the logic, making it easier to manage and modify the UI without changing the underlying code.

When we use design by declaration, we describe how the UI should look and behave in an XML layout file. These files contain information like the position, size, color, text, and other attributes of the UI elements. Android’s system then automatically reads these XML files and generates the actual UI on the screen when the app runs.

For example, if we wanted to create a simple user interface with a TextView that says “Hello, World!” and a Button underneath it, we would declare this layout in an XML file instead of creating the views programmatically in Java or Kotlin.

Here’s how we might declare a simple layout using design by declaration in an XML file (activity_main.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />
</LinearLayout>

In this example, the LinearLayout container holds a TextView and a Button. The TextView displays the text “Hello, World!” and the Button displays “Click Me”. All of this is defined in XML, with properties like text, size, and layout width and height set in the XML tags.

When we run the app, Android automatically reads this XML layout file and creates the UI accordingly. The TextView will display the message and the Button will appear below it. In our activity or fragment, we would typically access these UI elements by their IDs, but their appearance and behavior have already been set in the XML declaration.

Here’s how we would access and use these elements in Java or Kotlin:

TextView textView = findViewById(R.id.textView);
Button button = findViewById(R.id.button);

button.setOnClickListener(v -> textView.setText("Button Clicked!"));

In this case, the behavior of the button is defined in Java, but the design itself was declared in the XML file. This separation of design and logic is what makes design by declaration a useful approach in Android development. It simplifies the code, improves readability, and makes it easier to manage complex user interfaces, as we don’t have to programmatically define the structure of every element in the UI.