How to create a style for material design for Lollipop and above devices. Also creating styles using the AppCompat libraries for earlier devices.
- [Narrator] The color selection in material design is part of the experience in creating a cohesive application. Color should be used in combination to create a nice look and feel for the users. Material design uses the standard method of creating styles and themes. Style in Android is an XML structure that has a list of properties that can be applied to a view to control its appearance. A theme in Android is a style that has been applied to an activity and can be used to impact the appearance of all views on that activity. Apps using material design usually create a style that will have a primary color, a secondary, and an accent color.
One site I've found very useful for material design color selection is at www.materialpalette.com. On this site, we can select a primary color such as indigo. As we can see from the palette, the secondary color will be a darker variant of the primary as seen on the left or a lighter variant as seen on the right of the primary. An accent color will also need to be selected to provide an offset of the primary and secondary color combination.
Here we will use teal. Notice how the floating action button changes to our accent color. The colors shown on this site are not the only ones that can be used with a material design application. Whatever colors are selected, they should appear to work together. When creating a style for use in material design, Google has created base styles for you. If you are only going to be using Android Lollipop and above, you can use @android:style/Theme.Material.Light. Since it starts with @android, we know this style is baked right into the Android operating system but only starting with Lollipop.
It will not be found on earlier devices. You might also notice that it ends with .Light. This is the light color version of the screen which expects a white or a light background with a black or dark text. If your style inherits from the Android style Theme.Material.Light, you use the style with a standard Android Activity. If, on the other hand, you are using the AppCompat library, you can use @style/Theme.AppCompat.Light. This style comes with the AppCompat library. It requires the use of a special Activity type called the AppCompatActivity.
It is important to understand that the AppCompatActivity will only work with AppCompat themes. The AppCompat libraries themselves have changed over time. Starting with version 23.2.0, they included a new style called Day/Night. The Day/Night style allows you to switch between the light and dark versions of the theme. This should generally be used in applications where seeing the screen in different conditions is useful. For example, a mapping app that uses the light versions of the theme during the day and dark version at night.
There are three settings, the first being Light which is a light version of the theme, Dark which manually sets the dark version of the theme, and Auto which switches based on the time of day. It is important to remember that themes are set when the Activity is loaded. This means if you change from Light to Dark mode, the Activity itself will need to be reloaded. Now let's take a look at implementing this in material design.
- Breaking down a material design layout
- Adding AppCompat
- Adding icons and floating action buttons
- Animating the appearance
- Creating a RecyclerView
- Creating a ViewHolder
- Modifying the adapter
- Adding CardView
- Adding transition animations
- Adding a Snackbar
- Working with CoordinatorLayout