https://github.com/nicbell/material-lists

An Android XML implementation of Material 3 list items.
https://github.com/nicbell/material-lists

android android-library android-ui kotlin material material-design

Last synced: 3 months ago
JSON representation

An Android XML implementation of Material 3 list items.

• Host: GitHub
• URL: https://github.com/nicbell/material-lists
• Owner: nicbell
• License: apache-2.0
• Created: 2022-12-19T15:23:34.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-07T16:05:15.000Z (4 months ago)
• Last Synced: 2024-10-12T13:43:27.574Z (4 months ago)
• Topics: android, android-library, android-ui, kotlin, material, material-design
• Language: Kotlin
• Homepage:
• Size: 253 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Material Lists

[![Maven Central](https://img.shields.io/maven-central/v/net.nicbell.material-lists/listitem?color=blue)](https://s01.oss.sonatype.org/content/repositories/releases/net/nicbell/material-lists/listitem/)

[![codecov](https://codecov.io/gh/nicbell/material-lists/branch/main/graph/badge.svg?token=YYJ348RZAF)](https://codecov.io/gh/nicbell/material-lists)

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](https://m3.material.io/components/lists/specs).

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.

```groovy

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.

```gradle

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](https://m3.material.io/components/lists/specs).

### 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

```xml

    

    

```

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.