What is Material Design

Material Design is a new Design language from Google that Google says aims to provide a more consistent and extensive “look and feel” for phones, tablets, desktops and “other platforms.”

Tip: In Android5.0, the most noticeable MaterialDesign style is MaterialDesign: Google takes out the Design comparable to apple’s product line, each is quite independent, especially reflected in the Design of the product, even without looking at the product Design. Just look at the LOGO of each Google product and you will see many different designs. This chaos would hardly be Google’s style, if it weren’t chaos and disorder. When Larry Page became Google’s CEO in 2011, he changed the company’s policy from a free-wheeling, laissez-faire one to a tightly integrated one. According to our report, in Google’s early days, encouraging a clash of ideas led to a climate of fierce debate, with executives clashing and refusing to cooperate. Determined to change the mood, Page told a group of Google executives at the Caneros Inn hotel in Napa Valley in February 2013 that the company needed to grow tenfold and solve problems in new ways, so executives had to learn to work together. From now on, Google will have zero tolerance for fighting.

  • Material Design no longer places pixels on the same plane, but places them in a regular space with different dimensions
  • Material Design also regulates motion elements for Android
  • Material Design is more inclined to use color to prompt

The Material Design language released by Google is more like a set of interface Design standards

The Z axis

In the theme of Material Design, the concept of height is introduced to UI elements. The height of view is represented by the attribute Z, which determines the visual effect of the shadow. The larger Z is, the larger and softer the shadow will be. But the z-value does not affect the size of the view.

The z-value of a view is represented by two components:

  1. Elevation: Static components

  2. Translation: Dynamic components for animation

The Z value is calculated as Z=elevation+translationZ

  • Set the height of a view by giving it an Android: Elevation attribute in the XML layout file. We can also use view.setelevation () in our code to set the height of the View.
  • You can also set the translationZ component of the View in your code: view.settranslationz ().
  • New ViewPropertyAnimator. Z () and ViewPropertyAnimator. TranslationZ () method can be easily changed The height of the view. For more information about this animation, refer to the ViewPropertyAnimator and PropertyAnimation apis.
  • Also can be set to view the Android: StateListAnimator attribute to set the view state change of animation, such as when click the button to change its translationZ component values.
  • The z-value is in dp

Material Design some themes

  • Theme.MaterialComponents
  • Theme.MaterialComponents.NoActionBar
  • Theme.MaterialComponents.Light
  • Theme.MaterialComponents.Light.NoActionBar
  • Theme.MaterialComponents.Light.DarkActionBar
  • Theme.MaterialComponents.DayNight
  • Theme.MaterialComponents.DayNight.NoActionBar
  • Theme.MaterialComponents.DayNight.DarkActionBar

The three principles

Some useful specifications

Some Material Design controls

Toolbar

The Toolbar is a Material Design-style navigation control introduced in Android 5.0. Google highly recommends using the Toolbar as a navigation bar on Android clients instead of the Actionbar. The Toolbar is significantly more flexible than the Actionbar. Unlike the Actionbar, which must be fixed to the top of the Activity, it can be placed anywhere in the interface. In addition, when designing the Toolbar, Google has left developers a lot of room for customizable changes. These properties are detailed in the API documentation, such as:

  • Set the navigation icon
  • Setting App logo support setting title and sub-title support adding one or more custom controls support Action Menu

Set in the layout file

  • App :navigationIcon Set navigation button
  • App: LOGO Sets the logo icon
  • App :title Sets the title
  • App :titleTextColor sets the titleTextColor
  • App :subtitle Sets the subtitle
  • App :subtitleTextColor sets the subtitleTextColor
  • app:popupTheme Reference to a theme that should be used to inflate popups – shown by widgets in the toolbar.
  • App :titleTextAppearance sets title-text-related properties such as font, color, size, and so on
  • App: subtitleTextAppearance set subtitletext related properties, such as font, color, size, etc
  • App: logoDescription logo
  • Android: background Toolbar background
  • Android: theme topics

FloatingActionButton

