Mobile App UI Preview

9:41

Discover

All
Games
Social
Productivity
Education
App screenshot

Weather Forecast

Real-time weather updates

App screenshot

Fitness Tracker

Track your workouts and progress

UI Implementation Code

<!-- App Screen Layout -->
<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">

    <!-- Status Bar -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp">

        <TextView
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9:41"
            android:textSize="14sp"
            android:textColor="@color/white" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:src="@drawable/ic_signal"
                android:layout_marginRight="4dp" />

            <ImageView
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:src="@drawable/ic_wifi"
                android:layout_marginRight="4dp" />

            <ImageView
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:src="@drawable/ic_battery" />
        </LinearLayout>
    </RelativeLayout>

    <!-- App Header -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="24dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Discover"
            android:textSize="22sp"
            android:textStyle="bold" />

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/ic_bell" />
    </RelativeLayout>

    <!-- Search Bar -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="12dp"
        android:background="@drawable/bg_rounded"
        android:layout_marginBottom="20dp">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/ic_search"
            android:layout_marginRight="8dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Search for apps"
            android:background="@null"
            android:textSize="16sp" />
    </LinearLayout>

    <!-- More code would follow for categories and app cards -->
</LinearLayout>

Code Explanation

This XML layout creates a mobile app screen with a status bar, header, search bar, and app cards. The layout uses LinearLayout and RelativeLayout containers to position elements. Each component is styled with appropriate padding, margins, and colors to create a modern, user-friendly interface.

The code follows Material Design principles with rounded corners, appropriate spacing, and a clear visual hierarchy. The status bar displays time and connectivity information, while the main content area showcases app cards with images, descriptions, and ratings.