Creating styles and themes for Android tutorial
1、 Foreword
As an Android Developer, we generally focus on the functions of the app. But just having functions is not enough. The interface is as important as functions. There are two ways to change the appearance of an app. The first is to modify the view properties directly in XML. This method is only suitable for simple apps with only a few views and activities. The second method is to create custom styles and themes. If you are familiar with web development, the first method is similar to using inline CSS styles, and the second method is similar to using style sheets.
In this article, we will introduce how to create custom styles and themes.
2、 Create styles
Styles are obviously applied to UI controls. So let's first create a new empty activity and add two views to the layout file.
As you can see, attribute layout_ Width and layout_ Margin is explicitly defined in each view.
To create a new style for this view, right-click it and select refactor > extract > style.
Now you will see a dialog box where you can set the name of the style and select the properties to include. We named it My@R_167_2419 @, and select all attributes except background.
When you click OK, you will see that the code of the first view has changed.
The view now has a point My@R_167_2419 @Style attribute of the style. You can open RES / values / styles XML to view the definition of this style
Once a style is defined, you can apply it to any view. For example, put My@R_167_2419 @Apply to the second view:
After the style is applied, the two views in the activity look like this:
3、 Inherit styles
Android allows you to create a new style based on other styles. In other words, you are allowed to inherit style.
There are two different syntax for inheriting a style. The first grammar, called implicit grammar, uses Number as a marker. For example, if you want to create two parents My@R_167_2419 @, substyle named teal and cyan:
You might guess My@R_167_2419 @. teal and My@R_167_2419 @. cyan has My@R_167_2419 @In addition to all the attributes of, they also have the Android: background attribute.
The second syntax is often called explicit syntax. It uses a parent attribute whose value is the name of the parent style. Here is a definition called Teal@R_167_2419 @Code snippet of style:
Applying a derived style is no different from applying an ordinary style.
Most developers use implicit syntax when inheriting their own style, and explicit syntax when inheriting system style.
4、 Create themes
So far, we just apply style to the view in the activity. Android also allows you to apply style to the entire activity and application. When a style is applied to an activity or application, it becomes a theme.
By default, all apps created with the latest version of Android studio use a theme called apptheme. Apptheme is a subclass of appcompat. It is a very large and extensive theme that affects the appearance of almost all commonly used views.
You can do it in styles Definition of apptheme found in XML:
Apptheme follows material design Therefore, in order to create a theme that conforms to the material design spec, using apptheme as a parent is a good theme. Otherwise, you can also use theme directly Appcompat as a parent.
Although you can write XML code to create themes - remember, they are just styles - in this tutorial, I will demonstrate how to use Android studio's theme editor to do these complex tasks.
To open the theme editor, open the tools menu and select Android > Theme Editor.
On the right side of the theme editor window, you not only have the control to modify the theme, but also the control to create a new theme. The preview results of the modified theme are displayed on the left.
To create a new theme, click the theme drop-down menu and select the create new theme option.
In the pop-up dialog box, set the name of the new theme as mytheme, and then click OK.
At this point, styles XML will have a new line of code:
Let's use the theme editor to modify mytheme. To make things easier, this tutorial only modifies the values of the colorprimary, colorprimarydark, and coloraccent properties.
To modify the value of colorprimary, click the colorprimary button. The theme editor displays a color dialog box. Choose the color you want, but remember to give it a new name. If you forget, the theme editor will overwrite the color of apptheme.
Modifying the values of colorprimarydark and coloraccent is the same step. The theme editor will automatically recommend the appropriate bothcolorprimarydark and coloraccent according to the colorprimary you choose.
Now the definition of mytheme looks like this:
5、 Apply themes
Before applying the theme we created, let's add a few common controls to the activity. This makes it easier to see the effect of the theme.
The following code creates an ordinary button, a borderless button, a colored button and a Check@R_167_2419 @, a RadioButton, a switch, a seekbar, a textview and an EditText:
When these views are added, the layout looks like this:
If you have read the material design spec. I'm sure you can see that the activity at this time uses indigo for colorprimary and colorprimarydark. Coloraccent uses pink. These are the default colors for Android studio. You can use RES / values / colors Find their hex values in the XML.
To use this theme in an activity, open the project's manifest file, add the Android: theme attribute where the activity is defined, and set the value to @ style / mytheme.
Similarly, you can also apply this topic to the entire app by setting the Android: theme property of the application.
If you look at your activity now, it should be very different.
6、 Summary
In this tutorial, you learned how to create and apply custom styles and themes. You can use this knowledge to make your app look better. Now most users are used to material design, and deviating too far from the rules will interfere with them. The above is the whole content of this article. I hope it can bring some help to everyone's study and work. If you have any questions, you can leave a message.