FloatingActionButton is an action button that inherits ImageView floatingButton. It is often used in common operations. A page should have only one FloatingActionButton, otherwise the user will feel confused. FloatingActionButton sizes are standard (56DP) and mini (40DP), as Google requires. If you don’t like it, you can set it to a different size. And for the icon using materialDesign icon, the size of 24dp is the best!

  • Android: SRC sets the corresponding image
  • App :backgroundTint sets the background color
  • App :borderWidth Sets the width of the border. If you do not set 0dp, FAB will appear square on SDK 4.1 and have no shadow effect on SDK 5.0 and later.
  • App :elevation Sets the shadow effect
  • App: Shadow effect when pressedTranslationZ is pressed
  • App :fabSize Normal corresponds to 56DP and Mini to 40DP
  • App :layout_anchor sets the anchor point relative to that control as a reference
  • App :layout_anchorGravity sets parameters like top/bottom relative to the location of the anchor point
  • App :rippleColor sets the color of the ripples when clicked

Snackbar

Snackbar is a quick pop-up message prompt similar to Toast, displayed on the bottom of the phone and on the left side of the device with a large screen. However, it is richer in display than Toast and also provides an interface for user interaction

BottomAppBar

An important feature of Material Design is the Design BottomAppBar. Can adapt to the changing needs and behaviors of users, So, BottomAppBar is an evolution guided by standard material. It focuses more on features, increases engagement, and visually anchors the UI

The Activity subject must be the Subject of the MaterialComponents

  • style=”@style/Widget.MaterialComponents.BottomAppBar”
  • Can pass FabAlignmentMode, FabCradleMargin FabCradleRoundedCornerRadius and FabCradleVerticalOffset to control the overall placement;
  • (FabAlignmentMode) can be set to center or end. If FabAttached is set to True, the Fab will be positioned to connect to BottomAppBar;
  • FabCradleMargin sets the spacing between FAB and BottomAppBar, and changing this value increases or decreases the spacing between FAB and BottomAppBar;
  • FabCradleRoundedCornerRadius specified around the incision Angle of roundness;
  • FabCradleVerticalOffset specifies the vertical offset between FAB and BottomAppBar. If fabCradleVerticalOffset is 0, the center of the FAB will align with the top of the BottomAppBar.

NavigationView

NavigationView represents the standard navigation menu for your application, and the menu contents can be populated with a menu resource file. NavigationView is usually placed in DrawerLayout, which allows for a sideshow UI. DrawerLayout can have three sub-layouts. The first layout must be the main screen and cannot be blank. The other two sub-layouts are left and right side slides

  • Android: Layout_gravity slides from the left if it is start, and slides from the right if it is end
  • App: Menu NavigationView is to place elements in the layout through the menu form, the value for their own menu text
  • App :headerLayout sets the header file for NavigationView
  • App :itemTextColor Sets the color of menu text
  • App :itemIconTint Sets the color of the menu icon
  • App :itemBackground sets the color of the menu background

BottomNavigationView

BottomNavigationView creates a bottom-navigation bar that allows users to easily navigate and switch top-level content views with a single click, which can be used when an item has three to five top-level (bottom) destinations to navigate.

  1. Create a menu resource with a maximum of 5 navigation targets (BottomNavigationView does not support more than 5 items);
  2. Place the BottomNavigationView below the content;
  3. Set the App :menu property on BottomNavigationView to the menu resource;
  4. Set the option to monitor events setOnNavigationItemSelectedListener (…).
  5. Set response to user click status via app:itemIconTint and App :itemTextColor. This includes ICONS and font colors
<! - define bottom_navigation_colors -- -- >

      
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="true" />
    <item android:color="@android:color/white" android:state_checked="false" />
</selector>
<! App :itemIconTint="@drawable/bottom_navigation_colors" app:itemIconTint="@drawable/bottom_navigation_colors"
Copy the code

Set the style

  • Style = “@ style/Widget. Design. BottomNavigationView” default material BottomNavigationView style by the color of the update, text size, and behavior. The default BottomNavigationView has a white background with a colored icon and text colorPrimary
  • Style = “@ style/Widget. MaterialComponents. BottomNavigationView.” Colored “this style after the default styles, but the color is set to the different properties. Use a color style to get the bottom navigation bar with a colorPrimary background and add a white shadow to the icon and text colors.
  • Style = “@ style/Widget. Design. BottomNavigationView” if you want to the bottom of the navigation bar with old behavior, this style can be set on the BottomNavigationView. However, it is recommended to use the updated Material style whenever possible

DrawerLayout

