Course Content

Course Content

Styles in Android

What Are Styles and Themes in Android

Today we will see how we can use Style and Theme within our application, and what is its requirement.

Styles in Android

We use the style in Android for what the interface of an application will look like.
 
Android allows you to define the look and feel, for example, colors and fonts, of Android components in XML resource files. Sometimes a particular style can be for the whole application or it can also be for an activity within the application.

Defining Styles

To define the style, we will use an XML file, which is already created by default in the format of 'style.xml'.

<?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>

Using Styles in Android
 
Once your style is defined, you can use it in your XML Layout file using the style attribute as follows.
 
<?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>

Style Inheritance
 
Android supports style inheritance in a very much similar way as cascading style sheet in web design.

To implement a custom theme create or edit My Android App/res/values/themes.xml and add the following.
 
<resources>
                …
                <style name=”MyCustomTheme” parent=”android:style/Theme”>
                <item name=”android:textColorPrimary”>#ffff0000</item>
                </style>
                …
</resources>

In your AndroidManifest.xml apply the theme to the activities you want to style –

<activity
                android:name=”com.myapp.MyActivity”
                …
                android:theme=”@style/MyCustomTheme”
/>

Your new theme will be applied to your activity, and the text is now bright red.

Themes in Android

A theme is nothing but an Android-style applied to an entire activity or application, rather than an individual view.

Thus, when a style is applied as a theme, every View in the Activity or application will apply each style property that it supports.

For example, you can apply the same Custom Font Style style as a theme for an Activity and then all text inside that activity will have the green monospace font.

When we talk about the whole activity, it becomes a theme and when we talk about a particular text, it becomes a style.

Theme for all the Activities

To set a theme for all the activities of your application.
 
Open the AndroidManifest.xml file and edit the <application> tag to include the android:theme attribute with the style name.
 
For example –   <application android:theme=”@style/CustomFontStyle”>

Default Themes

First, create a theme XML file in ./platform/android/res/values. Do NOT name the file theme.xml.
 
<?xml version=”1.0” encoding=”utf-8”?>
<resources xmls:android=http://schemas.android.com/apk/res/android>
                <style name=”LightDarkBar” parent=”Theme.AppCompat.Light.DarkActionBar”/>
                <style name=”Light” parent=”Theme.AppCompat>Light”/>
                <style name=”Dark” parent=”Theme.AppCompat”/>
</resources>
 
Finally, to use a theme in your application, modify the Android section of your tiapp.xml file to reference the style name you want to use.
 
<android xmls:android=http://schemas.android.com/apk/res/android>
                <manifest>
                                <application android:theme=”@style/LightDarkBar”/>
                                <uses-sdk
                                android:minSdkVersion=”14” android:targetSdkVersion=”21”/>
                </manifest>
</android>

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download LearnVern App

App Preview Image
App QR Code Image
Code Scan or Download the app
Google Play Store
297K+ Downloads
App Download Section Circle 1
4.5 Rating
App Download Section Circle 2
10K+ Reviews
App Download Section Circle 3
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere