Gradient Drawable in Android — Create Gradient Backgrounds
LAST UPDATED: AUGUST 10, 2021
We have seen the Gradient colors on many websites as backgrounds, used in App logos, like in the Instagram logo shown below, App background, buttons, progress bars, etc. A gradient makes the UI of any app, be it Mobile App or a website, more beautiful and vibrant. Many developers are using gradient in their apps and websites to make it look more attractive. So in this tutorial, we will learn how to set a gradient background for our Android App activity.
What is Gradient?
According to Wikipedia:
In computer graphics, a color gradient specifies a range of position-dependent colors, usually used to fill a region. For example, many window managers allow the screen background to be specified as a gradient. The colors produced by a gradient vary continuously with the position, producing smooth color transitions.
A color gradient is also known as a color ramp or a color progression. In assigning colors to a set of values, a gradient is a continuous colormap, a type of color scheme.
So let’s add a simple gradient to our Android App.
Step 1: Create a new Project
Open Your Android Studio Click on «Start a new Android Studio project» (Learn how to setup Android Studio and create your first Android project)
Choose «Empty Activity» from the project template window and click Next
Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial), and minimum SDK(we are using API 19: Android 4.4 (KitKat))
Next click on the Finish button after filling the above details
Now, wait for the project to finish the build.
Step 2: Creating Gradient Color
To create a gradient color we need to create a .xml file in the drawable folder. So go to app -> res -> drawable and right-click on drawable -> New -> Drawable Resource File and create gradient_drawable.xml file.
The code of gradient_drawable.xml file is shown below:
As you can see in the code above, we are using the gradient tag along with providing android:startColor , android:centerColor and android:endColor attributes to define the color that will be used in the gradient. So let’s learn about the attributes available in the gradient drawable.
XML attributes of Gradient Drawable
Following are the attributes of the drawable:
Attributes
Description
android:startColor
Start color of the gradient.
The value of color may be in any one of «#rgb», «#argb», «#rrggbb», «#aarrggbb» forms
End color of the gradient
The value of color may be in any one of «#rgb», «#argb», «#rrggbb», «#aarrggbb» forms
The Center color of the gradient. It may be optional but you can use it if you want
The value of color may be in any one of «#rgb», «#argb», «#rrggbb», «#aarrggbb» forms
X position of the center point of the gradient within the shape as a fraction of the width
0.5 is the default value
Y-position of the center point of the gradient within the shape as a fraction of the height
0.5 is the default value
The angle of the gradient and it is only used with the linear gradient
It must be multiple of 45 in the range [0, 315]
It is used to set the type of gradient and the default value is linear . and it is of 3 types
It is used to set the radius of the gradient. It is only used with the radial gradient.
Step 3: Modify activity_main.xml
Now open the activity_main.xml file and remove the default code and change the layout to RelativeLayout and set it’s background to gradient background as shown below:
with this our activity_main.xml is done and the complete code will look like:
And the output of the above is shown below:
We can also add the gradient to different Views and layouts in our Android App. Let’s cover a few other Android App components in which we can use gradient backgrounds.
Gradient background with Button:
Here we will use the gradient background for button:
Output of the above code is:
Gradient background with TextView:
Here we will use the gradient background for TextView:
The output of the above code is:
Gradient background with ImageView:
Here we will use the gradient background for ImageView:
The output of the above code is:
Gradient background with SeekBar:
Here we will use the gradient background for SeekBar:
The output of the above code is:
Conclusion:
In just 3 simple steps we have integrated and shown you the basic example for creating a Gradient Drawable in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.
Источник
How to Create Rounded Corners for a Button in Android
Making buttons in your Android app look nice is an important part of the user experience. As you design and build your app you are likely to eventually want to create rounded corners for your buttons.
Android offers a default button that is not always intuitive to style the way you want, in many cases you will even need to use drawables to get the look and feel you are after.
To create a rounded corners for a button in Android you will need to:
Create a Drawable for your Button
Add a Rectangle Shape to your Drawable
Set the Background Color in your Drawable
Set the Radius of the Corners in your Drawable
Apply the Drawable to your Button
Add a Button to your Activity / Fragment Layout and Apply the Drawable to the Button
In this post I have included code samples for creating a button with rounded corners in Android which you can make use of in your Android app.
In addition to this I have included sections in this post about styling rounded buttons in different ways such as:
Applying a solid background color to a rounded button
Applying a gradient background color to a rounded button
Applying a shadow to a rounded button
Creating a circular button
Creating a Button with Rounded Corners in Android
In this section of the post I will show you how to create a button with rounded corners in Android that looks like the image below.
First you will need to create a new drawable resource inside the “res/drawable” directory.
To create a drawable in Android Studio, expand the “res/drawable” directory and right click on the “drawable” folder. Hover over the “New” menu and select the “Drawable resource file” menu item.
Enter a file name for the new drawable and select the “OK” button. This will create the drawable resource file.
For this button we will be applying a solid background color to it. There is a resource file for centralizing of all the colors in your Android app located in the “res/values” directory called colors.xml, where you can add the background color of the button.
Colors are defined using a hexadecimal value, if you are interested in a useful free tool to help you locate the hexadecimal value for a color check out htmlcolorcodes.com in your web browser.
Edit the colors.xml file in Android Studio and add a new color to be used for the rounded button’s background color. See the code snippet below showing how colors are defined inside the colors.xml file.
Now we have everything we need to create the drawable resource for the button with rounded corners. Open up the drawable resource you have previously creating in Android Studio.
Replace the code inside your drawable resource with the code snippet below. Make sure the “android:color” attribute references the correct name of the color that you created in your colors.xml file.
Inside the drawable resource you will have a shape element, Android supports 4 different types of shape drawables rectangle, oval, line and ring. We will use the rectangle shape drawable for our button with rounded corners by setting the “android:shape” attribute to “rectangle” on the shape element.
Inside the shape element, we will add two elements, a solid element and a corners element.
The solid element is used for setting the background color of the button to be filled with a single solid color. Use the “android:color” attribute on the solid element to set the fill color of the shape to the button color we previously added to the colors.xml file.
The corners element is used to apply a specific radius to the corners of the rectangle shape to create round corners. The radius for the corners are defined in display pixels (dp).
You can apply the radius to individual corners one at a time using the “android:topLeftRadius”, “android:topRightRadius”, “android:bottomLeftRadius”, “android:bottomRightRadius” attributes. Alternatively you can apply the same radius to all corners of the rectangle using the “android:radius” attribute.
If you want to learn more about shape drawables there is a useful developer guide available on developer.android.com that covers different drawable resources including shape drawables.
This will conclude the creation of the drawable, the next and final step is to add the Button to your Activity or Fragment. Open your Activity or Fragment layout resource in Android Studio.
Then you can add a Button to the layout of your Activity or Fragment. When adding your Button use the “android:background” attribute to apply your drawable to the Button. Also use the “android:padding” attribute to give a margin between the text inside your Button and the borders of the Button to give it a better look and feel.
Adding a Gradient Background to a Button with Rounded Corners
In this section of the post I will show you how to apply a gradient button to a button with rounded corners in Android that looks like the image below.
We will be following the same steps from the section above for parts of this tutorial to create the button with rounded corners so make sure you have read the section above first.
First you will need to create a new drawable resource inside the “res/drawable” directory and give the drawable file a name of “round_gradient_button”.
Next we will need to add two colors to the colors.xml resource file located inside the “res/values” directory. These two colors will represent the start and end colors that we will be used for the gradient background.
A great online resource I used to come up with colors to use in the gradient is gradientbuttons.colorion.co. The tool has a great list of colors shown together in a gradient background that you can scroll through if you are having troubles coming up with colors that look nice together.
If you find colors you like, select the “Get CSS Code” button and copy the hexadecimal codes of the colors and use them in your colors.xml file
Once you have added two colors to your colors.xml resource file next you will need to modify the round_gradient_button drawable that you previously created.
Replace the code inside your drawable resource with the code snippet below. Make sure the “android:startColor” and “android:endColor” attributes reference the correct name of the colors that you created in your colors.xml file.
The drawable resource is very similar to what we created in the previous section above, it uses a rectangle shape with a corners element with the radius attribute to define the rounded corners.
The main difference is the use of the gradient element rather than the solid element. The gradient element is used, as it’s name suggests, for defining the fill of the drawable as a gradient of colors rather than a single solid fill color.
In the code snippet I have set the “android:angle” attribute to 0, this means that the gradient will move from left to right. If you want the gradient to move from the bottom to top you need to set the angle to 90. The value of the angle must be a multiple of 45. I have included the image below that shows different angles for the gradient.
Also in the code snippet I have set the “android:startColor” and “android:endColor” attributes to the colors I created in the previous step of this section.
I have not included the following in the code snippet but you can also make use of the following attributes to control how the gradient is displayed.
“android:centerX” and “android:centerY” which take floating point values between 0 and 1.0 to control the relative center position of the gradient
“android:centerColor” which refers to a color that is shown between the start and end colors
“android:gradientRadius” which references the radius shown in the gradient which is only applicable if the gradient type is set to radial
“android:useLevel” which is to be set to true if the gradient is used as a level list drawable
“android:type” is the pattern used for the gradient, options include “linear” which is the default, “radial” and “sweep”. I have included examples of each in the screenshot below.
This will conclude the creation of the drawable, the next and final step is to add the Button to your Activity or Fragment. Refer to the code snippet below showing the Button being placed inside the main activities layout resource file.
Adding a Shadow to a Button with Rounded Corners
In this section of the post I will show you how to apply a shadow to a button with rounded corners in Android that looks like the image below.
We will be following the same steps from the first section of this post to create the button with rounded corners so make sure you have read the first section of the post prior to starting this.
First you will need to create a new drawable resource inside the “res/drawable” directory and give the drawable file a name of “round_shadow_button”.
Because I will be reusing existing colors, I will not go through the process adding new colors to the colors.xml resource file again.
Replace the code inside your drawable resource with the code snippet below. Make sure that both of the “android:color” attributes properly reference actual colors.
This drawable uses a layer list with two items inside it. The first item represents the shadow and the second item represents the button. The two items contain rectangular shapes with the same radius of the corners but with different colors. Each of the items are positioned differently using the “android:left”, “android:top”, “android:bottom” and “android:right” attributes to allow the shadow to be displayed behind the button.
The next and final step is to add the Button to your Activity or Fragment. Refer to the code snippet below showing the Button being placed inside the main activities layout resource file.
Creating a Circular Button
In this section of the post I will show you how to create a circular button in Android that looks like the image below.
First you will need to create a new drawable resource inside the “res/drawable” directory and give the drawable file a name of “circular_button”.
Because I will be reusing existing colors, I will not go through the process adding new colors to the colors.xml resource file again.
Replace the code inside your drawable resource with the code snippet below. Make sure that the “android:color” references an actual color.
The key stand out with this drawable is the use of the “oval” shape in the shape element’s “android:shape” attribute. Another key difference from the previous drawables referenced above is the use of the size element and providing a width and height of the drawable. This is to ensure the oval is large enough so that it is not stretched and appears as circle.
The next and final step is to add the Button to your Activity or Fragment. Refer to the code snippet below showing the Button being placed inside the main activities layout resource file.
If you find colors you like, select the “Get CSS Code” button and copy the hexadecimal codes of the colors and use them in your colors.xml file
