theme for Android
Setting up,So you’ve migrated your Android app to AndroidX and, inside the process, have additionally switched to the usage of Material Components for Android in preference to the Design Support Library. Alternatively, possibly you’re in the lucky state of affairs of starting an app from scratch and get to apply these new libraries right away. In either case, the core widgets you comprise into your app now in most cases fall beneath the com.Google.Android.Cloth bundle and produce with them a spread of new subject/style attributes.
This article will simplest cover the brand new international subject attributes and per-widget fashion attributes which might be delivered. Given that the Theme.MaterialComponents themes enlarge the pre-present Theme.AppCompat variants, they inherit all of their attributes (suppose colorAccent, colorControlNormal, etc.), so that it will not be included. Let’s start!
Setting up,Initial setup
This is as easy as adding a unmarried Gradle dependency for your app/module build.Gradle record:
implementation “com.google.android.material:material:$material_version”
Material Components for Android is underneath lively development. The preliminary 1.Zero.Zero release became on the whole only a port of the prevailing com.Android.Aid.Layout classes over to the new com.Google.Android.Fabric namespace. The first deliberate unbiased release is 1.1.0 and, at the time of writing, the modern version is 1.1.Zero-alpha07. You can music new releases at the GitHub repository.
Choosing a Material Components theme
As with the AppCompat subject matters, the Material Components topics include some base variants to be able to pick out from:
The key variations in every variation are the light/dark colour palettes and the inclusion/exclusion of an ActionBar in each themed Activity‘s Window.
Note 1: If you are migrating an existing subject matter and don’t wish to get all of the new attributes without delay, use a Theme.MaterialComponents..Bridge variant.
Note 2: Some secondary variants are not proven right here, such as Theme.MaterialComponents.Dialog. themes.
To start using this type of issues for your app, you’d upload the following to your res/patterns.Xml report:
Finally, you want to reference this in your Manifest:
…
Note: You also can apply an android:theme in line with to your Manifest.
A simple playground screen
Right, time to get right down to business. In order to demonstrate the outcomes of customizing Material Components attributes, we need a visual aid. We may be using the playground screen under, which makes use of the Theme.MaterialComponents.Light base subject and is packed with most Material Components widgets and their variations:
Global theme attributes
The Material Components subject matters introduce new attributes that may be used to style elements on a global scale. These can be grouped into 3 predominant subsystems: coloration, typography and shape.
Setting up,Color
Color attributes consist mainly of number one, secondary, errors, floor and historical past colours, in conjunction with their respective secondary variants and “on” colors. Some of these were reused from the AppCompat subject matters (eg. ColorPrimary, colorError and android:colorBackground):
- colorPrimary: The number one logo color of your app, used most predominantly in theming
- colorPrimaryVariant: A lighter/darker version of your primary brand shade, used sparingly in theming
- colorOnPrimary: The colour used for factors displayed on top of your primary colorations (eg. Text and icons, frequently white or semi-transparent black relying on accessibility)
- colorSecondary: The secondary emblem colour of your app, used in the main as an accessory for positive widgets that need to stand out
- colorSecondaryVariant: A lighter/darker version of your secondary logo colour, used sparingly in theming
- colorOnSecondary: The color used for factors displayed on pinnacle of your secondary shades
- colorError: The colour used for mistakes (regularly a shade of crimson)
- colorOnError: The coloration used for factors displayed on pinnacle of your errors shade
- colorSurface: The color used for surfaces (i.E. Material “sheets”)
- colorOnSurface: The shade used for factors displayed on pinnacle of your floor coloration
- android:colorBackground: The shade at the back of all other screen content
- colorOnBackground: The shade used for factors displayed on top of your heritage shade
These colorings can be brought in your app subject like so:
#FAFAFA
Note 1: Hex shade codes aren’t currently supported for android:colorBackground, therefore why a color useful resource became used.
Note 2: Use android:statusBarColor and android:navigationBarColor attributes to topic system bars.
The end result can be located in our playground screen:
A extremely good manner to speedy preview the advent of number one/secondary shades is to use the Material Color Tool.
Setting up,Typography
Type attributes adhere to the Material Type System in terms of textual content typeface, weight, size, case and letter spacing. The attributes reference TextAppearance.MaterialComponents.* styles that put into effect (and are named after) the diverse type scales:
- 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
The Material Components widgets will use these patterns as per the Material recommendations.
You could normally need to preserve the default weight, length, case and letter spacing for each fashion. However, a custom typeface can simply make your app stand out. One may anticipate this requires overriding each and every such a attributes. Thankfully, this can be completed in a much greater concise manner by adding the subsequent attributes on your app topic:
These attributes reference an XML Font or a Downloadable Font which you’ve brought on your res/font folder and will practice a custom typeface to every widget and text fashion to your app. There was without a doubt a time when it wasn’t this clean on Android!
If you do, however, desire to customize one of the Material Components text appearance styles, you will achieve this like this:
The results can be observed in our playground screen:
Lastly, Google Fonts is a first-rate region to start in case you’re seeking out unfastened-to-use, custom typefaces (which occur to paintings truly properly with Downloadable Fonts too).
Setting up,Shape
Shape attributes consult with the general shape of each surface and widget for your app. When you don’t forget that those components can be of varying width/top and be raised/unelevated/mentioned, this reduces right down to one factor of customization… Corners.
- Material Components corners can either be part of the rounded (default) or reduce cornerFamily and have a cornerSize to customize the scale. A treatment can be applied to all corners or a subset. The form subject attributes reference
- ShapeAppearance.MaterialComponents.* patterns:
- shapeAppearanceSmallComponent: For small additives, together with Buttons and Chips
- shapeAppearanceMediumComponent: For medium additives, consisting of Cards
- shapeAppearanceLargeComponent: For big components, inclusive of Bottom Sheets
The Material Components widgets will use those patterns as per the Material suggestions.
If you desire to personalize the Material Components form appearance patterns, you will achieve this like this:
The result can be observed in our playground screen:
Setting up,Widget styles and attributes
While worldwide theming covers the general public of our needs, there are instances while we can also wish to personalize the attributes of person widgets. We will discover the patterns (and relevant attributes) of commonplace widgets and how those may be referenced in your Material Components subject.
Setting up,Buttons
Material Buttons consist of four main versions that all inherit from the base Widget.MaterialComponents.Button style, each with an optionally available style suffix: raised (default, no suffix), unelevated (.UnelevatedButton), mentioned (.OutlinedButton) and text (*.TextButton). All button versions use the textAppearanceButton subject attribute for their typography styles.
The key attributes for customizing these styles are as follows:
- backgroundTint: The tint coloration implemented to the button heritage. The default enabled colour is transparent for text buttons and colorPrimary for all other variants.
- IconTint: The tint color carried out to an elective button icon. The default enabled color is colorPrimary for text buttons and colorOnPrimary for all other versions.
- RippleColor: The shade of the button contact ripple. The default color is colorOnPrimary for raised/unelevated buttons and colorPrimary for outlined/textual content buttons.
- StrokeColor: The shade of the stroke across the button historical past. The default coloration is colorOnSurface for outlined buttons and transparent for all different variations.
- StrokeWidth: The width of the stroke across the button historical past. The default value is 1dp for outlined buttons and 0dp for all different editions.
- ShapeAppearance: The shape appearance of the button background. The default cost is shapeAppearanceSmallComponent.
The base button style (utilized by the MaterialButton widget class) can be customized and implemented globally like so:
The result can be observed in our playground screen:
Setting up,Text Fields
Material Text Fields encompass essential versions. As a end result of porting the pre-existing AppCompat TextInputLayout and TextInputEditText training, there are in fact two base styles: Widget.MaterialComponents.TextInputLayout.* and Widget.MaterialComponents.TextInputEditText.*. The variants have a fashion suffix and include crammed container (default, *.FilledBox) and mentioned field (*.OutlinedBox). All text discipline variants use the same old text appearance for input and the textAppearanceCaption topic attribute for “helper” textual content (labels, mistakes, counters, etc.).
The key attributes for customizing the Widget.MaterialComponents.TextInputLayout.* styles are as follows:
- boxBackgroundMode: The mode of the box heritage, which may be both filled, outline or none.
- BoxBackgroundColor: The colour of the textual content subject history. The default enabled color is colorOnSurface for crammed container textual content fields and transparent for outlined box text fields.
- BoxStrokeColor: The shade of the stroke around the text area history. The default shade is colorOnSurface (in default nation) for outlined field text fields and is not noted for stuffed field text fields.
- HintTextColor/errorTextColor/counterTextColor: Various colorations for extraordinary “helper” text sub-components.
- ShapeAppearance: The shape appearance of the textual content discipline historical past. The default fee is shapeAppearanceSmallComponent.
The base text field fashion (used by the TextInputLayout widget magnificence) can be customized and implemented globally like so:
Note: text_field_background is a res/shade that makes use of colorSecondary and the equal alpha values as the default boxBackgroundColor .
The result may be observed in our playground display:
Setting up,Cards
Material Cards are taken into consideration to be “surfaces” and employ the Widget.MaterialComponents.CardView style. The key attributes for customizing them are as follows:
- cardBackgroundColor: The shade of the card background. The default shade is colorSurface.
- CardElevation: The elevation of the card. The default cost is 1dp.
- ShapeAppearance: The form appearance of the cardboard history. The default price is shapeAppearanceMediumComponent.
The base card fashion (used by the MaterialCardView widget elegance) may be customized and implemented globally like so:
The result can be observed in our playground screen:
Setting up,Bottom Navigation
Material Bottom Navigation includes main variants that inherit from the base Widget.MaterialComponents.BottomNavigationView fashion, with an optionally available fashion suffix: surface (default, no suffix) and colored (*.Colored). Bottom Navigation labels use the textAppearanceCaption subject matter characteristic for his or her typography patterns.
The key attributes for customizing these patterns are as follows:
- backgroundTint: The shade of the lowest navigation heritage. The default coloration is colorSurface for surface backside navigation and colorPrimary for coloured bottom navigation.
- ItemTextColor/itemIconTint: The hues of bottom navigation object icons and labels. The default shades are colorOnSurface/colorPrimary(decided on) for floor backside navigation and colorOnPrimary for coloured backside navigation.
- ItemHorizontalTranslationEnabled: A flag to set whether or now not a translation animation have to occur whilst selecting bottom navigation gadgets. The default value is fake.
The base backside navigation style (utilized by the BottomNavigationView widget elegance) can be customized and implemented globally like so: