“This is the 16th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The first chapter of chapter 21, the Authoritative Guide to Android Programming, focuses on recustomizing the BeatBox interface. It is not much, and will learn about Android themes and styles.

First, color resources

Color resources are usually managed in a res/values/colors.xml file that is referenced throughout the application.

The color can be seen in real time from the small square on the left, which is quite convenient. In general, various color values are defined in the project, as well as the color values for night mode, which will be placed in a separate -night folder called color.xml with the same name, so that switching the theme to dark mode automatically changes the referenced color values. With the previous way to do internationalization similar to do this function.

Second, the style

A style is a set of properties that can be applied to a view part. Stored in res/values/styles.xml. Let’s add a new style BeatBoxButton.

<? The XML version = "1.0" encoding = "utf-8"? > <resources> <style name="BeatBoxButton"> <item name="android:background">@color/dark_blue</item> </style> </resources>Copy the code

Styles can be shared by many controls, and when you change a property, you only modify the common style definition.

Then go and style the Button.

style="@style/BeatBoxButton"
Copy the code

Running up is still ugly in fact, the problem is not big, is to learn.

Style inheritance

Styles also support inheritance. One style can inherit and override properties of other styles.

For example, inheritance by name:

    <style name="BeatBoxButton.Strong">
        <item name="android:textStyle">bold</item>
    </style>
Copy the code

Or you can specify the parent style by way of inheritance:

    <style name="StrongBeatBoxButton" parent="@style/BeatBoxButton">
        <item name="android:textStyle">bold</item>
    </style>
Copy the code

Then go ahead and set up Button to experience it.

Three, themes,

Themes can be thought of as an evolutionary enhancement of the style, with theme properties applied throughout the application.

Open the manifest file to see the theme to which the default Settings are applied:

Theme points to:

Topic actually is also a kind of style, can be seen here my default inherits the Theme. The Theme of the MaterialComponents. DayNight. DarkActionBar, want to further understand the properties will continue to hold down the Command (Ctrl) to jump into the can.

The AppCompat library comes with three themes:

  • Theme.AppCompat — Dark Theme.
  • Theme.AppCompat.Light — Light Theme.
  • Theme. AppCompat. Light. DarkActionBar — — with dark Light color Theme of the toolbar.

My project is probably a little bit newer than the book, so the default is the MaterialComponents library theme, dark mode or light mode naming rules are basically the same.

For details on the dark theme background of the MaterialComponent see:

Material. IO/develop/and…

4. Add theme colors

You can change the color you want by yourself.

The colorPrimary attribute is used primarily for the application bar. ColorPrimaryDark is used for the status bar at the top of the screen.

Note that only post-Lollipop systems support status bar theme colors. On the previous system, the status bar remained the same black background regardless of the theme color you specified.

There is often a need for an immersive status bar in a project. Here is an immersive status bar for an open source project:

Github.com/gyf-dev/Imm…

It looks pretty good. I also use this solution to solve the problem of immersive status bar in my current project.

other

Hey hey, the work is very busy, still want to divide some time to study record, cent two, ah ha ha ha ~

BeatBox Project Demo address:

Github.com/visiongem/A…

🌈 follow me ac~ ❤️

Public account: Ni K Ni K