{"id":4783,"date":"2021-01-03T13:36:13","date_gmt":"2021-01-03T03:36:13","guid":{"rendered":"https:\/\/learntodroid.com\/?p=4783"},"modified":"2021-01-03T13:38:18","modified_gmt":"2021-01-03T03:38:18","slug":"how-to-add-a-gradient-background-to-an-android-app","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-add-a-gradient-background-to-an-android-app\/","title":{"rendered":"How to Add a Gradient Background to an Android App"},"content":{"rendered":"\n<p>Adding a gradient as a background color to your an Android app can add extra interest and style and provide a great user experience.<\/p>\n\n\n\n<p>In this post, I will walk you through the steps of how to add a gradient background to your Android app including code samples.<\/p>\n\n\n\n<p>To add a gradient background to your Android app, you need to do the following.<\/p>\n\n\n\n<ol><li>Create a drawable resource with a selector root element<\/li><li>Add an item, shape, and gradient element to the drawable resource<\/li><li>On the gradient element, set the type of gradient to use and provide the start and end colors<\/li><li>Set the background attribute on the layout resource of your fragment or activity to use the drawable resource<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Gradient Background in Android using a Drawable Resource<\/h2>\n\n\n\n<p>In this section of this post, I will go through step by step of how to create a gradient background in Android using a drawable resource.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Drawable Resource with a Selector Root Element<\/h3>\n\n\n\n<p>First, we will create a new drawable resource we will use for defining the gradient.<\/p>\n\n\n\n<p>Switch your project in Android Studio into Project mode and navigate into the \/app\/src\/main\/res\/drawable folder. Right click on the &#8220;drawable&#8221; directory, hover over the &#8220;New&#8221; item and select the &#8220;Drawable Resource File&#8221; item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"478\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Create-New-Drawable-Resource-Android-Studio.png\" alt=\"\" class=\"wp-image-4805\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Create-New-Drawable-Resource-Android-Studio.png 722w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Create-New-Drawable-Resource-Android-Studio-300x199.png 300w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><\/figure>\n\n\n\n<p>Then the &#8220;New Drawable Resource File&#8221; dialog will appear. Provide a file name for the drawable resource file you will use for the gradient background and set the root element to &#8220;selector&#8221;. Then press the &#8220;OK&#8221; button to create the drawable resource file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"157\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/New-Drawable-Resource-Provide-File-Name-and-Set-Root-Element-Selector.png\" alt=\"\" class=\"wp-image-4806\"\/><\/figure>\n\n\n\n<p>For drawable resources in Android, the selector element allows you to define child item elements that are selected based on a particular state. For example, a button could have different child items with different visual characteristics depending on whether the button is currently selected, focused, or pressed.<\/p>\n\n\n\n<p>You should end up with a drawable resource file that contains a single selector element.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/c9d718f760faeca9727cb5e83686bdc2.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Adding an Item, Shape, and Gradient Element to the Drawable Resource<\/h3>\n\n\n\n<p>Next, we will make some minor changes the drawable resource file we created in the previous step for the gradient background.<\/p>\n\n\n\n<p>Within the selector element, we will add a single item element. Each option to be selected from a selector is represented by an item element. We will only create a single item element as we do not need to change the appearance of the gradient based on a particular state.<\/p>\n\n\n\n<p>Within the item element, we will add a shape element. The shape element can be used to define different shapes such as rectangles, lines, ovals and rings. It allows you to customize the appearance of the shape by changing characteristics such as the corners, setting a gradient, adding padding, setting the width and height sizes, setting a solid fill color and changing the outline of the shape using the stroke element.<\/p>\n\n\n\n<p>Within the shape element, we will add a gradient element which we will configure in the next step to define the appearance of the gradient we will use for the background.<\/p>\n\n\n\n<p>See a code sample below of a drawable resource file containing the selector, item, shape and gradient elements.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/316c937da6884c978c08e515d90fe80d.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Configuring the Gradient Element in the Drawable Resource<\/h3>\n\n\n\n<p>In this part of the tutorial, we will add attributes to the gradient element in the drawable resource we created for the gradient background to configure the appearance of the gradient.<\/p>\n\n\n\n<p>This will involve selecting the pattern of gradient we want to use, setting the colors of the gradient, and setting the positioning, direction, and size of the gradient.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Setting the Gradient Pattern<\/h4>\n\n\n\n<p>There are three gradient pattern options to choose from in Android.<\/p>\n\n\n\n<ul><li>Linear<\/li><li>Radial<\/li><li>Sweep<\/li><\/ul>\n\n\n\n<p>The gradient pattern is defined on the gradient element by adding the android:type attribute and setting the value to either &#8220;linear&#8221;, &#8220;radial&#8221; or &#8220;sweep&#8221;.<\/p>\n\n\n\n<p>The linear gradient is the default gradient.<\/p>\n\n\n\n<p>See a sample screenshot of a linear gradient used for a gradient background in Android below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"613\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Linear-Type-Gradient-in-Android.png\" alt=\"\" class=\"wp-image-4820\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Linear-Type-Gradient-in-Android.png 368w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Linear-Type-Gradient-in-Android-180x300.png 180w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><figcaption>android:type is set to &#8220;linear&#8221;<\/figcaption><\/figure><\/div>\n\n\n\n<p>Sample drawable resource code for the linear gradient pattern.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/ddda2a1be3c6554c0a9fdd055d16e532.js\"><\/script><\/p>\n\n\n<p>The radial gradient allows you to define a circular center color of the gradient using the start color attribute. The size of the circle can be defined using the gradient radius attribute.<\/p>\n\n\n\n<p>See a sample screenshot of a radial gradient used for a gradient background in Android below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"614\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Radial-Type-Gradient-in-Android.png\" alt=\"\" class=\"wp-image-4821\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Radial-Type-Gradient-in-Android.png 368w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Radial-Type-Gradient-in-Android-180x300.png 180w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><figcaption>android:type is set to &#8220;radial&#8221;<\/figcaption><\/figure><\/div>\n\n\n\n<p>Sample drawable resource code for the radial gradient pattern.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/0182af0ccab6192a65ab38a673ed1ec4.js\"><\/script><\/p>\n\n\n<p>The sweep gradient offers a sweeping line gradient.<\/p>\n\n\n\n<p>See a sample screenshot of a sweep gradient used for a gradient background in Android below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"608\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Sweep-Type-Gradient-in-Android.png\" alt=\"\" class=\"wp-image-4824\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Sweep-Type-Gradient-in-Android.png 366w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Sweep-Type-Gradient-in-Android-181x300.png 181w\" sizes=\"(max-width: 366px) 100vw, 366px\" \/><figcaption>android:type is set to &#8220;sweep&#8221;<\/figcaption><\/figure><\/div>\n\n\n\n<p>Sample drawable resource code for the sweep gradient pattern.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/2a42678d4b5dc5a160e8c3980f0ec37e.js\"><\/script><\/p>\n\n\n<h4 class=\"wp-block-heading\">Setting the Gradient Colors<\/h4>\n\n\n\n<p>There are up to three colors that can be defined on a gradient.<\/p>\n\n\n\n<ul><li>Start color which is defined using the android:startColor attribute<\/li><li>End color which is defined using the android:endColor attribute<\/li><li>Center color which is defined using the android:centerColor attribute<\/li><\/ul>\n\n\n\n<p>These colors are set as attributes on the gradient element and the value can either be a hexidemical value representing a color e.g. &#8220;#FFFFFF&#8221; for the color white or they can be set using a color resource.<\/p>\n\n\n\n<p>Using a color resource is a good method to use as it allows you to define all the colors you use across your Android app in a single location inside the colors.xml resource file in the \/app\/src\/main\/res\/values directory to simplify any color branding changes you want to make to your Android app in the future.<\/p>\n\n\n\n<p>See a sample colors resource file below containing three colors.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/5efcf9558e2babd758f2c7b8e782d6d6.js\"><\/script><\/p>\n\n\n<p>See a screenshot below of a linear gradient with the start, end and center colors defined.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"610\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Linear-Gradient-Start-Center-End-Colors-Android.png\" alt=\"\" class=\"wp-image-4841\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Linear-Gradient-Start-Center-End-Colors-Android.png 362w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Linear-Gradient-Start-Center-End-Colors-Android-178x300.png 178w\" sizes=\"(max-width: 362px) 100vw, 362px\" \/><\/figure><\/div>\n\n\n\n<p>This linear gradient with start, center and end colors was created using the following code.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/eec309890b461b858413e567fbd2bc4e.js\"><\/script><\/p>\n\n\n<p>It is also worth mentioning there are some great free tools available on the internet that can help you find contrasting colors that are pleasant to look at to use for gradients.<\/p>\n\n\n\n<p>Two tools I like are <a rel=\"noreferrer noopener\" href=\"https:\/\/uigradients.com\" data-type=\"URL\" data-id=\"https:\/\/uigradients.com\" target=\"_blank\">UI Gradients<\/a> and <a rel=\"noreferrer noopener\" href=\"https:\/\/webgradients.com\/\" data-type=\"URL\" data-id=\"https:\/\/webgradients.com\/\" target=\"_blank\">Web Gradients<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/uigradients.com\/#Netflix\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"658\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/UI-Gradients-Screenshot.png\" alt=\"\" class=\"wp-image-4834\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/UI-Gradients-Screenshot.png 930w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/UI-Gradients-Screenshot-300x212.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/UI-Gradients-Screenshot-768x543.png 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/a><figcaption>Screenshot from UI Gradients<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webgradients.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"654\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Web-Gradients-Screenshot.png\" alt=\"\" class=\"wp-image-4835\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Web-Gradients-Screenshot.png 890w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Web-Gradients-Screenshot-300x220.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Web-Gradients-Screenshot-768x564.png 768w\" sizes=\"(max-width: 890px) 100vw, 890px\" \/><\/a><figcaption>Screenshot from Web Gradients<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Setting the Positioning, Direction, and Size of the Gradient<\/h4>\n\n\n\n<p>The center position of the gradient can be changed using the android:centerX and android:centerY attributes. The value of the centerX and centerY attributes is a relative position defined as a Float value ranging from 0 to 1.0.<\/p>\n\n\n\n<p>The angle of the gradient can be set using the android:angle attribute using the Integer value representing the angle in degrees. This value must be a multiple of 45. A value of 0, which is the default value, represents an angle of left to right, a value of 90 represents an angle of bottom to top.<\/p>\n\n\n\n<p>In the case of a radial gradient pattern, the size of the circle in the gradient can be changed using the android:gradientRadius attribute which will accept a Float value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting Background Attribute to use the Drawable Resource<\/h3>\n\n\n\n<p>Now that we have finished creating the gradient in the drawable resource file, we will need to update the layout resource file for our Activity or Fragment to the drawable resource for the background.<\/p>\n\n\n\n<p>In your layout resource file for your Activity or Fragment, locate the root layout whether that is a LinearLayout, RelativeLayout, ConstraintLayout, or something else, and set the android:background attribute on the layout to the drawable resource we created.<\/p>\n\n\n\n<p>See a code sample for setting a drawable resource as a background for a ConstraintLayout for the main activity inside the activity layout resource file.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/f80bce6b7650cf6a8df69d568af838f7.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">Bonus: A Great Tool to Automate the Creation of Gradient Backgrounds in Android<\/h2>\n\n\n\n<p>As I was putting together this tutorial I found a free tool that can speed up this process for generating gradient backgrounds for Android apps.<\/p>\n\n\n\n<p>There is a free to use code generator tool available on the internet called <a rel=\"noreferrer noopener\" href=\"http:\/\/angrytools.com\/gradient\/\" data-type=\"URL\" data-id=\"http:\/\/angrytools.com\/gradient\/\" target=\"_blank\">Angry Tools<\/a> that can be used to generate the code for the drawable resource containing the gradient using the user interface.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/angrytools.com\/gradient\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"659\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Angry-Tools-Android-Gradient-Drawable-Resource-Tool-1024x659.png\" alt=\"\" class=\"wp-image-4848\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Angry-Tools-Android-Gradient-Drawable-Resource-Tool-1024x659.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Angry-Tools-Android-Gradient-Drawable-Resource-Tool-300x193.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Angry-Tools-Android-Gradient-Drawable-Resource-Tool-768x494.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Angry-Tools-Android-Gradient-Drawable-Resource-Tool.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Angry Tools &#8211; Code Generator for Gradient Drawable Resources in Android<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Adding a gradient as a background color to your an Android app can add extra interest and style and provide a great user experience. In this post, I will walk<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[12],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4783"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=4783"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4783\/revisions"}],"predecessor-version":[{"id":4849,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4783\/revisions\/4849"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=4783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=4783"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=4783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}