How To Code Gradient Drawables, Android Tutorial
Prev Page Coding A Splash Screen
This App Tutorial Coding Gradient Drawables

Next App Tutorial Coding a Fragment

Coding Gradient Drawables

If you are just arriving at this page; and you are not familiar with with creating Android Apps, we suggest you begin with our tutorials: Coding Android App Pages and How To Create a Simple App in Android

From there follow along with each tutorial lesson.


We are using AIDE(the SDK mobile coding environment for android devices), to create these tutorial apps on our tablet with android version 5; using the Java XML programming language.

We are using the AIDE coding editor to code our pages; and then to Create - Build, RUN and INSTALL them on our android device.
AIDE has a free and paid version. As of this year, the paid version of AIDE is about $20 canadian. Once you create your apps code pages, you need to RUN the app to INSTALL it on your tablet or smartphone.

You can also create; RUN your apps using the code in these tutorials, with Android Studio. Android Studio is for desktop computers. Choose Java XML as the programming language. Android Studio is free to install and use for your android app development. Although not as convenient as testing your app on an actual android device; you can test your newly created app in Android Studio using an android emulator.

Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in either AIDE or Android Studio.


First, create a java/xml android template app using AIDE, (or Android Studio). Then you can get the code for this app from the EXAMPLE CODE section on this page. Replace the code on the pages you need to(with our tutorial code); in order to create this app.
Sometimes, new pages have to be created.
All the other coded pages in your app can remain as they are; they don't need to be changed.

This is the App - Gradient Drawables
It has 3 buttons with gradient drawable, and the
Linear Layout background also has a gradient drawable added to it.

Gradient Drawable App Tutorial

Where - How To Use Gradient Drawables

Gradient Drawables are a way to style your app's interface(UI). By using two colors, or three, you can create the gradient; and then add them to buttons, textviews, and to a linear layout background.

You create a xml page for each gradient you want. The coded page for each gradient drawable you created is put in the res/drawable folder of your app. If your app doesn't have a res/drawable folder, then just create one. You can create it in AIDE, or in your tablet's file manager, by going to AppProjects/ and then select your app name and then goto the folder res.

The code for the gradient drawable looks like this;
Coding two colors
Gradient Drawable Code Image

There are different types of gradients you can make;

Go from a lighter color to a darker color (two colors):
Go from a darker color to a lighter color (two colors);
And, from a darker color, to a lighter color, and then to the darker color again (three colors).

In this app tutorial, you can see each of these different types.

We coded three buttons; in the first button we coded a light to darker color:
In the second button we coded a dark to lighter color:
In the third button we coded a dark color, then light color, then it goes to the dark color again.

We also added the gradient drawable to our Linear Layout background.
Gradient Drawable Code Linear Layout Background

It is the same color as the third button. Looking at the app screen, you can see the background goes from a darker color to a lighter color, and then to the darker color again.

The gradient drawable is added to each element you want to put them in using this code:

The code for Gradient Drawable
gradient_drawable3 can be whatever name you give it

Gradient Drawable Example Colors Gradient Colors Example

You can use colors that blend together(using a light and darker of a similar color); or use colors that are quite different from each other as in this example.
Gradient Drawable Yellow Color Example
Additional Reading: From Android Developer Website - Gradient Drawables

Creating - Naming Your App Using AIDE

When creating your app,(from left menu) choose:
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
Hello World App Java/xml
if your using the original version of AIDE

You can name your app whatever you like; if your using the name as shown in our example code use;

Gradient Drawables for the App Name and,
for the package name(next line) use:
com.aac.gradientexample ;

If you want to name it differently, you can, just change the code to whatever name you choose where it says, com.aac.gradientexample, in the coded pages, usually at the top of the java class pages like-

The Coded Pages

Code for the app - Gradient Drawables

For this app you will use these coded pages:

1 layout file - main.xml, at res/layout/main.xml, where we define our apps layout structure;already created in your template app; just copy paste this tutorials app code into the page, save the page

1 strings file - strings.xml, for the text on our page, at res/values/strings.xml; already created, just copy paste this tutorials app code into the page, save the page

3 xml files, 1 for each of the coded gradients, at

and, gradient_drawable2.xml
These 3 files need to be created, the code added, then put into the res/drawable folder of your app.
Since this app has no images; we don't have to add any to our drawable-hdpi folder. The folder src/res/drawable-hdpi also has our ic_launcher.png image; but we don't need to add it because it was added automatically when we created our android template app.

EXAMPLE CODE - Code For This Tutorial

JUST USE YOUR MOUSE to copy the code for this tutorial App Name is 'Gradient Drawables - located at AppProjects/GradientDrawables in AIDE, open the AIDE app, then open App Projects, THEN select the 'Gradient Drawables', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'Gradient Drawables' is there next to AppProjects like so: AppProjects/GradientDrawables, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.

Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'Gradient Drawables' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app.

Example Code Gradient Drawables :
Use Mouse To Copy Paste the Code

This free script provided by
JavaScript Kit

Share This Page

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid - with Free, create java/xml android template apps, and two free android coding lessons.
With paid version, create java/xml android template apps, some free android coding lessons, create a 'keystore' for your app so you can publish your apps to the marketplaces like Google Playstore and Amazon.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
GoTo Android Studio Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas

Java XML
The Coded Pages

Beginners Article
About Our Tutorials
Coding androidmanifest.xml
Coding main.xml
Coding strings.xml
Coding drawables

Java XML
Learning To Code

Create A Simple
Android App

Change App Icon

Add Text and Style

Add Buttons To App

Placing Text in

Change View
Background Color

Change Screen

Add Image to
Activity View

Add Horizontal
Scroll View

Add a Frame Layout

How to Add Themes
To Your App

How To Code
Customized Styles

Code a Toast Message

Coding Resource


Java XML
Adding Features,

Coding Shape
Drawable - Lines

Coding A WebView

Coding A Timed
Screen Splash

Coding A Gradient

Coding Fragments

Coding A
ListView Fragment

Coding a
Tabbed Fragment

Share Intent
for Text

Share Intent
for Images

Media Player
with Audio

from the Web

Add Clickable Button
To textView

Image Button with

Linear Layout with
weight attribute

OnClick Displays

Screen Density
Coding Practices


for android tablets

Android Studio
For desktop computers


Code Canyon Paid From $1 Free and Paid From $1


App Distribution
Launching Your Android App
How To Be Successful

Android App Libraries
What are they and how
to implement them

How To Implement

View All Articles

Coding Tools

Android Studio
Course - Paid

Java Programming
Course - Free

Git Hub Course

About Our Images

All images on this page are copyrighted material.
You can use the images included with each tutorial for the purpose of creating your android app. These images are not to be distributed or sold.


How To Add Your Google Key
To Manifest.xml
Web Article

How To Sign Your APK Web Article

Google Developer Console
Create Account Submit Your App
Web Article

Amazon App DRM - APK KEY
Amazon Developer Portal
Create Account - Submit Your App

Google's In-App Billing for App monetization.

Monetizing Your App
How Tos

Follow Us On Twitter