How To Code Shape Drawables, Rotate, Elevate
This Tutorial Coding Shape Drawables

Prev Tutorial Coding a LayerList

Next App Tutorial Scrollable Topic Cards

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(a mobile coding environment using language java/xml), to create these tutorial apps on our
tablet(7" screen) that has android version 5.0.
Once we build and RUN our app; we then install the app on this same tablet; and the app is also installed on a smart phone that has android version 6.
AIDE can be installed on any android version from 4 - 8.
We are using the AIDE coding editor to code our pages; and then to Create - RUN our apps. AIDE is a SDK coding environment for android devices like a tablet or smartphone. AIDE has a free and paid version. Once you create your apps code pages, you need to RUN the app to build your apk package; then you INSTALL it on your tablet or smartphone. For info on using AIDE, gohere

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 its' 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.

Coding Shape Drawables, Rotate, Elevate


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 Photo - Elevated Shape, Rotated Shape
Android Tutorial Elevate Rotate Drawable Shapes

This is the App Photo - Horizontal View
Android Tutorial Elevate Rotate Drawable Shapes

Where - How - Why To Use Shape Drawables with Rotate, Elevate

Shape Drawables can be added to your apps, and used for graphics, backgrounds, or to simply improve your UI visual design.

For our tutorial, we have added 2 shape drawables. We wanted to add one to our background so it added it to our LinearLayout element using the android:background attribute. For this we used a rectangle shape(default shape) and also we rotated the shape by certain degrees.

And, we also added a border to the drawable which is a slightly different yellow color than the drawables rectangle color. The border is added using the 'stroke' attribute. And to color our drawable we used the gradient attribute which allows us to add two colors to our drawable shape. You can see by looking at the app, the start color at the top of the app view is a lighter color than the bottom color of the drawable.

Our second shape drawable is also a rectangle shape. We added this shape to the background of our TextView, and added the 'elevation' attribute to it. The elevation code class is a Material Design coding method. Because we used the android:background attribute we were able to also use the 'elevate' thus giving the shape a raised look with a slight shadow effect.

Additional Reading at Android Developer Website:

Canvas and 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;

ElevateRotateShapes for the App Name and,
for the package name(next line) use:
com.aac.elevaterotateshapes ;

You cannot change the package name once you create it; however you can change the app name. To do so, just change it to whatever name you choose where it says, app_name, in the strings.xml file, and at the Project File name on the left menu hierachy; highlight the app name and then select, rename; type the new name.

The Coded Pages

For this app you will use these coded pages:

LAYOUT File 1 layout file, main.xml; located at res/layout/main.xml, already created, just replace the code on this page with the code from our Example Code section and save the page.

JAVA File 1 java class page;; located at app/src/java/, already created; we don't need to add or edit code on this page so leave it as it is.

2 xml files
For this app we are going to create two xml files for our shape drawables.
You also need to create a
drawable folder to put the drawable shape xml files into.
These files and folder are put at 'res/drawable', in your app project. So, first goto res/ and select 'Create New Folder', and name it drawable
Then in the drawable folder, create your two files: mydrawable.xml and mydrawablesquare.xml. Put the code from our Example Code section in the respective files, save the files.

At your LinearLayout element put the code for the mydrawable.xml file, and at the TextView element put the code for the mydrawablesquare.xml file as shown in this image of the code.

Rotate Shape Drawable code

STRINGS.XML File 1 strings.xml file, for text on our app page; file created for you when you created your android template app; just replace code that's there with code from our Example Code and save page.

ANDROIDMANIFEST.XML File 1 manifest file, AndroidManifest.xml, already created for us when we created our android gradle/java/xml template app.

The manifest file is where you code things like; app permissions, and your app theme.

The manifest file can is also where you code your SDK min and target versions for your app. These are a number. These are important as they determine if certain codes you add to your app will function or not.
They are known as APIs. They correspond to android build platforms. Moreso important for newer android platforms like the Material Design where many code classes require a min target version 21.

The Material Design platform was introduced in android 5.01 which is api 21. Each android platform build version has a API assigned to it.
View the Android Platform Versions and API Levels

In AIDE, when using the template app to create your android/gradle/java/xml file these files androidmanfest.xml and build.gradle are coded for us with the version 21 code already added.
If your using Android Studio to create your apps, then you can choose to add the SDK version 21 to your app code for Material Design, or if adding Material Design app code it may just add automatically for you to the code.

The important thing is that when coding classes from Material Design to include the SDK target version 21 in either your androidmanifest.xml file or your build.gradle. file.

Also, if these SDK min and target version numbers are coded in both files then the build.gradle file takes precedence.

Lets assume for example, in your androidmanifest file, you code the min SDK version as 7, and target version as 14. Then, in your build.gradle, file you code the min SDK as 7, and the SDK target version as 21. The android system will use the version 21 as the target SDK version because you have coded it in the file.

This is how you code it in your app androidmanifest.xml file


This is image of AndroidManifest.xml file
image of androidmanifest.xml file

BUILD.GRADLE file, this file is created for us when we created our android gradle/java/xml template app. Because we are using the elevate code attribute in our TextView we need to add the SDK target as version 21 in our build.gradle or androidmanifest.xml file.

Why? Because the 'elevate code' is a Material Design code class; therefore, to have it perform as intended in our app, we need to include the proper api number that corresponds to the code which is the api 21, coded as 'targetSdkVersion="21".

Your build.gradle file is located at; AppProjects/ElevateRotateShapes/app/src for this app. You don't have to add the SDK target version 21, because its already been coded for us.

This is a what a typical file looks like.
build.gradle file, android


When using Shape Drawables; if you don't define the shape to use, the rectangle (rect) shape is used by default.

If your using the shape drawable - ring, android:shape="ring", you must also use the - innerRadius, attribute with it.
You can use dp, px, or pt for its value; dp is most common.

If your using the shape drawable - line, android:shape="line", you must also use the - stroke attribute, to define the width of your line.


If your using the rectangle shape you can use 'corners' attribute with it.
corners android:radius="5dp
Corners attribute can only be coded with the 'rect' shape drawable.

EXAMPLE CODE - Code For This Tutorial

JUST USE YOUR MOUSE to copy the code for this tutorial App Name is ' Elevate Rotate Shapes - located at AppProjects/ Elevate Rotate Shapes in AIDE, open the AIDE app, then open App Projects, THEN select the ' Elevate Rotate Shapes ', 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 Elevate Rotate Shapes is there next to AppProjects like so: AppProjects/ Elevate Rotate Shapes , 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 ' Elevate Rotate Shapes' 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 App -Drawables Elevate, Rotate :
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 there is a couple free android coding lessons.
With paid, create java/xml android template apps, and you can 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:
Sushi Rolls Make Sushi at Home | 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

Coding A
Video Player

Localize Your App
World Languages

Coding a Simple ListView

ListView with Toast Message

Android Sliding Drawer

Sliding Drawer
with ListView

Java XML

What is Material

Coding a Material
Design Theme

Coding a Layer List
With Elevation

Shape Drawables
Elevate - Rotate

Scrollable Elevated
Topic Cards

Photo Containers
With Shadowed Container

Simple CardView

View Animator
with Photo Array

View Animator
With Views

Simple Frame Animation

Frame Animation
With Buttons

View Animation
Rotate, Scale, Translate

Android AppBar
ToolBar Design

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