
<p>This article is about Android Styles and Themes and how to use them in Android application with the help of simple examples.</p> 
 
 
 
<h3 class="wp-block-heading"><span style="color: #000080;"><strong>Style</strong></span></h3> 
 
 
 
<p class="p1">A <span style="color: #008000;"><strong>style</strong></span> is a collection of attributes that specify the appearance for a single <span style="color: #0000ff;"><strong><span class="s1">View</span></strong></span>. A style can specify attributes such as font color, font size, background color, and much more.</p> 
 
 
 
<h4 class="wp-block-heading"><strong><span style="color: #0000ff;">Create and apply a style</span></strong></h4> 
 
 
 
<p>To create a new style, open your project&#8217;s <span style="color: #0000ff;"><strong>res/values/styles.xml</strong></span> file. For each style you want to create, follow these steps:</p> 
 
 
 
<ol class="wp-block-list"> 
<li>Add a <span style="color: #008000;"><strong><;style>; </strong></span>element with a name that uniquely identifies the style.</li> 
<li>Add an<strong> <span style="color: #008000;"><;item>;</span></strong> element for each style attribute you want to define.</li> 
</ol> 
 
 
 
<p>For example, if you define the following style:</p> 
 
 
 
<pre class="wp-block-preformatted"><;<strong>style name="LargeRedFont"</strong>>; 
 <;<strong>item name="android:textColor"</strong>>;#C80000<;/<strong>item</strong>>; 
 <;<strong>item name="android:textSize"</strong>>;40sp<;/<strong>item</strong>>; 
<;/<strong>style</strong>>; 
</pre> 
 
 
 
<p>You can apply the style with the <span style="color: #0000ff;"><strong><span class="s1">style</span></strong></span> attribute to a view as follows:</p> 
 
 
 
<pre class="wp-block-preformatted"><;<strong>TextView<br /></strong> <strong>android</strong><strong>:layout_width</strong><strong>="match_parent"<br /></strong> <strong>android</strong><strong>:layout_height</strong><strong>="wrap_content"<br /> <span style="color: #0000ff;"> style</span><span style="color: #0000ff;">="@style/LargeRedFont"</span><br /></strong> <strong>android</strong><strong>:text</strong><strong>="TEXTVIEW STYLE"<br /></strong> <strong>android</strong><strong>:gravity</strong><strong>="center"<br /></strong> />;</pre> 
 
 
 
<h5><span style="color: #0000ff;"><strong>OUTPUT:</strong></span></h5> 
<p><img class="alignnone wp-image-2318" src="https://c1ctech.com/wp-content/uploads/2020/12/Screenshot_1608704555-e1608704784965.png" alt="" width="495" height="261" /></p> 
<p> 
 
</p> 
<p><strong style="color: #0000ff; font-size: 1.25em;">Extend and customize a Style</strong></p> 
<p> 
 
</p> 
<p>To extend a style, specify the style you want to extend with the <span style="color: #008000;"><strong>parent</strong></span> attribute in the <span style="color: #0000ff;"><strong><;style>;</strong></span> element. You can then override the inherited style attributes and can add new ones.</p> 
<p> 
 
</p> 
<p><strong>For example:</strong></p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><span style="color: #008000;"><strong><;!--extending the default button style 
and modify its attributes-->;</strong></span> 
<;<strong>style name="CustomButtonStyle" parent="@android:style/Widget.Button"</strong>>; 
 <;<strong>item name="android:gravity"</strong>>;center<;/<strong>item</strong>>; 
 <;<strong>item name="android:textColor"</strong>>;#6200EA<;/<strong>item</strong>>; 
 <;<strong>item name="android:textStyle"</strong>>;bold<;/<strong>item</strong>>;</pre> 
<p> 
 
</p> 
<h5><span style="color: #0000ff;"><strong>Extending own styles</strong></span></h5> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><span style="color: #008000;"><strong><;!--defining own style-->;</strong></span> 
<;<strong>style name="LargeFont"</strong>>; 
 <;<strong>item name="android:textSize"</strong>>;40sp<;/<strong>item</strong>>; 
<;/<strong>style</strong>>;</pre> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><strong><span style="color: #008000;"><;!--extending own style LargeFont using parent attribute-->;</span></strong><br /><;<strong>style </strong><strong>name</strong><strong>="LargeBlueFont" </strong><strong>parent</strong><strong>="@style/LargeFont"</strong>>;<br /> <;<strong>item </strong><strong>name</strong><strong>="android:textColor"</strong>>;#00007f<;/<strong>item</strong>>;<br /><;/<strong>style</strong>>;</pre> 
<p> 
 