DrawerLayout is V4 Library package to achieve the effect of the side-slide menu control, it can be said that DrawerLayout is because the third party control such as MenuDrawer after the emergence of Google reference and the emergence of the product. DrawerLayout is divided into two parts: side menu and main content area. The side menu can be expanded and hidden according to gestures (drawerLayout itself features), and the content of the main content area can be changed with the click of the menu

  1. The drawer navigation bar is the interface panel that displays the app’s main navigation menu. It displays when the user touches the drawer navigation icon in the app bar or swipes a finger from the left edge of the screen
  2. Drawer navigation ICONS are displayed on all top destinations using DrawerLayout. The top-level destination is the root destination of the application. They don’t show up buttons in the app bar.
  3. To add a drawer navigation bar, declare DrawerLayout as the root view. Within DrawerLayout, add layout for the main screen content and other views that contain the contents of the drawer navigation bar.
  4. For example, the following layout uses a DrawerLayout with two child views: a NavHostFragment for the main content and a NavigationView for the contents of the drawer navigation bar

CardView

Material Design has a very personalized Design concept: Cards, Cards has its own unique UI characteristics,CardView inherits from FrameLayout class, and can set rounded corners and shadows, so that the control has three-dimensional. It can also contain other layout containers and controls

  • Card_view :cardCornerRadius Sets the corner radius
  • Card_view. setRadius To set the Angle radius in your code, use the
  • Card_view :cardBackgroundColor Sets the background color of the card
  • Card_view :cardElevation Sets the z-axis shadow height
  • Card_view :cardMaxElevation Sets the maximum shadow height on the Z axis
  • Card_view: cardUseCompatPadding sets the padding
  • Card_view: cardPreventCornerOverlap in v20 adding padding and the previous version, this property is to prevent the card content and the bottom of the overlap

Material Button

The Material Button is a customizable Button component with updated visual styles and multiple styles built into it.

TextInputLayout&TextInputEditText

  • Android: Hint text
  • App :counterEnabled Whether to add the counting function. The default value is false
  • App :counterMaxLength Maximum number of inputs (affects display if count is displayed)
  • App :errorEnabled whether there is an error
  • App :errorTextAppearance Sets the text style for the error prompt
  • App :hintAnimationEnabled Whether to animate the prompt text
  • App :hintEnabled Whether to enable the floating label function. If not, all informational information will be displayed in the Edittext
  • App :hintTextAppearance sets the style of the suggestive text
  • App: passwordToggleContentDescription the function is to provide Talkback or other accessibility features
  • Whether the app: passwordToggleEnabled prompt pictures behind the display
  • Tips image behind the app: passwordToggleDrawable replacement
  • App :passwordToggleTint sets the color for the following prompt image
  • App: passwordToggleTintMode control switch password visible icon the background color of the mixed mode
  • App: counterOverflowTextAppearance set calculator offside after the text color and size (through the style set up)
  • App: counterTextAppearance set under normal circumstances the counter text color and size (through the style set up)

TabLayout

  • App :tabBackground Sets the background color of the table
  • App :tabTextColor Sets the color of the text when it is not selected
  • App :tabSelectedTextColor Sets the color of the text when selected
  • App :tabIndicatorColor Sets the color of the slider
  • App: tabTextAppearance = “@ android: style/TextAppearance. Large” set TableLayout text main topic, to set up through textSize text size, can only be set through topic
  • App :tabMode=”scrollable” Set TableLayout to slide. This table must be used when a large number of pages cannot be displayed on a single page.

Bottom Sheet

Bottom Sheet is a dialog box control introduced in Design Support Library23.2. Call it Bottom pop-up. The content in the Bottom Sheet is hidden by default, showing only a small portion, and can be fully expanded, fully hidden, or partially hidden by setting its state or gestures in the code

Bottom Sheets has five states:

  • STATE_COLLAPSED: Bottom Sheets are visible, but show only visible (partial) heights. This state is usually the “rest position” of the bottom worksheet. The viewable height, chosen by the developer, should be sufficient to indicate that there is additional content, allowing the user to trigger a certain action or extend Bottom Sheets;
  • STATE_EXPANDED: Bottom Sheets are visible and its maximum height is not drag or drop;
  • STATE_DRAGGING: Users actively drag Bottom Sheets up or down;
  • State_demystified: Bottom Sheets can be adjusted to a specific height after dragging/swiping gestures. This will be the visible height, spread height or 0, in case user action causes the bottom form to hide;
  • STATE_HIDDEN: Bottom Sheets hidden.