Learn themes and styles in Android programming

A style source determines the format and searches for a UI. A style can be applied to a unique view (from within a pagination file) or a general activity or application (from within a manifest file).

Define styles

A style source is defined in an XML source, from which XML specifies pagination; Is separate. This XML file is under the res / values ​​directory of your project and has <resource> as the root node that is required for the style file. XML filename is optional; But this name must use the .xml extension.

You can define multiple styles for each file using the <style> tag, but each style has its own name that exclusively defines the style. As shown; Android style features are set using the <item> tag:

<? xml version = ”1.0 ″ encoding =” utf-8 ″?>

<resources>

<style name = ”CustomFontStyle”>

<item name = ”android: layout_width”> fill_parent </item>

<item name = ”android: layout_height”> wrap_content </item>

<item name = ”android: capitalize”> characters </item>

<item name = ”android: typeface”> monospace </item>

<item name = ”android: textSize”> 12pt </item>

<item name = ”android: textColor”> # 00FF00 </item> />

</style>

</resources>

The value adopted for <item> can be a keyword string, a hex color, a reference for another type of resource, or other values ​​depending on the style attribute.

Use style source

Once your style is defined; You can like the following; Use it in your XML paging file using the style attribute:

<? xml version = ”1.0 ″ encoding =” utf-8 ″?>

<LinearLayout xmlns: android = ”http://schemas.android.com/apk/res/android”

android: layout_width = ”fill_parent”

android: layout_height = ”fill_parent”

android: orientation = ”vertical”>

<TextView

android: id = ”@ + id / text_id”

style = ”@ style / CustomFontStyle”

android: text = ”@ string / hello_world” />

</LinearLayout>

Inheritance style

Android in the same way as in CSS web design; Supports inheritance of styles. You can use this to inherit the features of an existing style and then define only the features you want to change or add.

To implement a custom theme, you must create or edit MyAndroidApp / res / values ​​/ themes.xml and add coding because.

<resources>

<style name = ”MyCustomTheme” parent = ”android: style / Theme”>

<item name = ”android: textColorPrimary”> # ffff0000 </item>

</style>

</resources>

In your AndroidManifest.xml; Give the theme to the activities you want to style; apply:

<activity

android: name = ”com.myapp.MyActivity”

android: theme = ”@ style / MyCustomTheme”

/>

Your new theme is now applied to the activity you want and the text of the posts will glow red.

C: \ Users \ mohammad \ Downloads \ them1.jpg

Apply colors to theme features

You can then apply your color source to some theme features, such as window backgrounds and basic text colors; To do this, you need to add <item> elements to your custom theme. These features are defined in your styles.xml file; For example, to add a custom color to a window background, use the two <item> elements defined in the MyAndroidApp / res / values ​​/ styles / xml file; Add to your custom theme.

<resources>

<style name = ”MyCustomTheme”…>

<item name = ”android: windowBackground”> @ color / my_custom_color </item>

<item name = ”android: colorBackgroundCacheHint”> @ color / my_custom_color </item>

</style>

</resources>

C: \ Users \ mohammad \ Downloads \ them2.jpg

Use an image  With buttons

A 9-piece drawable image is a type of image whose length and width can be scaled; While maintaining its visual integrity. 9 pieces are the most common way to determine the appearance of Android buttons; However, other drawable images can also be used.

C: \ Users \ mohammad \ Downloads \ them3.jpg

An example of a 9-piece button

Steps to create 9-piece buttons

  • Save this bitmap as /res/drawable/my_nine_patch.9.png
  • Define a new style
  • Apply a new button style to the ButtonStyle feature of your own custom theme

Define a new style

<resources>

<style name = ”MyCustomButton” parent = ”android: Widget.Button”>

<item name = ”android: background”> @ drawable / my_nine_patch </item>

</style>

</resources>

Apply the theme

<resources>

<style name = ”MyCustomTheme” parent =…>

<item name = ”android: buttonStyle”> @ style / MyCustomButton </item>

</style>

</resources>

C: \ Users \ mohammad \ Downloads \ them4.jpg

Android themes

We hope you understand the concept of style; So now we want to address what is the theme? A theme is nothing but an Android style instead of a unique view; Applies to a general activity or an application.

Thus; When a style is applied as a theme; Any View in Activity or Application; All the style features it supports; Will apply. For example, you can apply the same CustomFontStyle style as a theme to an Activity, and then all the text inside that Activity will have a green monospace font.

To set a theme for all of your app activities, open the AndroidManifest.xml file and edit the <application> tag to include the android: theme attribute along with the style name. for example:

<application android: theme = ”@ style / CustomFontStyle”>

But if you want a theme to apply to only one of the Activities in your app; You should only add the android: theme feature to the <activity> tag; for example:

<activity android: theme = ”@ style / CustomFontStyle”>

There are a number of default themes defined by Android that you can use either directly or using the parent attribute such as the following; Inherit that theme:

<style name = ”CustomTheme” parent = ”android: Theme.Light”>

</style>

Color palette style

The pagination design can be based on those basic colors; Applicable. For example, the following design is based on one of those colors (blue).

Theme

The above pagination is based on the style.xml file; Which is located in res / values.

<resource>

<style name = ”AppTheme” parent = ”android: Theme.Material”>

<item name = ”android: color / primary”> @ color / primary </item>

<item name = ”android: color / primaryDark”> @ color / primary_dark </item>

<item name = ”android: colorAccent / primary”> @ color / accent </item>

</style>

<resource>

Default styles and themes

Android platform; It has created a large collection of styles and themes that you can use in your own applications. You can find a reference to all the styles available in the R.style class. To use the styles listed here, you can replace all the underlines with one course. for example; You can apply Theme_NoTitleBar theme with “@ android.style / theme.NoTitleBar”. You can see the following source code for Android themes and styles:

Leave a Reply

Your email address will not be published. Required fields are marked *