Material Button

The Material Button is a widget that can be used to display a material style button within your applications user interface. This class extends from the AppCompatButton class which you’re likely already using in you projects, but what makes this any different? Out of the box this button will be styled with the look-and-feel of a material nature without the need to customise it yourself using the style flag. We can use the MaterialButton class as it is and our within our view it will already have the material look and feel which we are after — see it as a convenience class.

We can add this button to our layout file like so:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

By default this class will use the accent colour of your theme for the buttons filled background colour along with white for the buttons text colour. If the button is not filled, then the accent colour of your theme will be used for the button text colour instead along with a transparent background.

If we wish to add some further styling to this ourselves then we can do so by using a collection of attributes from the MaterialButton style.

• app:icon — Used to define a drawable to be displayed at the start of the button

• app:iconTint — Used to tint the icon in use from the app:icon attribute
• app:iconTintMode — Defines the the mode to be used for the icon tint

• app:iconPadding — Padding to be applied to the icon in use from the app:icon attribute

• app:additionalPaddingLeftForIcon — Defines the padding to be applied to the left of the icon in use from the app:icon attribute

• app:additionalPaddingRightForIcon — Defines the padding to be applied to the right of the icon in use from the app:icon attribute

• app:rippleColor — The colour to be used for the button ripple effect, this colour will be used
• app:backgroundTint — Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background to avoid breaking the button style
• app:backgroundTintMode — Used to define the mode to be used for the background tint

• app:strokeColor — The color to be used for the button stroke
• app:strokeWidth — The width to be used for the button stroke

• app:cornerRadius — Used to define the radius used for the corners of the button

Chip

The chip component allows us to display a chip view within our layout. This is essentially some text that is given a rounded background — the purpose of these is to display some form of textual collection to the user that may or may not be selectable. For example, these could be used to show a list of selectable suggestions to the user based on the current context within your app.

We can add a Chip to our layout like so, using the app:chipText attribute to set the text to be displayed on the chip:

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

There is also a collection of other attributes which can be used to further style the chip:

• app:checkable — Used to declare whether the chip can be toggled as selected / not selected. If disabled, the check behaves in the same way as a button
• app:chipIcon — Used to display an icon within the chip

• app:closeIcon — Used to display a close icon within the chip

We can also set some listeners on our chip instances, these can be useful for listening out for interactions from our users. If our chip is checkable, it is likely we’ll want to listen out for when this check state has been changed. We can do so using the setOnCheckedChangeListener listener:

some_chip.setOnCheckedChangeListener { button, checked ->  }

The same applies for when we want to listen out for interaction with the close icon when it is in use. For this we can utilise the setOnCloseIconClickListener function to register for close interaction events:

some_chip.setOnCloseIconClickListener {  }

Chip Group

If we’re displaying a collection of chips to our users, we want to ensure that they are correctly grouped together within our view. For this we can make use of the ChipGroup view component:

If we wish to use the ChipGroup we just need to wrap our Chip views in a parent ChipGroup component:

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />

    // more chips...

</android.support.design.chip.ChipGroup>

By default your Chip views may appear a little cramped together. If so, you can add some spacing to the child views by using the following attributes on the chip group itself:

• app:chipSpacing — Adds spacing to both the horizontal and vertical axis
• app:chipSpacingHorizontal — Adds spacing to the horizontal axis
• app:chipSpacingVertical — Adds spacing to the vertical axis

We can also declare our child Chip views to be displayed within a single line inside of our ChipGroup container. Using the app:singleLine attribute:

When doing so, you’ll need to wrap the ChipGroup in a scrolling view such as the HorizontalScrollView so that your users can scroll through the displayed Chips:

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleLine="true">

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Some chip" />

        // more chips...

    </android.support.design.chip.ChipGroup>

</HorizontalScrollView>

Material Card View

It’s likely within our apps that we’ve used the CardView component at some point. The support library now contains a component called the Material Card View, which provides us with a material styled cardview implementation out of the box.

The cardview can be added to your layout like so:

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    ... child views ...

</android.support.design.card.MaterialCardView>

You can further style the cardview by using two of the attributes that come with it:

• app:strokeColor — The colour to be used for the given stroke, this must be set in order to display a stroke
• app:strokeWidth — The width to be applied to the stroke of the view

As well as these two attributes, you can still style the cardview using the originally available attributes such as app:cardBackgroundColor etc.

Bottom App Bar

The bottom app bar is a new component that allows us to show a toolbar-like component at the bottom of our layout. This allows us to display components to our user in a manner that makes them easier to interact with than a standard toolbar might.

You can add the BottomAppBar to your layout file like so:

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

It appears as though the bottom app bar must have a menu assigned to it in-order for it to be displayed on screen. This can be done programatically like so:

bottom_app_bar.replaceMenu(R.menu.main)

When it comes to styling the bottom app bar there are several attributes you can make use of to do so.

• app:fabAttached — States whether or not a FAB has been attached to the bottom app bar. You can attach a fab by using app:layout_anchor on the FAB component which you wish to attach, using the ID of the bottom app bar. If a FAB is attached it will be inset into the bottom app bar, otherwise the FAB will remain above the bottom app bar.

• app:fabAlignmentMode — Declares the position of the FAB which has been attached to the bottom app bar. This can be either end:

or center:

• app:fabCradleVerticalOffset — Declares the vertical offset to be used for the attached fab. By default this is 0dp:

However, setting a dp value will allow the FAB to be shifting upwards vertically:

• app:backgroundTint — Used to apply a tint to the background of the view. If you wish to set the background color of the view then this should be used over the android:background attribute. Doing so will ensure the theming of the view remains stable.

Conclusion

In my opinion these are some neat additions to the support library — I’m looking forward to being able to use material themed components right out of the box. I’m also excited to find a use case for where the bottom app bar may be used, but I am sure there is some time before the support library version is stable before doing so. As per usual, I’d love to hear your thoughts or comments on these new components!

Tweets by hitherejoe