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
Post a Comment