Material and Dark theme in Android

Tram Ho

Introduce

For a programmer in general and Android programmers in particular, the Android application interface is an important part of increasing the number of users using the app. There are many different ways to provide a better UI and attract users. There is 1 way to use Android Theming System. It can be used to provide a better user experience and there are other benefits of using themes from the developer’s perspective:

  • Reuse layouts: the effective use of themes allows layouts to be used repeatedly without writing code for a similar interface.
  • Maintain code: Because layouts are reused many times, it leads to the ability to maintain code, ie the fewer lines of code, the better.
  • Theming: you can develop Android apps using Material themes or Dark themes in your apps for a better user experience.

Differences between themes and styles

You have encountered a situation when you tried to implement a style or theme into the application but it did not work. Most Android dev don’t know the difference between themes and styles. So before we learn about Material and Dark themes, we should learn about the differences between themes and styles.

The biggest reason that people wonder about is styles and themes with the styles we have <style> but no <theme> in Android. Here are the differences between the two:

  • Usage: Style is a collection of attributes and can only be used for specific views. While a theme is a type of style and can be used in an entire application or activity or view.
  • Key-value: Styles are like a map because they have keys and values. So we have the view attribute and with those attributes, there are values ​​associated with the style. In the theme, there are attributes and values.

Here is an example of style: Here are examples of themes: Can sometimes use? Attr / in the code as follows:

Using

There are differences between themes and styles when used in an application. If a style is used on a view, it is only applied on that particular view and not on sub views within it. But if you use a theme for a view, it will also be applied to sub views within it. Note:

In case of hierarchical view, use caution when using the theme. For example, you have a parent view of parent1 and it has 2 child views: child1 and child2. The android: background attribute is also used in 3 views. So which attribute will be used? In the case of hierarchy, the property of the nearest child view will be used while the values ​​of the parent view will be ignored. So the attribute value used in child1 and child2 and the value of parent1 are ignored.

Material theme

Material themes are used to provide a look and feel for your application using Material Design. Material Components themes have properties that are used to style elements. Attributes can be classified into the following three categories:

  • Color
  • Typography
  • Shape

By providing values ​​for all three categories, you can design quality applications.

  1. Color:

There are many properties related to Material theming color. The main attributes are: primary, secondary, surface, error, and variations of these colors.

colorPrimary: this is the main color used in the application.

colorOnPrimary: used for elements placed on your main color. So it is the opposite of primary color. This is important because if you put primary color and color above the main color, it will bring a bad experience for users when they can not distinguish these two types of colors.

colorPrimaryVarient: variant is lighter or darker than the primary color

colorSecondary: color used much after primary color

colorOnSecondary: use when set the element color above secondary color

colorSecondaryVarient: variant lighter or darker than secondary colors

colorSurface: used when setting colors for surfaces.

colorError: used when displaying error messages. Usually it is red

colorOnError: used for the element shown on top of colorError

colorBackground: use for the content behind

Refer to Material Color Tool

  1. Typography: Typography is often used with in-app text. You do not need to write code for different types of text screens for different resolutions. Please refer to the following table:
  • textAppearanceHeadline1: Light, 96sp
  • textAppearanceHeadline2: Light, 60sp
  • textAppearanceHeadline3: Regular, 48sp
  • textAppearanceHeadline4: Regular, 34sp
  • textAppearanceHeadline5: Regular, 24sp
  • textAppearanceHeadline6: medium, 20sp
  • textAppearanceSubtitle1: Regular, 16sp
  • textAppearanceSubtitle2: Medium, 14sp
  • textAppearanceBody1: Regular, 16sp
  • textAppearanceBody2: Regular, 14sp
  • textAppearanceCaption: Regular, 12sp
  • textAppearanceButton: Regular, 14sp, all caps
  • textAppearanceOverline: Regular, 12sp, all caps

To use:

If you want to customize:

  1. Shape

To use shapes in applications, there are a few guidelines. Shapes can be divided into categories: small, medium, large. With corners you can use rounded or cut. Besides, can set corner radius or set corner will be rounded.

Here are some of the recommended shapes in Material Design:

  • shapeAppearanceSmallComponent: usually used for small components like Button and chip
  • shapeAppearanceMediumComponent: usually used for medium size shapes like cards
  • shapeAppearanceLargeComponent: usually used for large shapes like bottom sheet

You can customize the same way when using Typography

Dark theme

Android 10 released, Dark theme is the name many people mentioned. This feature is available from Android 10 or API level 29. Using the Dark theme will make it possible for users to use the device in a lower light environment without harming the eyes.

To use the Dark theme in the application, you need to set the application theme inherited from the DayNight theme:

or if you use Material

Update theme:

For example:

When using a Dark theme, the following properties should be used:

instead of

For example, in your app there is text that uses dark colors, then you change the theme to a Dark theme, which will be a very bad experience for users with dark text on the dark theme.

Conclude

Through this article, somewhat I have introduced about Material theme as well as Dark theme in Android. To learn more about the Material theme, see Material Design

Refer

Share the news now

Source : Viblo