Skip to content

Molecules

Jump to bottom
jemmaSlater edited this page Jan 16, 2023 · 6 revisions

Molecules

Inset View

A view with an inset on the left side. Nest content inside of this view to display it on the right side of the inset

<uk.gov.hmrc.components.molecule.inset.InsetView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Nested content goes here -->

</uk.gov.hmrc.components.molecule.inset.InsetView>

Inset Text View

A preconfigured version of Inset View, where a nested text view is ready for immediate use via the xml text attribute

<uk.gov.hmrc.components.molecule.inset.InsetTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:text="@string/inset_text" />

Multi Column Row View

<uk.gov.hmrc.components.molecule.item.MultiColumnRowView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:text1="@string/text1"
    app:text2="@string/text2"
    app:text3="@string/text3"
    app:text1ContentDescription="@string/text1_desc"
    app:text2ContentDescription="@string/text2_desc"
    app:text3ContentDescription="@string/text3_desc"
    app:textStyle="@style/Text.Body"
    app:textStyle2="@style/Text.Body"
    app:textStyle3="@style/Text.Bold"
    app:text1Heading="true" />

This component can display a row with one, two or three columns of equal spacing, using the number of strings you provide.

The text style and heading can also be configured programmatically:

multi_column_row.setTextStyle(R.style.Text_Bold)
multi_column_row.setText1AsHeading(true)

If you need to, you can add a click listener to each column and provide a custom click content description:

multi_column_row.setText1ClickAction("custom click content description") {
    // click listener
}
multi_column_row.setText2ClickAction { Toast.makeText(context, "text 2 clicked", LENGTH_LONG).show() }
multi_column_row.setText3ClickAction("do custom action") {
    Toast.makeText(context, "text 3 custom action invoked", LENGTH_LONG).show()
}

If you need to add one content description for the whole row, use setWholeRowContentDescription("custom row content description").

Text Input View

<uk.gov.hmrc.components.molecule.input.TextInputView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:text="@string/text"
    app:hintContentDescription="@string/content_description"
    app:counterEnabled="true"
    app:counterMaxLength="@integer/max_length"
    app:hintText="@string/hint_text" />

TextInputView represents an input for text. This includes the following features:

  • Hint text
  • Custom content description
  • Max length limits
  • Character counters
  • Error messages
  • Error message content descriptions

Currency Input View

<uk.gov.hmrc.components.molecule.input.CurrencyInputView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:text="@string/text"
    app:contentDescription="@string/content_description"
    app:counterEnabled="true"
    app:counterMaxLength="@integer/max_length"
    app:hintText="@string/hint_text"
    app:decimalEnabled="false" />

CurrencyInputView represents an input for currency. This includes the following features:

  • Prefix text for currency
  • Preset keyboard input for currency
  • Preset disabled character counters
  • Hint text
  • Custom content description
  • Max length limits
  • Enable or disable decimals

Switch Row

<uk.gov.hmrc.components.molecule.item.SwitchRowView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="@string/title"
    app:body="@string/body"
    app:showBody="true"
    app:checked="true"
    app:switchContentDescription="@string/content_description" />

This component can display a row with a title, body and a switch.

The body can be hidden by calling showBody(false) - it is visible by default.

You can set a listener for when the switch state has changed by calling: setCheckedChangedListener()

Example usage:

switch_row_example_1.setEnabledListener { Toast.makeText(context, "Example 1 state: $it", Toast.LENGTH_SHORT).show() }

H4 Title Body View

<uk.gov.hmrc.components.molecule.header.H4TitleBodyView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="@string/title"
    app:body="@string/body" />

H5 Title Body View

<uk.gov.hmrc.components.molecule.header.H5TitleBodyView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="@string/title"
    app:body="@string/body" />

Bold Title Body View

<uk.gov.hmrc.components.molecule.header.BoldTitleBodyView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="@string/title"
    app:body="@string/body" />

Status View

<uk.gov.hmrc.components.molecule.status.StatusView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:body="@string/status_card_placeholder_body"
    app:bodyContentDesc="@string/status_card_placeholder_body_content_desc"
    app:icon="@drawable/ic_maintenance"
    app:iconTintColor="@color/hmrc_grey_1"
    app:title="@string/status_card_placeholder_title"
    app:textColor="@color/hmrc_green_1"
    app:primaryButtonText="@string/status_card_placeholder_primary_button"
    app:secondaryButtonText="@string/status_card_placeholder_secondary_button"
    app:infoText="@string/status_card_placeholder_info_text" />
status.setBodyGravity(Gravity.START) // defaults to CENTER if not set
status.onPrimaryButtonClickedListener = { // do something }
status.onSecondaryButtonClickedListener = { // do something }

Warning View

<uk.gov.hmrc.components.molecule.warning.WarningView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:text="@string/warning_placeholder_title"
    app:textColor="@color/hmrc_black"
    app:icon="@drawable/ic_warning"
    app:iconTintColor="@color/hmrc_black"/>

By default the WarningView has 8dp padding. If you wish to remove this, use the attribute app:defaultPadding="false".

Tab Bar View

<uk.gov.hmrc.components.molecule.tabbar.TabBarView
    style="@style/TabBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

There are 2 styles available for the Tab Bar, TabBar and TabBar.Dark. The component extends the TabLayout Android class, so you can add tabs using either the TabLayout.addTab methods or by using 'TabLayout.setUpWithViewPager'.

Note: When used with ViewPager2, all TabBarView components should be declared above the ViewPager2 view in the xml layout.

Select Row View

<uk.gov.hmrc.components.molecule.selectrow.SelectRowGroup
    android:id="@+id/select_row_tick_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <uk.gov.hmrc.components.molecule.selectrow.SelectRowView
        android:id="@+id/select_row_tick_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:button="@drawable/select_row_tick"
        app:text="First row" />

    <uk.gov.hmrc.components.molecule.selectrow.SelectRowView
        android:id="@+id/select_row_tick_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:button="@drawable/select_row_tick"
        app:text="Second row"/>

</uk.gov.hmrc.components.molecule.selectrow.SelectRowGroup>

In order to be notified of a row being selected, SelectRowViews should be a direct child of a SelectRowGroup and a listener should be set on the SelectRowGroup using setOnRowSelectedListener(listener: OnRowSelectedListener?)

Donut Chart View

This displays a donut shaped chart based on two or three values. To display the values in the donut, use startAnimation(value1: Float, value2: Float, value3: Float = 0f, shouldAnimate: Boolean).

Note: the values should be added in descending order to ensure they are drawn correctly, eg donutExample1.startAnimation(75f, 20f, 5f, shouldAnimate = true).

<uk.gov.hmrc.components.molecule.donut.DonutChartView
    android:id="@+id/donut_example_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

There are default colours but these can be changed via app:color1/app:color2/app:color3

<uk.gov.hmrc.components.molecule.donut.DonutChartView
    android:id="@+id/donut_example_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:color1="@color/hmrc_red"
    app:color2="@color/hmrc_blue"
    app:color3="@color/hmrc_green" />

Clone this wiki locally