Home > DeveloperSection > Articles > Style and Theme in Android

Style and Theme in Android


Android Android  Style  Android Styles 
Ratings:
0 Comment(s)
 898  View(s)
Rate this:

Style and Theme in Android


Android allow you to define the look and feel, for example colors and fonts, of Android components in XML resource files. This way you have to set common style attributes only once in one central place.

A style is a properties of view in android which specify the format of view.

A style is a set of one or more formatting attributes that you can apply as a unit to single elements in your layout XML file(s). For example, you could define a style that specifies a certain text size and color, then apply it to instances of a certain type of View element.

A theme is a set of one or more formatting attributes that you can apply as a unit to all activities in an application or just a single activity. For example, you could define a theme that sets specific colors for the window frame and the panel foreground and background, and sets text sizes and colors for menus, then apply it to the activities of your application.

You can add your custom style and theme in res/style.xml file

Here I am creating sample application with custom styles and themes.

1.      Create an Android application

2.      Go to the res\values\styles.xml

3.      Add style. i.e.

Add style for button

<style name="btnStyle">

        <item name="android:layout_marginTop">30sp</item>

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

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

        <item name="android:shadowDx">1.2</item>

        <item name="android:shadowDy">1.2</item>

        <item name="android:shadowRadius">2</item>

        <item name="android:textColor">@android:color/holo_red_light </item>

        <item name="android:shadowColor">#000000</item>

    </style>

 

Add style for TextView

<style name="textviewStyle">

        <item name="android:textColor">#477519</item>

        <item name="android:background">#D17519</item>

        <item name="android:textSize">22sp</item>

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

        <item name="android:gravity">center</item>

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

        <item name="android:padding">5sp</item>

    </style>

                                 

Add style for Spinner

<style name="SpinnerStyle" parent="@android:style/Widget.Spinner.               DropDown">

        <item name="android:gravity">center</item>

        <item name="android:layout_marginTop">20sp</item>

        <item name="android:textColor">#477519</item>

    </style>

 

Add style for Edittext

<style name="EditTextStyle">

<item name="android:layout_marginTop">20sp</item>

 <item name="android:textColor">@android:color/holo_red_light</item>

 <item name="android:hint">Enter Your Name</item>

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

 </style>

 

Add style in view

<TextView

        style="@style/textviewStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content">

 

4.      My activity_main.xml

 

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

 

    <TextView

        style="@style/textviewStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/android" />

 

    <Spinner

        android:id="@+id/spinner"

        style="@style/SpinnerStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:prompt="@string/prompt" />

 

    <EditText

        style="@style/EditTextStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

 

    <Button

        style="@style/btnStyle"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

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

 

</LinearLayout>

 

Run your application

 

 

For apply all view

 

<style name="myTheme" parent="AppBaseTheme">

         <!-- All customizations that are NOT specific to a particular API-level can go here. -->

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

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

        <item name="android:shadowDx">1.2</item>

        <item name="android:shadowDy">1.2</item>

        <item name="android:shadowRadius">2</item>

        <item name="android:textColor">@android:color/holo_red_light</ item>

        <item name="android:shadowColor">#000000</item>

    </style>

 

And change theme from AndroidManifest.xml file

 

<application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/myTheme" >

 

Run your application

 


Don't want to miss updates? Please click the below button!

Follow MindStick