Components

Divider

Used to bring clarity and structure to a layout

Usage

A divider separates your content usually in between top and bottom.

Basic

The LgnDivider is a view that can be used in layouts to separate content into clear groups.

Note: Make sure to set android:layout_height="wrap_content" on the LgnDivider to ensure that the correct size is set for the divider.

The full-bleed divider is displayed below:

Static in xml

<com.telkom.legion.component.dividers.LgnDivider
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/dimen_16dp" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnDivider(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

By default, dividers will be full-bleed. You can use app:dividerInsetStart and app:dividerInsetEnd to achieve the look of an inset or middle divider:

<com.telkom.legion.component.dividers.LgnDivider
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:dividerInsetStart="16dp"
    app:dividerInsetEnd="16dp"/>

Integrate with RecyclerView

Integrate divider with your recyclerview

In your fragment or activity

Basic Configuration

...
with(binding) {
    //By Default orientation has been set with VERTICAL
    //And without customization view's
    rvSampleCustom.setLegionDivider()
}
...

Advanced Configuration

...
with(binding) {
    rvSampleCustom.setLegionDivider(
        //Fill with your recyclerview orientation
        //VERTICAL or HORIZONTAL
        orientation = LgnDividerItemDecoration.VERTICAL,
        context = requireContext()
    ) {
        //Your View's customization here

Info : We assume you already have a recyclerview and have already setup it like an adapter setup or a layout manager setup, the example here is just how to integrate your recyclerview with the legion divider component

Attributes

Attribute Name	Xml Attrs	Related method(s)	Description
Thickness	`app:dividerThickness`	`dividerThickness`	To set thickness of dividers directly via xml
Color	`app:dividerColor`	`dividerColor`	To set dividers color directly via xml
Start inset	`app:dividerInsetStart`	`dividerInsetStart`	To set padding start of dividers directly via xml
End inset	`app:dividerInsetEnd`	`dividerInsetEnd`	To set padding end of dividers directly via xml

Do you have feedback?

Please let us know to make it better

Send Feedback