Android UI Design — Layouts, Views & ViewGroups

The user interface (UI) is what your users see and interact with. In Android, UI components are built using a hierarchy of Views and ViewGroups defined in XML layouts. Mastering UI design is essential for creating beautiful, responsive, and user-friendly apps.

1. The Android UI Hierarchy

Every Android UI is built using a tree structure of Views (the leaves) and ViewGroups (the branches).

2. Layouts — The Containers

2.1 LinearLayout

LinearLayout arranges its children in a single row (horizontal) or column (vertical). It's simple and widely used.

<!-- Vertical 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="Hello, World!"
        android:textSize="24sp"
        android:textStyle="bold" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />

</LinearLayout>

<!-- LinearLayout with weight distribution (50/50) -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <View
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:background="#FF5722" />

    <View
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:background="#4CAF50" />

</LinearLayout>

2.2 RelativeLayout

RelativeLayout positions children relative to the parent or to other children. It's flexible but can become complex.

<!-- RelativeLayout with positioning -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <EditText
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/title"
        android:layout_marginTop="16dp"
        android:hint="Enter text" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:layout_below="@id/input"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="16dp" />

</RelativeLayout>

2.3 ConstraintLayout — The Modern Standard

ConstraintLayout is the most powerful and flexible layout. It's the recommended layout for modern Android development because it's more efficient than nested layouts.

<!-- ConstraintLayout with constraints -->
<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"
    android:padding="16dp">

    <TextView
        android:id="@+id/helloText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:textSize="24sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/clickButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toBottomOf="@id/helloText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

    <EditText
        android:id="@+id/nameInput"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Enter your name"
        app:layout_constraintTop_toBottomOf="@id/clickButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. Common Views (Widgets)

TextView — The Text Display

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!"
    android:textSize="18sp"
    android:textColor="#333333"
    android:textStyle="bold"
    android:fontFamily="sans-serif-medium"
    android:gravity="center"
    android:padding="8dp" />

EditText — Text Input

<EditText
    android:id="@+id/emailInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter your email"
    android:inputType="textEmailAddress"
    android:maxLines="1"
    android:padding="12dp"
    android:background="@drawable/edittext_bg" />

Button — Clickable Action

<Button
    android:id="@+id/submitButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Submit"
    android:textSize="16sp"
    android:backgroundTint="#4CAF50"
    android:textColor="#FFFFFF"
    android:padding="12dp"
    android:elevation="2dp" />

ImageView — Display Images

<ImageView
    android:id="@+id/profileImage"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/profile_photo"
    android:scaleType="centerCrop"
    android:contentDescription="Profile photo" />

4. Common XML Attributes

5. Practical Example — Login Screen

Here's a complete login screen combining multiple views:

<!-- login_activity.xml -->
<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"
    android:padding="24dp">

    <!-- App Logo -->
    <ImageView
        android:id="@+id/logoImage"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/ic_logo"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/welcomeText"
        android:layout_marginTop="40dp" />

    <!-- Welcome Text -->
    <TextView
        android:id="@+id/welcomeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome Back!"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@id/logoImage"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp" />

    <!-- Email Input -->
    <EditText
        android:id="@+id/emailInput"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:padding="16dp"
        android:background="@drawable/rounded_edittext"
        app:layout_constraintTop_toBottomOf="@id/welcomeText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp" />

    <!-- Password Input -->
    <EditText
        android:id="@+id/passwordInput"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        android:padding="16dp"
        android:background="@drawable/rounded_edittext"
        app:layout_constraintTop_toBottomOf="@id/emailInput"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

    <!-- Forgot Password -->
    <TextView
        android:id="@+id/forgotPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Forgot Password?"
        android:textColor="#4CAF50"
        android:textSize="14sp"
        app:layout_constraintTop_toBottomOf="@id/passwordInput"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="8dp" />

    <!-- Login Button -->
    <Button
        android:id="@+id/loginButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Login"
        android:textSize="16sp"
        android:backgroundTint="#4CAF50"
        android:textColor="#FFFFFF"
        android:padding="16dp"
        android:elevation="4dp"
        app:layout_constraintTop_toBottomOf="@id/forgotPassword"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp" />

    <!-- Register Link -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Don't have an account? Register"
        android:textSize="14sp"
        app:layout_constraintTop_toBottomOf="@id/loginButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

6. Best Practices for UI Design

• ✅ Use ConstraintLayout — It's the most efficient and flexible layout.
• ✅ Avoid deep nesting — More than 3 levels of nesting hurts performance.
• ✅ Use dimension resources — Define dimensions in dimens.xml for consistency.
• ✅ Use color resources — Define colors in colors.xml for theming.
• ✅ Use string resources — Define text in strings.xml for localization.
• ✅ Follow Material Design — Use Material Design components and guidelines.
• ✅ Test on multiple screen sizes — Ensure your UI works on all devices.
• ✅ Use vector drawables — Use SVG-based icons for all screen densities.
• ✅ Add content descriptions — For accessibility (screen readers).
• ✅ Use themes and styles — Avoid repeating attributes across views.

7. Common UI Pitfalls

8. Production-Ready Checklist

• ✅ Use ConstraintLayout — For all new layouts.
• ✅ Use material components — From com.google.android.material.
• ✅ Use themes — Define a theme in themes.xml for consistent styling.
• ✅ Use styles — Define reusable styles for common views.
• ✅ Use dimens.xml — For all dimension values.
• ✅ Use colors.xml — For all color values.
• ✅ Use strings.xml — For all text values.
• ✅ Test on multiple devices — Use AVDs with different screen sizes.
• ✅ Enable RTL support — For right-to-left languages.
• ✅ Use VectorDrawable — For all icons.