Empty states - Android Material UI/UX

 Empty states occur when an item’s content can’t be shown.

Content Empty states can display a wide variety of content. For example, they can include a list without list items, or a search that returns no results. Although these states aren’t typical, they should be designed to prevent confusion.



In this layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="@color/grey_3"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator_lyt"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/spacing_xxlarge"
                android:text="No Vehicle found"
                android:textAppearance="@style/TextAppearance.Material3.TitleLarge"
                android:textColor="@color/grey_90"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/spacing_medium"
                android:layout_marginBottom="@dimen/spacing_medium"
                android:layout_marginStart="@dimen/spacing_large"
                android:layout_marginEnd="@dimen/spacing_large"
                android:text="Add one by clicking round button below"
                android:textAlignment="center"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
                android:textColor="@color/grey_60" />

            <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
                android:id="@+id/extended_fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Add Vehicle"
                app:backgroundTint="@color/md_theme_light_primary"
                android:textColor="@color/white"
                app:iconTint="@color/white"
                android:layout_margin="10dp"
                app:icon="@drawable/ic_baseline_add_24"/>

            <View
                android:layout_width="wrap_content"
                android:layout_height="100dp"/>

        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/bg_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:src="@drawable/bg_no_item_city" />
        </RelativeLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>

..

Eg2:

Full source code:

Comments