Android Component Style Customization method detailed _android

Source: Internet
Author: User

Objective

There are a lot of off-the-shelf components available in Android, but Android apps often don't fit in with the system's own components, mainly because the styles may not be what we want. This time we need to customize some style. This article explains how to modify the style of a component.

1, the default style.

Before modifying the style of a component, let's take a look at the default style of the component, as follows:

Of course, there are a lot of components, here is a simple list of it can be. From the default components above you can see that the styles of these components are inconsistent with the style of your app. So what you might need to do at this point is change the style of the component. (I think the default style is basically ugly, basically each app needs custom style).

2, the default style file.

Let's take a look at where the patterns of these components are. \android-sdk-windows\platforms\android-9\data\res\values has two more important files: Themes.xml and Styles.xml, and these two files are style files (themes are styles). You can open the Styles.xml and see, this is the default style for the system components.

3, custom style file.

We are more concerned with how to customize style files. The easiest way to do this is to refer to the default style file mentioned above and make the changes. Of course, you can also Google search some how to modify, but personally feel that the Internet to say how to modify all only give an example, the specific ideas did not give. It is better to teach fish than to teach it.

4. Examples of styles.

4.1 Default Style

Our example will choose RadioButton. Believe you've seen it in the default style.

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:d rawable/btn_ Radio</item>
</style>

You can see that it actually has two important styles, one is background one is button.

①background.

\android-sdk-windows\platforms\android-9\data\res\drawable-mdpi\btn_radio_label_background is a. 9 picture. (If you're not familiar with the. 9 diagram, refer to my blog). As shown in figure:

(This is a transparent icon with a black border around the preview area).

②button.

First find \android-sdk-windows\platforms\android-9\data\res\drawable\btn_radio. This is not a picture, but 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_checke D= "false" android:state_window_focused= "false" android:drawable= "@drawable/btn_radio_off"/> <item Oid: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> 

It is clear that the original RadioButton style is so complex, a total of 6 in the state (you have to say 8 kinds of then you have to look carefully). As shown in 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 Definition Style

The directory structure is as follows:

Create a Style.xml file in your project, and the content of the file is of course to copy the default style (you can write it yourself later) and make some changes.

Style.xml contents are 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 that reads as follows:

<?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 respectively. As shown in figure:

Name

Icon

Bt_requires_radio_n

Bt_requires_radio_n

4.3 use style.

Add to your XML (Myradiobutton is the name above).

The layout instance used is 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
    style= "@style Myradiobutton "
    android:layout_width=" wrap_content "
    android:layout_height=" 50dip "
    android:layout_ margintop= "10dip"
    android:text= "ABCD"/>
 
  <radiobutton
    style= "@style/myradiobutton"
    Android:layout_width= "Wrap_content"
    android:layout_height= "50dip"
    android:layout_margintop= "10dip"
    android:text= "efgh"/>
 
</RadioGroup>

Effect Chart:

5, the relevant description.

For Style.xml, why add a picture to background and set the button's picture to @null. It really depends on your personal needs:

① If you need the style is the selection after the entire background change then background style can be, and the button's style set to @null, if not set the system is of course the default style.
② If you just want to change the pattern of the loop in the system style, then change the button style.

6, summary.

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

① finds the default component style.
② Copy the style to your project for modification.
③ Apply Styles.

These steps are not just changes to RadioButton, but all components can be changed in the same way.

7, the reader homework.

After reading this article, I'll give you a chance to practice. You can follow the idea of this article to change a check box to try.

PS: Some people think that Google may be a lot faster than their own changes, but when you do not have the network to change this, and you can better understand the default style of components. Besides, Google doesn't necessarily have the right article. If there is no clear place in the article can leave a message, welcome to Exchange.
Android Exchange QQ Group: 196761677.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.