Android Introduction tutorial creation style and theme _android

First, the preface

As an Android developer, we typically focus on the app's functionality. But the function is not enough, the interface and function as important. There are two ways to change the look of the app. The first is a property that is directly modified directly in XML View . This approach is only suitable for View a few Activity simple apps. The second approach is to create custom styles and themes. If you are familiar with web development, the first approach is similar to using inline CSS styles, while the second is similar to using style sheets.

In this article we will describe how to create custom styles and themes.

Second, create styles

The style is obviously applied to the UI control. So let's first create a new empty activity and add two view to the layout file.

<view android:layout_width= "100DP"
 android:layout_height= "100DP"
 android:layout_margin= "5DP"
 Android:background= "#009688"
 android:id= "@+id/box1"/>
 
<view android:layout_width= "100DP"
 android:layout_height= "100DP"
 android:background= "#00BCD4"
 android:layout_margin= "5DP"
 android: Id= "@+id/box2"/>

As you can see, the attributes layout_width and layout_margin are explicitly defined in each View .

To View create a new style for this, right-click it and select it Refactor > Extract > Style .

Now you'll see a dialog box where you can set a name for the style, and you can choose which attributes to include. We name Mybox, and select background all attributes except for.

When you click OK, you will see that the first View code has changed.

<view android:background= "#009688"
 android:id= "@+id/box1" style= "
 @style/mybox"/>

This View now has a style attribute that points to mybox. You can open res/values/styles.xml it to see the definition of this style.

<style name= "Mybox" >
 <item name= "android:layout_width" >100dp</item>
 <item name= " Android:layout_height ">100dp</item>
 <item name=" Android:layout_margin ">5dp</item>
</style>

Once a style is defined, you can apply it to anything View . For example, apply Mybox to the second View :

<view android:background= "#00BCD4"
 android:id= "@+id/box2" style= "
 @style/mybox"/>

After you apply a style, activity two of them View look like this:

Iii. Inheritance of Styles

Android allows you to create a new style based on other styles. In other words, you are allowed to inherit style.

Inheriting a style has two different syntaxes. The first syntax is called implicit syntax and is marked with a. Number. For example, if you want to create two parent Mybox, named Teal and cyan:

<style name= "Mybox.teal" >
 <item name= "Android:background" > #009688 </item>
</style >
 
<style name= "Mybox.cyan" >
 <item name= "Android:background" > #00BCD4 </item>
</style>

You might guess that mybox.teal and Mybox.cyan have all the attributes of Mybox, and they have android:background attributes.

The second syntax is often called an explicit syntax. It uses a parent property whose value is parent style the name. Here is a code fragment that defines the style named Tealbox:

<style name= "Tealbox" parent= "Mybox" >
 <item name= "Android:background" > #009688 </item>
</style>

Apply a derivation style to the application of an ordinary no difference.

<view android:id= "@+id/box1"
 style= "@style/tealbox"/> <view android:id= "@+id/box2" style= "
 @ Style/mybox.cyan "/>

Most developers use implicit syntax when inheriting their own style, while inheriting the system style using explicit syntax.

Four, create themes

So far, we've just style applied it to the activity View . Android also allows you style to apply to the activity entire and application. When a style is applied to activity or application in, it becomes a theme (subject).

By default, all apps created with the latest version of Android studio use a theme called Apptheme. AppThemeis a AppCompat subclass of a very large and extensive theme that affects the appearance of almost every common view.

The definition you can find in Styles.xml AppTheme :

<!--Base Application theme. -->
<style name= "Apptheme" parent= "Theme.AppCompat.Light.DarkActionBar" >
 <item name= " Colorprimary "> @color/colorprimary</item>
 <item name=" Colorprimarydark "> @color colorprimarydark</item>
 <item name= "coloraccent" > @color/coloraccent</item>
</style >

AppThemeFollow material design. Therefore, in order to create a theme that conforms to the material design spec, using AppTheme it as a parent good topic. Otherwise, you can use it directly Theme.AppCompat as well parent .