</p> 
<p>You can also inherit styles (only own styles) by extending a style&#8217;s name with a dot notation, instead of using the <span style="color: #0000ff;"><strong><span class="s1">parent</span></strong></span> attribute.</p> 
<pre><strong><span style="color: #008000;"><;!--extending own style LargeFont using dot notation-->;</span></strong><br /><;style name="LargeFont.LargeBlueFont">;<br /> <;item name="android:textColor">;#00007f<;/item>;<br /><;/style>;</pre> 
<pre><strong><span style="color: #008000;"><;!--creating style Bold and<br />extending own style LargeBlueFont using dot notation-->;</span></strong><br /><;style name="LargeFont.LargeBlueFont.Bold">;<br /> <;item name="android:textStyle">;bold<;/item>;<br /><;/style>;</pre> 
<pre><span style="color: #008000;"><strong><;!--using the above style LargeBlueFont in xml-->;</strong></span><br /><;TextView<br /> style="@style/LargeFont.LargeBlueFont"/>;<br /><br /><span style="color: #008000;"><strong><;!--using the above style Bold in xml-->;</strong></span><br /><;TextView<br />style="@style/LargeFont.LargeBlueFont.Bold"/>;</pre> 
<p> 
 
</p> 
<p><span style="color: #0000ff;"><strong>Note:</strong></span> To reference a built-in style you must use the <span style="color: #000080;"><strong>parent</strong></span> attribute.</p> 
<p> 
 
</p> 
<h3 class="wp-block-heading"><span style="color: #000080;"><strong>Themes</strong></span></h3> 
<p> 
 
</p> 
<p class="p1">A theme is a collection of attributes that&#8217;s applied to an entire app, activity, or view hierarchy (not just an individual view). Themes can also apply styles to non-view elements, such as the <span style="color: #008000;"><strong>status bar</strong> </span>and <span style="color: #008000;"><strong>window background</strong></span>.</p> 
<p> 
 
</p> 
<h4 class="wp-block-heading"><strong><span style="color: #0000ff;">Create and apply a </span></strong><span style="color: #0000ff;"><strong>Theme</strong></span></h4> 
<p> 
 
</p> 
<p class="p2">You can create a theme the same way you create styles. </p> 
<p> 
 
</p> 
<p>For example, if you define the following theme:</p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><span style="color: #008000;"><strong><;!--creating new theme(AppBaseTheme) by extending built-in theme</strong></span><br /><span style="color: #008000;"><strong><span style="color: #0000ff;"><span style="color: #008000;">Theme.AppCompat.Light.DarkActionBar-->;</span></span></strong></span><br /><;style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">;<br />....<br /><;/style>;</pre> 
<p> 
 
</p> 
<p class="p2">You can apply the theme with the <span style="color: #0000ff;"><strong><span class="s1">android:theme</span></strong></span> attribute to your application, specific activity or to a view in your layout file (beginning with Android 5.0 (API level 21)). </p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><strong><span style="color: #008000;"><;!--set AppBaseTheme for a particular activity 
in AndroidManifest.xml-->;</span></strong> 
<;<strong>manifest </strong>... >; 
<;<strong>application </strong>... >; 
<;<strong>activity android:theme="@style/AppBaseTheme" </strong>... >; 
 <;/<strong>activity</strong>>; 
 <;/<strong>application</strong>>; 
 <;/<strong>manifest</strong>>;</pre> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><span style="color: #008000;"><strong> <;!--set AppBaseTheme for all the activities in android application</strong></span><br /><span style="color: #008000;"><strong> in AndroidManifest.xml-->;</strong></span><br /><;<strong>manifest </strong>... >; 
 <;<strong>application android:theme="@style/AppBase<strong>Theme</strong>" </strong>...>; 
 <;/<strong>application</strong>>; 
 <;/<strong>manifest</strong>>;</pre> 
<p> 
 
</p> 
<h4 class="wp-block-heading"><span style="color: #0000ff;"><strong>Extend and customize a Theme</strong></span></h4> 
<p> 
 
</p> 
<p>To extend a theme, specify the theme you want to extend with the <span style="color: #008000;"><strong>parent</strong></span> attribute in the <span style="color: #0000ff;"><strong><;style>;</strong></span> element. You can then override the inherited attributes and add new ones.</p> 
<p> 
 
