Android Material Redesign V 2.0

by Sinto Varghese C

on August 8, 2018

Material 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=”Material 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 {  }

Bottom App Bar

A bottom app bar displays navigation and key actions at the bottom of mobile screens. It 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.

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 theAppCompatButton 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.

<android.support.design.button.MaterialButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”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 theapp: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

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

 

  • Share this Article

GET IN TOUCH WITH iLEAF

  • We can initiate development process at the hour of your convenience
  • Discussion on the projects can be held for a stipulated duration
  • We will sign NDA and the talks will be secured
  • We’ll show you around our cherished designs
  • Briefing on technology
  • Guaranteed source code delivery
  • Option to re-start a closed venture

See how we can unwrap your app idea and proceed towards success