Next Tutorial
Coding a Weighted Fragment

Prev Page
View All Tutorials

---

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.

---

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

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


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.


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:


gradient_drawable3 can be whatever name you give it

---

EXAMPLES OF GRADIENT DRAWABLE COLORS


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.

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)
or
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- MainActivity.java.

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

res/drawable/gradient_drawable1.xml
and, gradient_drawable2.xml
gradient_drawable3.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 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 again.

Example Code Gradient Drawables :
Copy Paste the Code
gradient_drawable1.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#eeffdd" android:endColor="#7cfc00" android:angle="270" /> </shape> </item> </selector> ______________________________________ gradient_drawable2.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#b36865" android:endColor="#ffeaea" android:angle="270" /> </shape> </item> </selector> ______________________________________ gradient_drawable3.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#ff4500" android:centerColor="#fff5ee" android:endColor="#ff4500" android:angle="270" /> </shape> </item> </selector> ______________________________________ main.xml <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:fillViewport="false"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/gradient_drawable3" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="21dp" android:text="@string/gradientdrawables"/> <Button android:layout_marginTop="150dp" android:id="@+id/button1" android:textSize="24dp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_drawable1" android:text="Button With Gradient Drawable 1" /> <Button android:layout_marginTop="20dp" android:id="@+id/button1" android:textSize="24dp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_drawable2" android:text="Button With Gradient Drawable 2" /> <Button android:layout_marginTop="20dp" android:id="@+id/button1" android:textSize="24dp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/gradient_drawable3" android:text="Button With Gradient Drawable 3" /> </LinearLayout> </ScrollView> ______________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Gradient Drawables</string> <string name ="gradientdrawables"> The first button has a lighter color and then fades to a darker color.\n The second button has a darker color and then fades to a lighter color.\n The third button has a darker color, then fades to a lighter color, and then fades to the darker color. The view background has the same gradient as the third button. It has a dark, then light color, then the dark color again. \n\n To code a gradient drawable, create a xml page for each gradient drawable in the res/drawable folder of your app. Then, add your color codes to it, and then code the gradient in the element where you want the color as this:\n android:background="@drawable/gradient_drawable3\n For this app, we added the gradient drawables to buttons and the linear layout element .\n You can use whatever colors you like for the light and dark colors; like matching color themes as we have done, or different colors altogether. </string> </resources>

This free script provided by
JavaScript Kit