I believe that students who are new to Android development are familiar with this interface.
This is the default Empty Activity layout after Android Studio creates a new project.
I don’t know how many students think that the purple color of the app title and the status bar above the head is ugly like me. Today's note is to record how to modify the theme color.
1. Find the theme file
We open the AndroidManifest.xml of the project, and we can see that there is a line used to specify the theme.
As can be seen from this sentence, our theme is specified through @style resources. The resource path is under res/values, named themes.xml.
If you jump through ctrl+left button, you will find that there are two. This is because there is another dark theme, and there is also a themes.xml in the res/values-night directory.
Second, analyze the content of the theme file
In Guo Lin's "The First Line of Code", it is also mentioned to change the theme color. The content of the file in the book is as follows:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>Teacher Guo Lin gave the position of each attribute representative in the book. Here is a reference to the Color description of the Android Material design drawing.
In other words, in the original file, the meaning of each attribute is roughly as follows:
| attribute name | representative position |
|---|---|
| colorPrimary | Action bar background. This is the color applied to the action bar background. |
| colorPrimaryDark | Status bar and navigation bar background. This is the color applied to the status bar and navigation bar. |
| colorAccent | Control background. This is the color applied to framework controls. |
And now the content of the file is like this
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Graduation" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_200</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_200</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>First of all, we can see that the parent of the style is different. The parent here is Theme.MaterialComponents.DayNight.DarkActionBar.
Here is a brief introduction to MaterialComponents. MaterialComponents is a component library based on Material Design released by Google's official design team. It is to allow the programs we develop to have a unified style, brand effect, interactive effects, and actions generated by the operation interface. It is based on Android native components. Richer functions and display effects follow the Android interface design specifications, making it easier to design products and shorten development and design time.
The meaning of these properties is as follows:
| attribute name | meaning |
|---|---|
| colorPrimary | Your app's primary brand color, used primarily for theming |
| colorPrimaryVariant | Lighter/darker variants of your main brand colors, rarely used in themes |
| colorOnPrimary | The color used for elements that appear above the primary color (for example, text and icons, usually white or semi-transparent black, depending on accessibility) |
| colorSecondary | A secondary branding color for your app, mainly used to emphasize certain widgets that need to stand out |
| colorSecondaryVariant | Lighter/darker variants of your secondary brand colors, rarely used in themes |
| colorOnSecondary | The color to use for elements displayed on top of the secondary color |
The last android:statusBarColor is the status bar color in the system, where the status bar color is defined to be consistent with colorPrimaryVariant.
3. Change the theme color
The way to change the theme color is very simple. The way they define the theme color is called by @color, so you only need to define the color you want in res/colors and then call it.
For example, I changed it like this:
<item name="colorPrimary">@color/teal_200</item>
<item name="colorPrimaryVariant">@color/white</item>
<item name="colorOnPrimary">@color/white</item>Here I changed the theme color to mint green and the status bar color to white.
The effect is as follows:
1. Modify the text color of the status bar
We will find a problem with the above effect. When the status bar is set to white by me, the text on the status bar is invisible because it is also white. At this time, we need to modify the color of the status bar text. Here is Google's native method to change the color of the status bar:
public static void setStatusWordColor(Activity activity, boolean dark) {
View decorView = activity.getWindow().getDecorView();
if (dark) {
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
} else {
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
}The essence is the switching of the two flags of decorView.
Then call it in onCreate
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
ThemeUtil.setStatusWordColor(this, true)
}It's all right now
2. Delete the title bar
Today's apps rarely have the title bar above. It is also very simple to delete this title bar, just add such a sentence in onCreate()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
supportRequestWindowFeature(Window.FEATURE_NO_TITLE) //去除标题栏
setContentView(R.layout.activity_main)
ThemeUtil.setStatusWordColor(this, true)
}Now there is no title bar.
If all the activities in the entire app do not want this title bar, then we can also set it uniformly.
In the res/values/theme.xml found before, we mentioned that the parent of the style is Theme.MaterialComponents.DayNight.DarkActionBar.
Here you can see that the system selects the template with ActionBar by default, we only need to change it to one without ActionBar, then the entire App Activity will not have a title bar.
<style name="Theme.Graduation" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
</style>Four. Summary
This note records the attribute meaning of the file theme, how to modify the theme color, how to modify the text color of the status bar, and how to delete the title bar. Hope to be of some help to you all.
Reference article:
Android transparent status bar and status bar text color change - Short Book (jianshu.com)
[Translation] Setting the Material Components theme for Android - Brief Book (jianshu.com)
Material Components (MDC) Simple Introduction_fallinux Blog-CSDN Blog_material-components-android