Although you can write XML code to create a theme-remember, they're just styles-but in this tutorial, I'll show you how to do these complex tasks using the Android Studio theme editor.

To open the theme editor, open the Tools menu selection Android > Theme Editor .

On the right side of the Theme editor window, you have not only a control to modify the theme, but also a control to create a new theme. The left shows the modified preview of the theme.

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 topic to MyTheme and click OK.

At this point, Styles.xml will have a new line of code:

<style name= "MyTheme" parent= "Apptheme"/>

Let's use the theme editor to modify the MyTheme. To make things simple, this tutorial only modifies, and colorPrimary the colorPrimaryDark colorAccent value of the property.

To modify colorPrimary the value, 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, and if you forget, the theme editor will cover the color of Apptheme.

The modified colorPrimaryDark and colorAccent the values are the same steps. The theme editor will automatically be based on the recommendations you choose for the colorPrimary appropriate bothcolorPrimaryDark and colorAccent .

Now MyTheme's definition looks like this:

<style name= "MyTheme" parent= "Apptheme" >
 <item name= "colorprimary" > @color/colorprimarymytheme< /item>
 <item name= "Colorprimarydark" > @color/colorprimarydarkmytheme</item>
 <item "Coloraccent" > @color/coloraccentmytheme</item>
</style>

V. Application of Themes

Before applying the theme we created, let's add a few common controls to the activity . This makes it easier to see the effects of the theme.

The following code creates an ordinary button, a button with a borderless frame, a color button, a checkbox, a radiobutton, a switch, a seekbar, A TextView and a edittext:

<button android:layout_width= "match_parent" android:layout_height= "wrap_content" android:text= "normal" Android:
 Id= "@+id/normal_button"/> <button android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:text= "Borderless" android:id= "@+id/borderless_button" style= "@style/widget.appcompat.button.borderless"
 > <button android:layout_width= "match_parent" android:layout_height= "wrap_content" android:text= "colored" Android:id= "@+id/colored_button" style= "@style/widget.appcompat.button.colored"/> <checkbox android:layout_ Width= "Match_parent" android:layout_height= "wrap_content" android:text= "New CheckBox" android:id= "@+id/checkBox"/ > <radiobutton android:layout_width= "match_parent" android:layout_height= "Wrap_content" New RadioButton "android:id=" @+id/radiobutton "/> <switch android:layout_width=" Match_parent "Android:layout_ height= "Wrap_content" android:text= "New Switch" android:id= "@+id/Switchbutton "/> <seekbar android:layout_width= match_parent" android:layout_height= "Wrap_content" Android:id = "@+id/seekbar"/> <textview android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android : text= "New text" android:id= "@+id/textview"/> <edittext android:layout_width= "Match_parent" Android:layout_ height= "Wrap_content" android:id= "@+id/edittext" android:hint= "Input"/>

When these are added View , the layout looks like this:

If you've ever read material spec. I'm sure you can see that at this time activity for colorPrimary and colorPrimaryDark using the Indigo color. and colorAccent the use of pink. These are the default colors for Android studio. You can res/values/colors.xml find their values in the project hex .

To activity use this topic in, open the project's manifest file, add the attribute to the definition, activity android:theme and set the value to @style/MyTheme .

<activity android:name= ". Mainactivity "
 android:theme=" @style/mytheme ">
 <intent-filter>
  <action android:name=" Android.intent.action.MAIN "/>
  <category android:name=" Android.intent.category.LAUNCHER "/>"
 </intent-filter>
</activity>

Also, you can application android:theme apply the theme to the entire app by setting the properties.

If you look at your now activity , it should be a lot different.

Vi. 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. Most users are now accustomed to Material design, and deviating from the rules too far will interfere with them. The above is the entire content of this article, I hope for everyone's study and work can bring certain help, if there are questions can be exchanged message.