Home>

Foreword

There are many ready-made components available in android,However, the programs on android are often not suitable to use the components that come with the system.Mainly style may not be what we want.At this time we need to customize some styles.This article will explain how to modify the style of the component.

1. The default style.

Before modifying the style of the component,Let's first understand the default style of the component,as follows:

Of course there are many more components,Here is a simple list.From the default components above, you can see that the style of these components is not consistent with the style of your app.Then all you may need to do at this time is to change the style of the component.(I think the default styles are basically ugly.Basically every app needs custom styles).

2. The default style file.

Let's first see where the styles of these components are placed.\ android-sdk-windows \ platforms \ android-9 \ data \ res \ values ​​There are two more important files:themes.xml and styles.xml, these two files are style files (themes are also styles). You can open styles.xml to see, here is the default style of system components.

3. Custom style files.

We are more concerned about how to customize the style file.The easiest way is to refer to the default style file mentioned above and modify it.Of course, you can also google for some changes.However, I personally think that what is described on the Internet is only given as an example.Specific ideas have not been given.It is better to teach fish to fish.

4, style examples.

4.1 default style

For our example, we choose radiobutton. I believe you have seen its default style.

Take a look at the default style file:

<style name="widget.compoundbutton.radiobutton">
    <item name="android:background">@android:drawable/btn_radio_label_background</item>
    <item name="android:button">@android:drawable/btn_radio</item>
</style>

It can be seen that it actually has two important styles,One is the background and the other is the button.

①background.

\ android-sdk-windows \ platforms \ android-9 \ data \ res \ drawable-mdpi \ btn_radio_label_background is a .9 picture. (If you are right.Figure 9 is not very familiar,Then refer to my related blog post). As shown in the figure:

(This is a transparent icon.The surrounding black border is the preview area).

② button.

First find \ android-sdk-windows \ platforms \ android-9 \ data \ res \ drawable \ btn_radio. This is not a picture,It's an xml file. The contents are as follows:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:state_window_focused="false"
     android:drawable="@ drawable/btn_radio_on" />
  <item android:state_checked="false" android:state_window_focused="false"
     android:drawable="@ drawable/btn_radio_off" />
  <item android:state_checked="true" android:state_pressed="true"
     android:drawable="@ drawable/btn_radio_on_pressed" />
  <item android:state_checked="false" android:state_pressed="true"
     android:drawable="@ drawable/btn_radio_off_pressed" />
  <item android:state_checked="true" android:state_focused="true"
     android:drawable="@ drawable/btn_radio_on_selected" />
  <item android:state_checked="false" android:state_focused="true"
     android:drawable="@ drawable/btn_radio_off_selected" />
  <item android:state_checked="false" android:drawable="@ drawable/btn_radio_off" />
  <item android:state_checked="true" android:drawable="@ drawable/btn_radio_on" />
</selector>

Is this clear now?It turns out that the style of the radiobutton is so complicated,There are a total of 6 states (you have to say 8 types, then you must take a closer look). As shown in the figure:

name

icon

btn_radio_on_selected.png

btn_radio_on_pressed.png

btn_radio_on.png

btn_radio_off_selected.png

btn_radio_off_pressed.png

btn_radio_off.png

4.2 Define style

The directory structure is as follows:

Create a style.xml file in your project. Of course, the content of the file is to copy the default style (you can also write it yourself after you are skilled) and then modify it.

The content of style.xml is as follows:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
  <style name="myradiobutton">
    <item name="android:background">@ drawable/bt_radio</item>
    <item name="android:button">@ null</item>
  </style>
</resources>

bt_radio is an xml file with the following content:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@ drawable/bt_require_radio_s" android:state_checked="true" />
  <item android:drawable="@ drawable/bt_require_radio_n" android:state_checked="false" />
</selector>

bt_required_radio_s and bt_requires_radio_n are two.9 pictures. As shown in the figure:

name

icon

bt_requires_radio_n

bt_requires_radio_n

4.3 Use styles.

Just add it in your xml (myradiobutton is named above).

Examples of layouts used are as follows:

<?xml version="1.0" encoding="utf-8"?>
<radiogroup xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#aaaaaa"
  android:orientation="vertical">
  <radiobutton
    android:layout_width="wrap_content"
    android:layout_height="50dip"
    android:layout_margintop="10dip"
    android:text="abcd" />
  <radiobutton
    android:layout_width="wrap_content"
    android:layout_height="50dip"
    android:layout_margintop="10dip"
    android:text="efgh" />
</radiogroup>

Effect picture:

5. Related instructions.

For style.xml why add a picture to the background and set the button picture to @null. This depends on your personal needs:

① If the style you need is the whole background changed after you click, then change the style of the background,And set the button style to @null, if not set, of course, the system default style.

② If you just want to change the circled picture in the system style, then change the style of the button.

6. Summary.

Changing the default component style is quite simple,The summary steps are as follows:

① Find the default component style.

② Copy the style into your project and modify it.

③ Apply style.

These steps are not just the modification of radiobutton, but all components can be changed in this way.The modification is similar.

7. Reader assignments.

After reading this article, I will give you a chance to practice.You can change a check box to try it according to the ideas of this article.

ps:Some people think that Google may change much faster than themselves,But you should change it when you do n’t have internet,And you can be more clear about the default style of the component.Besides, Google may not have such a suitable article.If you have any questions in the article, you can leave a message.Welcome exchange.

Android qq group:196761677.

  • Previous JS implements the blog management menu effect code on the left side of the Sina blog
  • Next JS + CSS vertical concise menu effect code
  • Trends