Creating Dashboard and Home Screens

# CHAPTER 14

Creating Dashboard and Home Screens #

1. Introduction #

2. Learning Objectives #

• Identify the core components of a modern dashboard.

• Design statistics and summary widgets.

• Use GridLayout and RecyclerView to create dashboard grids.

• Implement a cohesive visual hierarchy.

• Build a Finance Dashboard UI.

3. Dashboard Architecture #

1. 1. The Greeting/Header: A personalized welcome (e.g., "Good morning, Jane!") accompanied by a profile picture or notification icon.

1. 2. The Summary/Hero Widget: The most important piece of data. In a banking app, this is the total account balance. In a fitness app, it's the daily step count.

1. 3. The Action Grid / Quick Links: A grid of cards or buttons providing quick access to features (e.g., Transfer Money, Pay Bills, History).

4. Designing Statistics Widgets #

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="16dp"
    app:cardElevation="4dp"
    android:backgroundTint="?attr/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="24dp"
        android:gravity="center">

        <!-- Label -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Total Balance"
            android:textColor="#E0E0E0"
            android:textSize="14sp" />

        <!-- Huge Number -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="$12,450.00"
            android:textColor="#FFFFFF"
            android:textSize="36sp"
            android:textStyle="bold"
            android:layout_marginTop="8dp"/>
            
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

5. Creating Action Grids #

1. 1. Static Grid: If you have exactly 4 or 6 fixed options, you can use a GridLayout or standard ConstraintLayout to manually place the cards.

1. 2. Dynamic Grid: If the options can change, use a RecyclerView with a GridLayoutManager.

For dashboards, MaterialCardView is the perfect container for these grid items. A standard dashboard card contains an Icon (centered) and a short Label directly beneath it.

6. Mini Project: Finance Dashboard UI #

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 
    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:background="#F8F9FA">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">

        <!-- Greeting -->
        <TextView
            android:id="@+id/greetingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, Alex"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#212121"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <!-- Notification Icon -->
        <ImageView
            android:id="@+id/notifIcon"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:src="@drawable/ic_bell"
            app:layout_constraintTop_toTopOf="@+id/greetingText"
            app:layout_constraintBottom_toBottomOf="@+id/greetingText"
            app:layout_constraintEnd_toEndOf="parent" />

        <!-- Main Balance Card (Use the XML from Section 4 here) -->
        <include layout="@layout/widget_balance_card"
            android:id="@+id/balanceCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/greetingText" />

        <!-- Section Title -->
        <TextView
            android:id="@+id/servicesTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Quick Services"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/balanceCard"
            app:layout_constraintStart_toStartOf="parent" />

        <!-- Action Grid (Using a static GridLayout for 4 items) -->
        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:columnCount="2"
            android:rowCount="2"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@+id/servicesTitle">

            <!-- Card 1: Send Money -->
            <com.google.android.material.card.MaterialCardView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_margin="8dp"
                app:cardElevation="2dp"
                app:cardCornerRadius="12dp">
                
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:padding="20dp">
                    <ImageView android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/ic_send" />
                    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send" android:layout_marginTop="8dp" />
                </LinearLayout>
            </com.google.android.material.card.MaterialCardView>

            <!-- Repeat for Receive, Bills, and Top-Up -->
            <!-- ... -->

        </GridLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

7. Design Principles #

• Visual Hierarchy: The user's eye should naturally go to the most important thing first (the large balance number), then the secondary actions.

• Whitespace: Dashboards can easily become cluttered. Use generous padding (16dp to 24dp) between sections to let the UI breathe.

• Scrollability: Always wrap your dashboard ConstraintLayout inside a NestedScrollView or ScrollView. Even if it fits on your screen, it might get cut off on a smaller phone.

8. Common Mistakes #

• Information Overload: Trying to fit every single feature of the app onto the home screen. Use the dashboard for summaries and quick actions, and let the user navigate deeper for details.

• Inconsistent Card Heights: In a grid, if one card's text wraps to two lines, it might make that card taller than its neighbor, breaking the clean grid look. Fix this by using layout_rowWeight or setting fixed heights for cards.

9. Best Practices #

• Use a slight off-white or very light gray background for the screen (like #F8F9FA), and pure white #FFFFFF for the Cards. This subtle contrast makes the cards "pop" much better than placing white cards on a white background.

10. Exercises #

1. 1. Replace the static GridLayout in the mini-project with a RecyclerView. Write the Adapter and set up a GridLayoutManager(context, 2) in your Kotlin code.

1. 2. Add a "Recent Transactions" section below the Quick Services grid. It should contain a small vertical list of two items.

11. UI Design Challenges #

12. MCQ Quiz with Answers #

13. Interview Questions #

• Q: When building a dashboard grid, when would you choose a static GridLayout versus a RecyclerView with a GridLayoutManager?

• Q: How does background contrast affect the perception of Elevation on MaterialCardViews?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #