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.
AIDE and ANDROID STUDIO
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.
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
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.
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
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.
From Android Developer Website - Gradient Drawables
Creating - Naming Your App Using AIDE
When creating your app,(from left menu) choose:
Create New Project;
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:
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
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.
This free script provided by