Skip to content

Organisms

Jump to bottom
Ngou Long Kam edited this page Mar 6, 2023 · 6 revisions

Organisms

Headline Card View

<uk.gov.hmrc.components.organism.headline.HeadlineCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="@string/title"
    app:headline="@string/headline">

    <!-- Add optional child views to the card here -->

</uk.gov.hmrc.components.organism.headline.HeadlineCardView>

If you want to explicitly state the padding for the child views (eg. for secondary buttons) then use the removeDefaultChildPadding() method to remove any default padding from the children, or in xml set app:childPadding="false".

If you want to make the card tappable, then add a click listener with setOnClickListener(clickHandler: () -> Unit). This will also display a chevron on the card to show it has an onward action to the user. If you want to add a custom content description to the chevron, use setChevronContentDescription(description: CharSequence).

Status Card View

<uk.gov.hmrc.components.organism.status.StatusCardView
    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">

    <!-- Add optional child views to the card here -->

</uk.gov.hmrc.components.organism.status.StatusCardView>
status_card.setBodyGravity(Gravity.START) // defaults to CENTER if not set

If you want to explicitly state the padding for the child views (eg. for secondary buttons) then use the removeDefaultChildPadding() method to remove any default padding from the children, or in xml set app:childPadding="false".

Primary Card View

<uk.gov.hmrc.components.organism.primary.PrimaryCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="@string/title">

    <!-- Add optional child views to the card here -->

</uk.gov.hmrc.components.organism.primary.PrimaryCardView>

If you want to explicitly state the padding for the child views (eg. for secondary buttons) then use the removeDefaultChildPadding() method to remove any default padding from the children, or in xml set app:childPadding="false".

Icon Button Card View

<uk.gov.hmrc.components.organism.card.IconButtonCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:accessibilityMessage="@string/accessibility_message"
    app:icon="@drawable/icon"
    app:title="@string/title" />
icon_button_card.setOnClickListener { // do something on click }

Summary Row View

<uk.gov.hmrc.components.organism.summary.SummaryRowView
    android:id="@+id/summary_row_placeholder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:readerTrait="info"
    app:rowStyle="@style/summary_row_style"
    app:title="@string/summary_row_placeholder_title"
    app:titleTextAppearance="@style/summary_row_title_style"
    app:titleMaxLines="2" />

This component contains a title, which can be set via xml or directly in the code, and a list of MultiColumnRow molecules, set via code.

val placeholderRow = MultiColumnRowView(context)
placeholderRow.setText(
    getString(R.string.summary_row_placeholder_row1_text1),
    getString(R.string.summary_row_placeholder_row1_text2),
    getString(R.string.summary_row_placeholder_row1_text3))
summary_row_placeholder.setRows(arrayListOf(placeholderRow))
summary_row_placeholder.setOnClickListener { // do something on click }
summary_row_placeholder.setChevronContentDescription(getString(R.string.accessibility_message)
summary_row_placeholder.setAccessibilityMessage(getString(R.string.accessibility_message))

Accessibility

If the Summary Row is to be used as a clickable button in the app, then you can use the setButtonAccessibilityMessage(buttonText, action) method to set the announcement you want read out in the form "[buttonText]; button. Double tap to [action]". Note: This method should be used with the simple readerTrait defined. There may be duplicate talkback announcements if the info readerTrait is selected.

The readerTrait attribute changes the way the component is read out by TalkBack. Note: If setting readerTrait programmatically instead of in an xml file, this attribute needs to be set before setRows() is called.

  • info - Specifies that the row will be read out element by element when read by TalkBack. This is the default trait.

  • simple - Specifies that the row will be read out as one element by TalkBack.

Separated View Container

<uk.gov.hmrc.components.container.SeparatedViewContainer
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Item 1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Item 2" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Item 3" />

</uk.gov.hmrc.components.container.SeparatedViewContainer>

This component is a container view that is essentially a custom LinearLayout. Child views inside this layout will have dividers applied between them.

You can change the divider via:

By default the divider will be @drawable/divider. If you specify a divider, that will override the default divider.

You can change the dividers that are shown via:

If you do not set showDividers via XML or code, it will default to show beginning, middle and end - so all the dividers. If you specify SHOW_DIVIDER_NONE as per https://developer.android.com/reference/android/widget/LinearLayout#SHOW_DIVIDER_NONE, then it will revert to default behaviour as mentioned above.

If you need padding on your dividers, you can set android:dividerPadding="@dimen/hmrc_spacing_16" in the xml.

Information Message Card View

<uk.gov.hmrc.components.organism.information.InformationMessageCardView
    android:id="@+id/info_message_placeholder"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/hmrc_spacing_16"
    app:headline="@string/info_message_placeholder_headline"
    app:headlineContentDescription="@string/headlineContentDescription"
    app:headlineIcon="@drawable/ic_info"
    app:body="@string/info_message_placeholder_headline"
    app:type="urgent" />

Optionally, buttons can be added to the headline section using setHeadlineButtons(buttons: List<SecondaryButton>).

Menu Panel Row View

<uk.gov.hmrc.components.organism.menu.MenuPanelRowView
    android:id="@+id/menu_placeholder"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/hmrc_spacing_16"
    android:layout_marginStart="@dimen/hmrc_spacing_16"
    android:layout_marginEnd="@dimen/hmrc_spacing_16"
    android:layout_marginBottom="@dimen/hmrc_spacing_8"
    app:body="@string/menu_panel_placeholder_body"
    app:title="@string/menu_panel_placeholder_title" />

Optionally, a choice of notification can be added to the right side of the title with showNotification(notificationType: Notification).

There are three types of Notification:

  • None: This is the default state of the menu panel and does not need to be set.
  • Count(val count: Int = 0): This is the default state of showNotification() if no type is provided and shows a blank circle notification. Alternatively, you can provide a count parameter greater than 0 to show a notification with a number inside a rounded square.
  • New: This displays the word 'New' inside a rounded square.

The notification can be removed by using hideNotification().

Mini Advert Card View

<uk.gov.hmrc.components.organism.card.MiniAdvertCardView
    android:id="@+id/mini_advert_placeholder"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/hmrc_spacing_16"
    app:title="@string/title_body_cta_placeholder_button" />
mini_advert_card.setOnClickListener { // do something on click }
Clone this wiki locally