Arrangement and alignment in Android Kotlin - Mini App: Build & Ship

Build: Alignment Demo Screen

This screen demonstrates how to arrange and align text and buttons using LinearLayout in Android Kotlin.

Target UI

-------------------------
|       Alignment Demo   |
|-----------------------|
|                       |
|  [Left Aligned Text]   |
|                       |
|       [Center Text]    |
|                       |
|  [Right Aligned Text]  |
|                       |
|  [Button 1] [Button 2] |
|                       |
-------------------------

Use a vertical LinearLayout as the main container.

Add three TextViews with text aligned left, center, and right respectively.

Add a horizontal LinearLayout at the bottom with two buttons side by side.

Buttons should be evenly spaced and aligned horizontally.

Use padding and margin to separate elements clearly.

Starter Code

Android Kotlin

package com.example.alignmentdemo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

// TODO: Create activity_main.xml layout file with LinearLayouts and TextViews as described

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Android Kotlin

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Left Aligned Text"
        android:textSize="18sp"
        android:gravity="start"
        android:padding="8dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Center Text"
        android:textSize="18sp"
        android:gravity="center"
        android:padding="8dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Right Aligned Text"
        android:textSize="18sp"
        android:gravity="end"
        android:padding="8dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="24dp"
        android:gravity="center"
        android:weightSum="2">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button 1"
            android:layout_marginEnd="8dp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button 2"
            android:layout_marginStart="8dp" />

    </LinearLayout>

</LinearLayout>

We use a vertical LinearLayout as the main container with padding around all edges.

Three TextViews are added with android:gravity set to start, center, and end to align text left, center, and right respectively.

At the bottom, a horizontal LinearLayout contains two Buttons. We use layout_weight="1" and layout_width="0dp" on each button to make them share space evenly.

Margins separate the buttons horizontally, and padding separates text views vertically for clarity.

Final Result

Completed Screen

-------------------------
|       Alignment Demo   |
|-----------------------|
|                       |
|  Left Aligned Text     |
|                       |
|       Center Text      |
|                       |
|               Right Aligned Text |
|                       |
|  [Button 1]   [Button 2]          |
|                       |
-------------------------

Buttons respond visually when tapped.

Text alignment remains consistent on different screen sizes.

Stretch Goal

Add a toggle switch to change the vertical LinearLayout orientation between vertical and horizontal dynamically.

💡 Hint

Use a Switch widget and set an OnCheckedChangeListener in Kotlin to update the LinearLayout orientation property.