Reviewing Material Design in Android App Development

Material Design in developing a mobile application with BLE

Material is an adaptable system of guidelines, components and tools that support the best practices of user interface design in Android applications. It is backed by an open-source community of designers and developers, and it helps teams quickly build beautiful products.

Material Design uses more grid-based layouts, responsive animations and transitions, depth, and padding effects.

Some of the important Material Design elements used in the Home Automation Android Application are:

  • Navigation drawer
  • Floating buttons
  • RecyclerView
  • CardView
  • Bold colors
  • Primary color and accent color
  • Edge-to-edge images
  • Motion

The Home Automation Android Application uses some of those elements, such as primary and accent colors with Hex values: #008577 and #D81B60. Shadows are used in card view to differentiate between the layouts. The Home Automation Android Application also uses bold color in the App bar layout to emphasize the action of the current screen.

The Home Automation Android Application includes a screen for scanning nearby BLE devices and helping the user to connect. In the Home Control App it scans for available QDN devices and populates a list with them. Clicking on a device in the RecyclerView connects the app to the device and allows data to be read from and written to it.

The Material Design Layout encourages consistency across platforms and environments, and uniformity of elements and spacing for screen sizes. RecyclerView decouples the list from its container and reuses the cell while scrolling when compared with ListView. CardView provides support for various lengths of content. When using cards, it is helpful to have rounded corners and elevation.

Display list of scanned devices

The widget used to display the scanned BLE devices is RecyclerView, a container for displaying data sets that can be scrolled very efficiently by maintaining a number of views limited to the screen size. Use RecyclerView for a collection of data whose elements change at runtime during user action or network events.

The recycler elements are surrounded with a card view. Cards are the surfaces for content and actions to be displayed on a single topic. As shown below, combining CardView with RecyclerView results in an easy-to-use, aesthetically pleasing user interface.


List of scanned devices in the Home Automation Android Application

The app bar displays information and actions with respect to the current screen. Use it for branding, screen titles, navigation and actions. It can contain elements like menu options and settings options.

Fetching the details of the device over BLE

After the devices connect, the Home Automation Android Application reads three parameters:

  • Light status: Off or on
  • Lock status: Locked or unlocked
  • Smoke detector: Most recent readings

All three parameters are displayed in views enclosed in a card view as shown below.

The app bar for this screen contains backward navigation that takes the user to the previous screen.