UI Layouts

Layout Types

Android provides several layout managers to arrange UI elements:

ConstraintLayout (Recommended)

<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/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="Welcome"
        android:textSize="24sp" />

    <Button
        android:id="@+id/submitBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintStart_toStartOf="@id/title"
        app:layout_constraintEnd_toEndOf="@id/title"
        android:text="Submit" />
</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

<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="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name:" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"
        android:layout_gravity="end" />
</LinearLayout>

FrameLayout

Used to stack views on top of each other. Often used for fragments.

<FrameLayout
    android:id="@+id/fragmentContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="?android:selectableItemBackground" />

Material Design Components

Use Material Design 3 (Material You) for modern Android UIs:

// app/build.gradle.kts
dependencies {
    implementation("com.google.android.material:material:1.11.0")
}

// XML theme
<style name="Theme.MyApp" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorSecondary">@color/secondary</item>
    <item name="colorTertiary">@color/tertiary</item>
    <item name="android:colorBackground">@color/background</item>
</style>

// Material Components
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:text="Outlined Button" />

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="12dp"
    app:cardElevation="4dp">
    <!-- Card content -->
</com.google.android.material.card.MaterialCardView>

Responsive Layouts with SlidingPaneLayout

<androidx.slidingpanelayout.widget.SlidingPaneLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- List pane -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/listPane"
        android:layout_width="280dp"
        android:layout_height="match_parent" />

    <!-- Detail pane -->
    <FrameLayout
        android:id="@+id/detailPane"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>