</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
<pre class="wp-block-preformatted"><;resources>;<br /> <span style="color: #008000;"><strong><;!-- Base application theme -->;</strong></span><br /> <;style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">;<br /> <;item name="colorPrimary">;@color/colorPrimary<;/item>;<br /> <;item name="colorPrimaryDark">;@color/colorPrimaryDark<;/item>;<br /> <;item name="colorAccent">;@color/colorAccent<;/item>;<br /> <;/style>;<br /><br /> <strong><span style="color: #008000;"><;!-- customised app theme -->;</span></strong><br /> <;style name="AppTheme" parent="@style/AppBaseTheme">;<br /> <strong><span style="color: #008000;"> <;!-- custom properties -->;</span></strong><br /> <;item name="android:buttonStyle">;@style/Widget.Button.Custom<;/item>;<br /> <;item name="android:textViewStyle">;@style/Widget.TextView.Custom<;/item>;<br /> <;/style>;<br /><br /> <strong><span style="color: #008000;"> <;!-- This is the custom button styles for this application -->;</span></strong><br /> <;style name="Widget.Button.Custom" parent="android:Widget.Button">;<br /> <;item name="android:textColor">;#DD2C00<;/item>;<br /> <;/style>;<br /><br /> <strong><span style="color: #008000;"> <;!-- This is the custom textview styles for this application -->;</span></strong><br /> <;style name="Widget.TextView.Custom" parent="android:Widget.TextView">;<br /> <;item name="android:textColor">;#AA00FF<;/item>;<br /> <;/style>;<br /><;/resources>;</pre> 
<p> 
 
</p> 
<p>Now apply the theme<strong> (AppTheme)</strong> with the <span style="color: #008000;"><strong><span class="s1">android:theme</span></strong></span> attribute on the <span style="color: #0000ff;"><strong><span class="s1"><;application>;</span></strong></span> tag in the <span style="color: #0000ff;"><strong><span class="s1">AndroidManifest.xml</span></strong></span> file. </p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><;application<br /> <strong>android:theme="@style/AppTheme"</strong>>;<br /><;/application>;</pre> 
<p> 
 
</p> 
<h5 class="wp-block-heading"><span style="color: #0000ff;"><strong>OUTPUT:</strong></span></h5> 
<p> 
 
</p> 
<p>Now, In entire application, all the buttons and textviews got set with the specific style.</p> 
<p> 
 
</p> 
<figure class="wp-block-image"><img class="wp-image-2322" src="https://c1ctech.com/wp-content/uploads/2020/12/Screenshot_1608721730-e1608721810701-1024x792.png" alt="" width="470" height="364" /></figure> 
<p> 
 
</p> 
<h3 class="wp-block-heading"> </h3> 
<p> 
 
</p> 
<h3 class="wp-block-heading"><span style="color: #000080;"><strong>Multiple Themes in app</strong></span></h3> 
<p> 
 
</p> 
<p>Android allow us to create multiple themes for our application. Let&#8217;s understand how to create and apply multiple themes in app with simple example.</p> 
<p> 
 
</p> 
<p>1 . Create a layout file <span style="color: #0000ff;"><strong>attrs.xml</strong></span> inside <span style="color: #000080;"><strong>res/values</strong></span> and add the below code. Here, we can create custom attributes.</p> 
<p> 
 
</p> 
<p><span style="color: #000080;"><strong>attrs.xml</strong></span></p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>;<br /><;resources>;<br /><span style="color: #008000;"><strong><;!--custom attribute-->;</strong></span><br /> <;attr name="backgroundColor" format="color"/>;<br /><;/resources>;</pre> 
<p> 
 
</p> 
<p>2. Open <span style="color: #0000ff;"><strong>colors.xml</strong></span> inside <span style="color: #000080;"><strong>res/values</strong></span> and add the below code.</p> 
<p> 
 
</p> 
<p><span style="color: #000080;"><strong>colors.xml</strong> </span></p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>;<br /><;resources>;<br /> <;color name="primaryColor_blue">;#2196F3<;/color>;<br /> <;color name="primaryColorDark_blue">;#1976D2<;/color>;<br /> <;color name="primaryAccent_blue">;#E3F2FD<;/color>;<br /><br /> <;color name="primaryColor_red">;#F44336<;/color>;<br /> <;color name="primaryColorDark_red">;#D32F2F<;/color>;<br /> <;color name="primaryAccent_red">;#FFEBEE<;/color>;<br /><br /> <;color name="primaryColor_green">;#64DD17<;/color>;<br /> <;color name="primaryColorDark_green">;#00C853<;/color>;<br /> <;color name="primaryAccent_green">;#AEEA00<;/color>;<br /><;/resources>;</pre> 
<p> 
 
</p> 
<p>3. Open <span style="color: #0000ff;"><strong>style.xml</strong></span> inside <span style="color: #000080;"><strong>res/values</strong></span> and add the below code.</p> 
<p> 
 
