{"id":76185,"date":"2020-02-21T10:48:27","date_gmt":"2020-02-21T05:18:27","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=76185"},"modified":"2021-08-25T14:05:28","modified_gmt":"2021-08-25T08:35:28","slug":"android-styles-and-themes","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/","title":{"rendered":"Android Styles and Themes – Personalise the look & feel of the app"},"content":{"rendered":"

In this article, we are going to learn and implement Android Styles and Themes. Android styles and themes are used to change the View and appearances of the application<\/strong><\/em><\/a> according to requirement.<\/p>\n

Android-style is basically a collection of attributes such as fonts size, font color, background color, margin, font type, etc<\/em>. It generally specifies the attributes of a single view or window. Android provides us this facility to change the appearance and feel of the app so we can customize them. We define the styles in a separate XML resource file. Android styles are similar to CSS styles.<\/p>\n

The android theme is a type of style that applies to the entire application and its components. Themes even apply to non-view elements as well. Non-view elements like – notification bar, status bar, and backgrounds<\/em>.<\/p>\n

Both android styles and themes are declared in a style resource file with name styles.xml<\/strong>. You can find them in res > values<\/strong>.<\/p>\n

Android Styles and Themes<\/h2>\n

Let’s first talk about styles in android and later on, we will see what are themes in android.<\/p>\n

What is Android Style?<\/h3>\n

While we define android styles in a separate file, we use that defined style for the views in the XML file that specifies the layout. Style definition needs a new XML in res>values directory of our project with <resources><\/strong> as the root node.<\/p>\n

To create Android Style, follow the following steps:<\/p>\n

Step 1:<\/strong> Open style.xml in your project\u2019s res\/values\/style.xml.<\/p>\n

Step 2:<\/strong> In that, we need to add <style> element with a name that uniquely identifies our style.<\/p>\n

Step 3:<\/strong> Now we would add attributes of style using <item> tag. We also need to add appropriate value to each item element.<\/p>\n

Following is an example to define style in <style> tag using <item> tag.<\/p>\n

<resources>\r\n    <style name=\u201dEditTextStyle\">\r\n      <item name=\"android:layout_width\">fill_parent<\/item>\r\n      <item name=\"android:layout_height\">fill_parent<\/item>\r\n      <item name=\"android:textSize\">40dp<\/item>\r\n      <item name=\"android:textStyle\">bold<\/item>\r\n      <item name=\"android:textSize\">#009999<\/item>\r\n    <\/style>\r\n<\/resources><\/pre>\n
How to Use Android Style?<\/h3>\n
After our Android style is ready, we can use it in our XML file using the Style attribute. To understand how we do it, consider the following:<\/p>\n
<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n   android:layout_width=\"fill_parent\"\r\n   android:layout_height=\"fill_parent\"\r\n   android:orientation=\"vertical\" >\r\n<EditText\r\n    android:id=\"@+id\/txtEdit\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\"\r\n    style=\"@style\/EditTextStyle\"\r\n    android:text=\"Welcome to DataFlair\"\/>\r\n<\/LinearLayout><\/pre>\n
Android Style Inheritance<\/h3>\n
Android provides support for inheriting Android Style similar to CSS<\/a> in web design. This inheritance can be used when we want to use an existing Android style.<\/p>\n
<resources>\r\n   <style name=\"DataFlairTheme\" parent=\"android:style\/Theme\">\r\n   <item name=\"android:textColorPrimary\">#ffff0000<\/item>\r\n   \/\/add required styles\r\n   <\/style>\r\n<\/resources><\/pre>\n
Now in AndroidManifest.xml, we can apply the theme to the activities we want to style. We can also add other styles as per our choice:<\/p>\n
<activity\r\n   android:name=\"com.dataflair.MyActivity\"\r\n   \/\/ add required attributes\r\n   android:theme=\"@style\/DataFlairTheme\"\r\n\u00a0\u00a0\u00a0\/><\/pre>\n
Now, In DataFlair’s android styles and themes article, let’s discuss the themes in android.\u00a0<\/em><\/p>\n
What is Android Theme?<\/h3>\n
We know that a theme is a style that is applied throughout Android Activity<\/strong> <\/em><\/a>or Application. When a style is applied as a theme, the view in the app is applied to all the attributes that support it. For example, if we apply EditTextStyle as a theme for an activity, the same style applies to the text of all the views in that activity.<\/p>\n
To apply a theme in Android, do the following:<\/p>\n
<color name=\"colorIt\">#b0b0ff<\/color>\r\n<style name=\"DataFlairTheme\" parent=\"Theme.AppCompat.Light\">\r\n   <item name=\"android:windowBackground\">@color\/colorIt<\/item>\r\n   <item name=\"android:colorBackground\">@color\/colorIt<\/item>\r\n<\/style><\/pre>\n
We can set the theme either for an activity or for entire application:<\/p>\n
<activity android:theme=\"@android:style\/CustomTheme\"> \/\/ for Activity\r\n<application android:theme=\"@android:style\/CustomTheme\"> \/\/for Application<\/pre>\n
Example of Android Styles<\/h3>\n
Now we\u2019ll implement Android Style and change the colors and use a different font for our Application UI View.<\/p>\n
For this, we\u2019ll follow the following steps and write the following code:<\/p>\n
Step 1:<\/strong> The first step is to create a new project and name it.<\/p>\n
Step 2:<\/strong> Now what you\u2019ll do is, understand and write the code below:<\/p>\n
Open apps\/res\/value\/style.xml<\/strong> file. Here we\u2019ll write and design the style the way we want.<\/p>\n
<resources>\r\n     <style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.DarkActionBar\">\r\n       <item name=\"colorPrimary\">@color\/colorPrimary<\/item>\r\n       <item name=\"colorPrimayDark\">@color\/colorPrimaryDark<\/item>\r\n       <item name=\"colorAccent\">@color\/colorAccent<\/item>\r\n       <item name=\"android:windowBackground\">@color\/colorAccent<\/item>\r\n   <\/style>\r\n   <style name=\"TextviewStyle\" parent=\"@android:style\/Widget.TextView\">\r\n       <item name=\"android:layout_width\">wrap_content<\/item>\r\n       <item name=\"android:layout_height\">wrap_content<\/item>\r\n       <item name=\"android:layout_marginLeft\">0dp<\/item>\r\n       <item name=\"android:layout_marginTop\">10dp<\/item>\r\n       <item name=\"android:textColor\">#86AD33<\/item>\r\n       <item name=\"android:textStyle\">bold<\/item>\r\n       <item name=\"android:textSize\">20dp<\/item>\r\n   <\/style>\r\n   <style name=\"ButtonStyle\" parent=\"@android:style\/Widget.Button\">\r\n       <item name=\"android:layout_width\">wrap_content<\/item>\r\n       <item name=\"android:layout_height\">wrap_content<\/item>\r\n       <item name=\"android:layout_marginLeft\">20dp<\/item>\r\n       <item name=\"android:layout_marginTop\">10dp<\/item>\r\n       <item name=\"android:textColor\">@color\/colorIt<\/item>\r\n       <item name=\"android:textStyle\">bold<\/item>\r\n       <item name=\"android:textSize\">30dp<\/item>\r\n   <\/style>\r\n\r\n   <string name=\"wlcmsg\">Welcome to DataFlair<\/string>\r\n<\/resources><\/pre>\n
Step 3:<\/strong> Now that we have written the styling part, we\u2019ll define the colors in color.xml:<\/p>\n
Open app>res>value>color.xml<\/strong> file.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<resources>\r\n   <color name=\"colorPrimary\">#00cccc<\/color>\r\n   <color name=\"colorPrimaryDark\">#006666<\/color>\r\n   <color name=\"colorIt\">#188596<\/color>\r\n   <color name=\"colorAccent\">#BBF1F1<\/color>\r\n   <color name=\"colorAccent1\">#1397B1<\/color>\r\n<\/resources><\/pre>\n
Step 4:<\/strong> Now, we\u2019ll design the layout using the style in style<\/strong>. Open activity_main.xml file and write the following code:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n   android:layout_width=\"wrap_content\"\r\n   android:layout_height=\"wrap_content\"\r\n   android:layout_marginLeft=\"10dp\"\r\n   android:orientation=\"vertical\">\r\n\r\n   <TextView\r\n       android:id=\"@+id\/TextView1\"\r\n       android:layout_width=\"300dp\"\r\n       android:layout_height=\"50dp\"\r\n       android:layout_marginLeft=\"45dp\"\r\n       android:layout_marginTop=\"100dp\"               android:gravity=\"center\"\r\n       android:fontFamily=\"@font\/abhaya_libre_extrabold\"\r\n       android:text=\"@string\/wlcmsg\"\r\n       android:textColor=\"@color\/colorAccent1\"\r\n       android:textSize=\"25dp\" \/>\r\n\r\n   <TextView\r\n       android:id=\"@+id\/btnShow\"\r\n       style=\"@style\/ButtonStyle\"\r\n       android:layout_marginLeft=\"35dp\"\r\n       android:layout_marginTop=\"200dp\"\r\n       android:fontFamily=\"@font\/abhaya_libre_extrabold\"\r\n       android:gravity=\"center\"\r\n       android:text=\"Android Style of a View\" \/>\r\n<\/LinearLayout><\/pre>\n
Step 5:<\/strong> Now we\u2019ll run the application. You can make customizations the way you want. My application\u2019s View is like the following:\"android<\/a><\/p>\n
Summary<\/h2>\n
With this, we are completing the Android Styles and Themes article. In this, we have seen that android styles and themes that make our application interactive & different from others. We can completely change its appearance and make it user-friendly. We have also seen how to implement it. Now it\u2019s your turn to implement it.<\/p>\n
Do let us know your implementation and how you did it. Also, learn to create your first android app<\/strong><\/em><\/a> with DataFlair.<\/p>\n
If you have any queries in DataFlair’s android styles and themes article, mention them in the comment section.<\/p>\n
Happy Learning\ud83d\ude03
In this article, we are going to learn and implement Android Styles and Themes. Android styles and themes are used to change the View and appearances of the application according to requirement. Android-style is...<\/p>\n","protected":false},"author":5,"featured_media":76211,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18722],"tags":[21947,21944,21949,21945,21950,21946,21948],"class_list":["post-76185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","tag-android-style-inheritance","tag-android-styles-and-themes","tag-example-of-android-styles","tag-how-to-use-android-style","tag-styles-and-themes-in-android","tag-what-is-android-style","tag-what-is-android-theme"],"yoast_head":"\nAndroid Styles and Themes - Personalise the look & feel of the app - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn to use Android styles and themes to change the view & appearances of the application according to your requirement with the help of examples & coding.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Android Styles and Themes - Personalise the look & feel of the app - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn to use Android styles and themes to change the view & appearances of the application according to your requirement with the help of examples & coding.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-21T05:18:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T08:35:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/02\/android-styles-themes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Android Styles and Themes - Personalise the look & feel of the app - DataFlair","description":"Learn to use Android styles and themes to change the view & appearances of the application according to your requirement with the help of examples & coding.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/","og_locale":"en_US","og_type":"article","og_title":"Android Styles and Themes - Personalise the look & feel of the app - DataFlair","og_description":"Learn to use Android styles and themes to change the view & appearances of the application according to your requirement with the help of examples & coding.","og_url":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-02-21T05:18:27+00:00","article_modified_time":"2021-08-25T08:35:28+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/02\/android-styles-themes.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"Android Styles and Themes – Personalise the look & feel of the app","datePublished":"2020-02-21T05:18:27+00:00","dateModified":"2021-08-25T08:35:28+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/"},"wordCount":771,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/02\/android-styles-themes.jpg","keywords":["Android Style Inheritance","Android Styles and Themes","Example of Android Styles","How to Use Android Style?","styles and themes in android","What is Android Style?","What is Android Theme?"],"articleSection":["Android Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/","url":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/","name":"Android Styles and Themes - Personalise the look & feel of the app - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/02\/android-styles-themes.jpg","datePublished":"2020-02-21T05:18:27+00:00","dateModified":"2021-08-25T08:35:28+00:00","description":"Learn to use Android styles and themes to change the view & appearances of the application according to your requirement with the help of examples & coding.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/02\/android-styles-themes.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/02\/android-styles-themes.jpg","width":802,"height":420,"caption":"styles and themes in android"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/android-styles-and-themes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"Android Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/android\/"},{"@type":"ListItem","position":3,"name":"Android Styles and Themes – Personalise the look & feel of the app"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/76185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=76185"}],"version-history":[{"count":7,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/76185\/revisions"}],"predecessor-version":[{"id":76408,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/76185\/revisions\/76408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/76211"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=76185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=76185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=76185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}