This article is about Android Styles and Themes and how to use them in Android application with the help of simple examples.
Style
A style is a collection of attributes that specify the appearance for a single View. A style can specify attributes such as font color, font size, background color, and much more.
Create and apply a style
To create a new style, open your project’s res/values/styles.xml file. For each style you want to create, follow these steps:
- Add a <style> element with a name that uniquely identifies the style.
- Add an <item> element for each style attribute you want to define.
For example, if you define the following style:
<style name="LargeRedFont">
<item name="android:textColor">#C80000</item>
<item name="android:textSize">40sp</item>
</style>
You can apply the style with the style attribute to a view as follows:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/LargeRedFont"
android:text="TEXTVIEW STYLE"
android:gravity="center"
/>
OUTPUT:
Extend and customize a Style
To extend a style, specify the style you want to extend with the parent attribute in the <style> element. You can then override the inherited style attributes and can add new ones.
For example:
<!--extending the default button style
and modify its attributes-->
<style name="CustomButtonStyle" parent="@android:style/Widget.Button">
<item name="android:gravity">center</item>
<item name="android:textColor">#6200EA</item>
<item name="android:textStyle">bold</item>
Extending own styles
<!--defining own style-->
<style name="LargeFont">
<item name="android:textSize">40sp</item>
</style>
<!--extending own style LargeFont using parent attribute-->
<style name="LargeBlueFont" parent="@style/LargeFont">
<item name="android:textColor">#00007f</item>
</style>
You can also inherit styles (only own styles) by extending a style’s name with a dot notation, instead of using the parent attribute.
<!--extending own style LargeFont using dot notation-->
<style name="LargeFont.LargeBlueFont">
<item name="android:textColor">#00007f</item>
</style>
<!--creating style Bold and
extending own style LargeBlueFont using dot notation-->
<style name="LargeFont.LargeBlueFont.Bold">
<item name="android:textStyle">bold</item>
</style>
<!--using the above style LargeBlueFont in xml-->
<TextView
style="@style/LargeFont.LargeBlueFont"/>
<!--using the above style Bold in xml-->
<TextView
style="@style/LargeFont.LargeBlueFont.Bold"/>
Note: To reference a built-in style you must use the parent attribute.
Themes
A theme is a collection of attributes that’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 status bar and window background.
Create and apply a Theme
You can create a theme the same way you create styles.
For example, if you define the following theme:
<!--creating new theme(AppBaseTheme) by extending built-in theme
Theme.AppCompat.Light.DarkActionBar-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
....
</style>
You can apply the theme with the android:theme attribute to your application, specific activity or to a view in your layout file (beginning with Android 5.0 (API level 21)).
<!--set AppBaseTheme for a particular activity
in AndroidManifest.xml-->
<manifest ... >
<application ... >
<activity android:theme="@style/AppBaseTheme" ... >
</activity>
</application>
</manifest>
<!--set AppBaseTheme for all the activities in android application
in AndroidManifest.xml-->
<manifest ... > <application android:theme="@style/AppBaseTheme" ...> </application> </manifest>
Extend and customize a Theme
To extend a theme, specify the theme you want to extend with the parent attribute in the <style> element. You can then override the inherited attributes and add new ones.
<resources>
<!-- Base application theme -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<!-- customised app theme -->
<style name="AppTheme" parent="@style/AppBaseTheme">
<!-- custom properties -->
<item name="android:buttonStyle">@style/Widget.Button.Custom</item>
<item name="android:textViewStyle">@style/Widget.TextView.Custom</item>
</style>
<!-- This is the custom button styles for this application -->
<style name="Widget.Button.Custom" parent="android:Widget.Button">
<item name="android:textColor">#DD2C00</item>
</style>
<!-- This is the custom textview styles for this application -->
<style name="Widget.TextView.Custom" parent="android:Widget.TextView">
<item name="android:textColor">#AA00FF</item>
</style>
</resources>
Now apply the theme (AppTheme) with the android:theme attribute on the <application> tag in the AndroidManifest.xml file.
<application
android:theme="@style/AppTheme">
</application>
OUTPUT:
Now, In entire application, all the buttons and textviews got set with the specific style.
Multiple Themes in app
Android allow us to create multiple themes for our application. Let’s understand how to create and apply multiple themes in app with simple example.
1 . Create a layout file attrs.xml inside res/values and add the below code. Here, we can create custom attributes.
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--custom attribute-->
<attr name="backgroundColor" format="color"/>
</resources>
2. Open colors.xml inside res/values and add the below code.
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primaryColor_blue">#2196F3</color>
<color name="primaryColorDark_blue">#1976D2</color>
<color name="primaryAccent_blue">#E3F2FD</color>
<color name="primaryColor_red">#F44336</color>
<color name="primaryColorDark_red">#D32F2F</color>
<color name="primaryAccent_red">#FFEBEE</color>
<color name="primaryColor_green">#64DD17</color>
<color name="primaryColorDark_green">#00C853</color>
<color name="primaryAccent_green">#AEEA00</color>
</resources>
3. Open style.xml inside res/values and add the below code.
style.xml
<style name="AppTheme.Blue" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/primaryColor_blue</item>
<item name="colorPrimaryDark">@color/primaryColorDark_blue</item>
<item name="colorAccent">@color/primaryAccent_blue</item>
<item name="backgroundColor">@color/primaryColorDark_blue</item>
</style>
<style name="AppTheme.Red" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/primaryColor_red</item>
<item name="colorPrimaryDark">@color/primaryColorDark_red</item>
<item name="colorAccent">@color/primaryAccent_red</item>
<item name="backgroundColor">@color/primaryColorDark_red</item>
</style>
<style name="AppTheme.Green" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/primaryColor_green</item>
<item name="colorPrimaryDark">@color/primaryColorDark_green</item>
<item name="colorAccent">@color/primaryAccent_green</item>
<item name="backgroundColor">@color/primaryColorDark_green</item>
</style>
4. The below layout file consist of three buttons , onClick of which we will apply different themes in our app.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/backgroundColor"
android:orientation="vertical">
<Button
android:id="@+id/blue_theme_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BLUE" />
<Button
android:id="@+id/red_theme_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RED" />
<Button
android:id="@+id/green_theme_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="GREEN" />
</LinearLayout>
4. Inside MainActivity.java, onClick of each button the application will set with different theme.
package com.c1ctech.androidstylesandthemes;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Button btnBlueTheme, btnRedTheme, btnGreenTheme;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setTheme() must call before setContentView()
setTheme(getSharedPreferences("AppData", Context.MODE_PRIVATE).getInt("theme", R.style.AppTheme_Blue));
setContentView(R.layout.activity_main);
btnBlueTheme = findViewById(R.id.blue_theme_btn);
btnRedTheme = findViewById(R.id.red_theme_btn);
btnGreenTheme = findViewById(R.id.green_theme_btn);
btnGreenTheme.setOnClickListener(this);
btnBlueTheme.setOnClickListener(this);
btnRedTheme.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.blue_theme_btn:
changeTheme(R.style.AppTheme_Blue);
break;
case R.id.red_theme_btn:
changeTheme(R.style.AppTheme_Red);
break;
case R.id.green_theme_btn:
changeTheme(R.style.AppTheme_Green);
break;
}
}
private void changeTheme(int themeId) {
getSharedPreferences("AppData", Context.MODE_PRIVATE).edit().putInt("theme", themeId).apply();
recreate();
}
}
OUTPUT:
Greate Work bro