</p> 
<p><span style="color: #000080;"><strong>style.xml</strong> </span></p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><;style name="AppTheme.Blue" parent="Theme.AppCompat.Light.DarkActionBar">;<br /> <;item name="colorPrimary">;@color/primaryColor_blue<;/item>;<br /> <;item name="colorPrimaryDark">;@color/primaryColorDark_blue<;/item>;<br /> <;item name="colorAccent">;@color/primaryAccent_blue<;/item>;<br /> <;item name="backgroundColor">;@color/primaryColorDark_blue<;/item>;<br /><;/style>;<br /><br /><;style name="AppTheme.Red" parent="Theme.AppCompat.Light.DarkActionBar">;<br /> <;item name="colorPrimary">;@color/primaryColor_red<;/item>;<br /> <;item name="colorPrimaryDark">;@color/primaryColorDark_red<;/item>;<br /> <;item name="colorAccent">;@color/primaryAccent_red<;/item>;<br /> <;item name="backgroundColor">;@color/primaryColorDark_red<;/item>;<br /><;/style>;<br /><br /><;style name="AppTheme.Green" parent="Theme.AppCompat.Light">;<br /> <;item name="colorPrimary">;@color/primaryColor_green<;/item>;<br /> <;item name="colorPrimaryDark">;@color/primaryColorDark_green<;/item>;<br /> <;item name="colorAccent">;@color/primaryAccent_green<;/item>;<br /> <;item name="backgroundColor">;@color/primaryColorDark_green<;/item>;<br /><;/style>;</pre> 
<p> 
 
</p> 
<p>4. The below layout file consist of three buttons , <span style="color: #008000;"><strong>onClick</strong></span> of which we will apply different themes in our app.</p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>;<br /><;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> <span style="color: #0000ff;"><strong>android:background="?attr/backgroundColor"</strong></span><br /> android:orientation="vertical">;<br /><br /> <;Button<br /> android:id="@+id/blue_theme_btn"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:text="BLUE" />;<br /><br /> <;Button<br /> android:id="@+id/red_theme_btn"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:text="RED" />;<br /><br /> <;Button<br /> android:id="@+id/green_theme_btn"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:text="GREEN" />;<br /><br /><;/LinearLayout>;</pre> 
<p> 
 
</p> 
<p>4. Inside <span style="color: #0000ff;"><strong>MainActivity.java</strong></span>, onClick of each button the application will set with different theme.</p> 
<p> 
 
</p> 
<pre class="wp-block-preformatted">package com.c1ctech.androidstylesandthemes;<br /><br />import android.content.Context;<br />import android.os.Bundle;<br />import android.view.View;<br />import android.widget.Button;<br /><br />import androidx.appcompat.app.AppCompatActivity;<br /><br />public class MainActivity extends AppCompatActivity implements View.OnClickListener {<br /><br /> Button btnBlueTheme, btnRedTheme, btnGreenTheme;<br /><br /> @Override<br /> public void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /><br /> <strong><span style="color: #008000;"> //setTheme() must call before setContentView()</span></strong><br /><strong> setTheme(getSharedPreferences("AppData", Context.MODE_PRIVATE).getInt("theme", R.style.AppTheme_Blue));</strong><br /><br /> setContentView(R.layout.activity_main);<br /><br /> btnBlueTheme = findViewById(R.id.blue_theme_btn);<br /> btnRedTheme = findViewById(R.id.red_theme_btn);<br /> btnGreenTheme = findViewById(R.id.green_theme_btn);<br /> btnGreenTheme.setOnClickListener(this);<br /> btnBlueTheme.setOnClickListener(this);<br /> btnRedTheme.setOnClickListener(this);<br /> }<br /><br /> @Override<br /> public void onClick(View v) {<br /> switch (v.getId()) {<br /> case R.id.blue_theme_btn:<br /> changeTheme(R.style.AppTheme_Blue);<br /> break;<br /> case R.id.red_theme_btn:<br /> changeTheme(R.style.AppTheme_Red);<br /> break;<br /> case R.id.green_theme_btn:<br /> changeTheme(R.style.AppTheme_Green);<br /> break;<br /> }<br /> }<br /><br /> private void changeTheme(int themeId) {<br /> getSharedPreferences("AppData", Context.MODE_PRIVATE).edit().putInt("theme", themeId).apply();<br /> recreate();<br /> }<br />}</pre> 
<p> 
 
</p> 
<h5 class="wp-block-heading"><span style="color: #0000ff;"><strong>OUTPUT:</strong></span></h5> 
<p> 
 
</p> 
<figure class="wp-block-image"><img class="wp-image-2326" src="https://c1ctech.com/wp-content/uploads/2020/12/Screenshot_1608730908.png" alt="" width="331" height="588" /> <img class="alignnone wp-image-2328" src="https://c1ctech.com/wp-content/uploads/2020/12/Screenshot_1608730915.png" alt="" width="330" height="587" /></figure> 
<p> 
 
 
 
 
 
</p> 
<p> ;</p> 
<p></p>