Skip to content

nicbell/material-lists

Repository files navigation

Material Lists

Maven Central codecov

An Android XML implementation of Material 3 list items.

🙋🏽 Why

Material lists are available in Jetpack Compose but were never implemented in XML. This is a tiny library that aims to provide most examples of this component specified in the design documentation.

I have had to re-implement this layout so many times that I have decided to open-source it.

🪜 Setup

Include the dependency in your project.

implementation "net.nicbell.material-lists:listitem:x.x.x"

In order to download the dependency please make sure access to the maven repo is configured. You probably already have Maven Central configured; if you don't you will need to add it.

repositories {
    //..
    mavenCentral()
}

🏄🏽 Usage

Add the ListItem component to your layout.

Attributes

The following attributes can be changed for a ListItem.

Description Relevant attributes
Headline text app:head
Supporting text app:supportText
Size type - 1, 2 or 3+ lines app:sizeType
Show divider (default true) app:dividerVisible
Divider color app:dividerTint

For more info about size types see the design documentation.

Content

Leading and trailing content can be added as child views. A content style is require in order to position the content correctly within the ListItem.

Description Style Required view type
Leading icon MaterialLists.LeadingIcon AppCompatImageView
Leading image MaterialLists.LeadingImage AppCompatImageView
Leading video thumbnail MaterialLists.LeadingVideoThumbnail AppCompatImageView
Leading avatar image MaterialLists.LeadingAvatar ShapeableImageView
Leading avatar label MaterialLists.LeadingAvatarLabelText MaterialTextView
Leading checkbox MaterialLists.LeadingCheckbox MaterialCheckBox
Leading radio button MaterialLists.LeadingRadioButton MaterialRadioButton
Trailing icon MaterialLists.TrailingIcon AppCompatImageView
Trailing checkbox MaterialLists.TrailingCheckbox MaterialCheckBox
Trailing radio button MaterialLists.TrailingRadioButton MaterialRadioButton
Trailing switch MaterialLists.TrailingSwitch SwitchMaterial or MaterialSwitch
Trailing supporting text MaterialLists.TrailingSupportingText MaterialTextView

Example

<net.nicbell.materiallists.ListItem 
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    app:headline="Headline" 
    app:sizeType="TWO_LINES"
    app:supportText="Support text">

    <androidx.appcompat.widget.AppCompatImageView 
        style="@style/MaterialLists.LeadingIcon"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:src="@drawable/ic_outline_person_24" />

    <com.google.android.material.checkbox.MaterialCheckBox
        style="@style/MaterialLists.TrailingCheckbox" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</net.nicbell.materiallists.ListItem>

Which will output the following.

Material 2 compatibility

This library was designed to work with Theme.Material3 themes or themes inheriting from those themes. The reason for this, is that the library leverages some tokens that are only available in Material 3. If your activities use Theme.MaterialComponents themes you can still use the library but you will need to apply a Theme.Material3 theme to the ListItem or one of it's parents in your layout.

Demo

There is a demo app included with many examples.