Next Tutorial
Scrollable Topic Cards
Prev Page
View All Tutorials
This is the App Photo - Elevated Shape, Rotated Shape
This is the App Photo - Horizontal View
For our tutorial, we have added 2 shape drawables. We wanted to add one to our background so we added it to our LinearLayout element using the android:background code.
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' code. And to color our drawable we used a gradient 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' code to it. The elevation code class is a Material Design coding method. Because we used the android:background code, we were able to also use the 'elevate' property thus giving the shape a raised look with a slight shadow effect.
Additional Reading at Android Developer Website:
Drawables
Canvas and Drawables
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; 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.
Layout 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 1 java class page; MainActivity.java; located at app/src/java/MainActivity.java, already created; we don't need to add or edit code on this page so leave it as it is.
2 xml files
mydrawable.xml
mydrawablesquare.xml
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. First, goto your app project at the res folder.
Then at res/; and from right side in AIDE, select dots; then select 'Create New Folder', and name it drawable
Next, click on the drawable folder you just created from left side AIDE in file hierachy.
Now your in drawable folder.
Now create your two files: mydrawable.xml and mydrawablesquare.xml.
Again, select dots right side in AIDE; next select Create New File; type each page name; after each, select ok. Pages are now created in the drawable folder of your app project.
Put the code from our Example Code section in the respective files, save the pages.
At your LinearLayout element at main.xml, 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. Save the page.
Strings.xml 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 1 manifest page, 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, additional activities, and your app theme.
The manifest file 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.
Standard codes are fine because they work across all android platforms usually without issue. But specialty code classes like Recycler View require adding api at least 21 for the Target version in the Config section of your build gradle.
And, 'dependency' code must be added also.
For our tutorials, any requirements for min and target versions is included with the Example Code if it is necessary for a particular code class.
APIs correspond to android build platforms numbers. Material Design is android platform version 5; api 21.
This is important for newer android platforms like the Material Design where many code classes require a min target version api 21.
And, there is now newer code classes since Material Design. As of this year, March 2021; there is now api 30; android version 11; and many new code classes have been introduced with each android version update.
Soon to be on the market is android platform version 12; api 31. You will learn more about newer codes being introduced and how to add a dependency in our Tutorials V.
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 gradle.build file.
This is how you code it in your app androidmanifest.xml file
uses-sdk
android:minSdkVersion="14"
android:targetSdkVersion="21"
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 gradle.build file looks like.
FYI:
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.
shape="ring"
innerRadius="6dp"
If your using the shape drawable - line, android:shape="line", you must also use the - stroke attribute, to define the width of your line.
stroke
android:width="35dp"
android:color="#ffff66"
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.
Scrollable Topic Cards
Prev Page
View All Tutorials
Coding Shape Drawables, Rotate, Elevate
If you are just arriving at this page; and you are not familiar with creating Android Apps,we suggest you begin with our tutorials introduction: About Our Tutorials. From there follow along with each tutorial lesson.This is the App Photo - Elevated Shape, Rotated Shape
This is the App Photo - Horizontal View
How 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 we added it to our LinearLayout element using the android:background code.
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' code. And to color our drawable we used a gradient 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' code to it. The elevation code class is a Material Design coding method. Because we used the android:background code, we were able to also use the 'elevate' property thus giving the shape a raised look with a slight shadow effect.
Additional Reading at Android Developer Website:
Drawables
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)
or
Hello World App Java/xml
if your using the original version of AIDE
You can name your app; 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 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 1 java class page; MainActivity.java; located at app/src/java/MainActivity.java, already created; we don't need to add or edit code on this page so leave it as it is.
2 xml files
mydrawable.xml
mydrawablesquare.xml
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. First, goto your app project at the res folder.
Then at res/; and from right side in AIDE, select dots; then select 'Create New Folder', and name it drawable
Next, click on the drawable folder you just created from left side AIDE in file hierachy.
Now your in drawable folder.
Now create your two files: mydrawable.xml and mydrawablesquare.xml.
Again, select dots right side in AIDE; next select Create New File; type each page name; after each, select ok. Pages are now created in the drawable folder of your app project.
Put the code from our Example Code section in the respective files, save the pages.
At your LinearLayout element at main.xml, 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. Save the page.
Strings.xml 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 1 manifest page, 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, additional activities, and your app theme.
The manifest file 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.
Standard codes are fine because they work across all android platforms usually without issue. But specialty code classes like Recycler View require adding api at least 21 for the Target version in the Config section of your build gradle.
And, 'dependency' code must be added also.
For our tutorials, any requirements for min and target versions is included with the Example Code if it is necessary for a particular code class.
APIs correspond to android build platforms numbers. Material Design is android platform version 5; api 21.
This is important for newer android platforms like the Material Design where many code classes require a min target version api 21.
And, there is now newer code classes since Material Design. As of this year, March 2021; there is now api 30; android version 11; and many new code classes have been introduced with each android version update.
Soon to be on the market is android platform version 12; api 31. You will learn more about newer codes being introduced and how to add a dependency in our Tutorials V.
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 gradle.build file.
This is how you code it in your app androidmanifest.xml file
uses-sdk
android:minSdkVersion="14"
android:targetSdkVersion="21"
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 gradle.build file looks like.
FYI:
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.
shape="ring"
innerRadius="6dp"
If your using the shape drawable - line, android:shape="line", you must also use the - stroke attribute, to define the width of your line.
stroke
android:width="35dp"
android:color="#ffff66"
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 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.
JUST 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 again.
This free script provided by
JavaScript
Kit
AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide
ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
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 ProTips Photography Point & Shoot Cameras