Next Tutorial
Shape Drawables - Rotate, Elevate
Prev Page
View All Tutorials
For this tutorial we coded a LayerList and an Elevated LayerList
This is the Layer List App Photo
This is the Elevated Layer List App Photo
A layerlist can be added to your view. It is coded in the ImageView element.
A layerlist can also be elevated. To code the LayerList so it is elevated, you must code it as android:
background="@drawable/layers in the ImageView element.
If you code it as;
android:src=@drawable/layers, then the layerlist will still show but not 'elevate'.
Because we use the 'background'; property we can then elevate our layers by adding to our ImageView element this code:
android:elevation="".
Just include a number for the elevation height.
Then you can offset the image layers by using these properties: top, bottom, right, left; and give them a numeric value; as shown in the photo of the LayerList code- layers.xml
View all LayerList Properties - Attributes
The code for the LayerList is added to a xml file that you can name as you like.
This file must be put into the drawable folder at your res/ folder of your app project.
The images you use for the layerlist must also be put into this drawable folder.
We named our xml page as layers.xml, and put it into the drawable folder of our app project.
We named our images: coloroneimage.png, colortwoimage.png, colorthreeimage.png, and put them into the drawable folder.
You can download the images at the Example Code section.
Then to add the layerlist in the element code; just code it as android:
src=@drawable/nameoffile or android:
background=@drawable/nameofile, if you want to elevate it.
Also add the android:elevation code if you are going to elevate the layerlist. You don't need to code the layerlist file extension,.xml, just the file name.
Additional Reading at Android Developer Website:
Layer List
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;
LayerList for the App Name and,
for the package name(next line) use:
com.aac.layerlistexample;
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 new app name will be displayed when you Run, Build your app code.
For this app you will use these coded pages:
Layout 1 layout page, 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.
Layers.xml You need to create this page, and the drawable folder it goes into; to do so, goto the res/ folder of your app project; then select create from dots right side in AIDE, then select Create folder: type 'drawable', select ok. Drawable folder now shows in the File Hierachy, left side in AIDE. Click on the 'drawable' folder.
Now create 'layers.xml in the drawable folder. Select dots right side in AIDE, select Create New Page; type layers.xml, select ok.
Page is created; look at top of AIDE, page name layers.xml is displayed; with some default text in it. Remove the text and replace it with the code from the Example Code this tutorial for layers.xml. Just copy and paste. Then save the page.
Tip
Make sure your at res/ folder of your app project name before you create the drawable folder.
The layers.xml has the code for the three images used in the layerlist. Each image is coded as an item: and the attributes Left, Top are used to place each image how we want in the layerlist. Then we code the name of our layerlist in our ImageView element in the layout page; main.xml.
Instead of defining our images with android:src="" , we simply define our 'layerlist', with the android:background="" property. This code places our layerlist into the view; and now we can also elevate it by adding the android:elevation="" code.
Strings.xml page 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 page 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, app theme, and where you can give individual names to your app's pages.(activities)
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.
Moreso important for newer android platforms like the Material Design where many code classes require a min SDK target api 21.
For our LayerList app we are using the android:elevation attribute, and this code belongs to the Material Design code class; so in order for us to implement it in our app, we must have the SDK target version at, at least api 21.
You can add these SDK version numbers to your androidmanifest.xml file or the build.gradle file. Because we created a android template app, they have been already added for us to the build.gradle file. So, since they are added for us we need only ensure they are uptodate for the code classes we are adding to our app.
If your not adding any newer code classes that require specific apis greater than the default api for min and target SDK; then you do not need to change your SDKs for the purpose of your included codes; however you can also change them so that your app is compatable with newer android devices(smartphones,tablets).
This is easy to do. Goto our Tutorial 1, scroll down the page to the build gradle image; follow instruction to change SDK min and target number.
BUILD.GRADLE file, this file is created for us when we created our android gradle/java/xml template app. It is located at AppProjects/LayerList/app/ folder.
In our template app we created, the min SDK and target SDK versions are added to the build.gradle file as min SDK 14, and target SDK 21.
Version 21 is required for the implementation of many of the new Material Design code classes. As previously stated, because these SDK versions have been added for us when we created our template app we do not have to add the target or min versions numbers to the build.gradle or the androidmanifest.xml file; however, as mentioned, they should be updated to correspond with the newer android platforms.
FYI:
Coding the build.gradle file will be required in some Material Design tutorials.
There is actually 2 build.gradle files in your app project. One you can code/edit, one you cannot. The one you cannot has a text header telling you not to edit it.
Shape Drawables - Rotate, Elevate
Prev Page
View All Tutorials
Android Tutorial, Coding a LayerList
For this tutorial we coded a LayerList and an Elevated LayerList
This is the Layer List App Photo
This is the Elevated Layer List App Photo
A layerlist can be added to your view. It is coded in the ImageView element.
A layerlist can also be elevated. To code the LayerList so it is elevated, you must code it as android:
background="@drawable/layers in the ImageView element.
If you code it as;
android:src=@drawable/layers, then the layerlist will still show but not 'elevate'.
Because we use the 'background'; property we can then elevate our layers by adding to our ImageView element this code:
android:elevation="".
Just include a number for the elevation height.
HowTo Use a LayerList
A LayerList can be added to your app for any number of reasons; and is created by adding two or more images together. Because you are using the LayerList method the images will layer on top of each other, with the last coded image being the first on the pile.Then you can offset the image layers by using these properties: top, bottom, right, left; and give them a numeric value; as shown in the photo of the LayerList code- layers.xml
View all LayerList Properties - Attributes
The code for the LayerList is added to a xml file that you can name as you like.
This file must be put into the drawable folder at your res/ folder of your app project.
The images you use for the layerlist must also be put into this drawable folder.
We named our xml page as layers.xml, and put it into the drawable folder of our app project.
We named our images: coloroneimage.png, colortwoimage.png, colorthreeimage.png, and put them into the drawable folder.
You can download the images at the Example Code section.
Then to add the layerlist in the element code; just code it as android:
src=@drawable/nameoffile or android:
background=@drawable/nameofile, if you want to elevate it.
Also add the android:elevation code if you are going to elevate the layerlist. You don't need to code the layerlist file extension,.xml, just the file name.
Additional Reading at Android Developer Website:
Layer List
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;
LayerList for the App Name and,
for the package name(next line) use:
com.aac.layerlistexample;
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 new app name will be displayed when you Run, Build your app code.
The Coded Pages
Code for the app - LayerListFor this app you will use these coded pages:
Layout 1 layout page, 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.
Layers.xml You need to create this page, and the drawable folder it goes into; to do so, goto the res/ folder of your app project; then select create from dots right side in AIDE, then select Create folder: type 'drawable', select ok. Drawable folder now shows in the File Hierachy, left side in AIDE. Click on the 'drawable' folder.
Now create 'layers.xml in the drawable folder. Select dots right side in AIDE, select Create New Page; type layers.xml, select ok.
Page is created; look at top of AIDE, page name layers.xml is displayed; with some default text in it. Remove the text and replace it with the code from the Example Code this tutorial for layers.xml. Just copy and paste. Then save the page.
Tip
Make sure your at res/ folder of your app project name before you create the drawable folder.
The layers.xml has the code for the three images used in the layerlist. Each image is coded as an item: and the attributes Left, Top are used to place each image how we want in the layerlist. Then we code the name of our layerlist in our ImageView element in the layout page; main.xml.
Instead of defining our images with android:src="" , we simply define our 'layerlist', with the android:background="" property. This code places our layerlist into the view; and now we can also elevate it by adding the android:elevation="" code.
Strings.xml page 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 page 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, app theme, and where you can give individual names to your app's pages.(activities)
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.
Moreso important for newer android platforms like the Material Design where many code classes require a min SDK target api 21.
For our LayerList app we are using the android:elevation attribute, and this code belongs to the Material Design code class; so in order for us to implement it in our app, we must have the SDK target version at, at least api 21.
You can add these SDK version numbers to your androidmanifest.xml file or the build.gradle file. Because we created a android template app, they have been already added for us to the build.gradle file. So, since they are added for us we need only ensure they are uptodate for the code classes we are adding to our app.
If your not adding any newer code classes that require specific apis greater than the default api for min and target SDK; then you do not need to change your SDKs for the purpose of your included codes; however you can also change them so that your app is compatable with newer android devices(smartphones,tablets).
This is easy to do. Goto our Tutorial 1, scroll down the page to the build gradle image; follow instruction to change SDK min and target number.
BUILD.GRADLE file, this file is created for us when we created our android gradle/java/xml template app. It is located at AppProjects/LayerList/app/ folder.
In our template app we created, the min SDK and target SDK versions are added to the build.gradle file as min SDK 14, and target SDK 21.
Version 21 is required for the implementation of many of the new Material Design code classes. As previously stated, because these SDK versions have been added for us when we created our template app we do not have to add the target or min versions numbers to the build.gradle or the androidmanifest.xml file; however, as mentioned, they should be updated to correspond with the newer android platforms.
FYI:
Coding the build.gradle file will be required in some Material Design tutorials.
There is actually 2 build.gradle files in your app project. One you can code/edit, one you cannot. The one you cannot has a text header telling you not to edit it.
EXAMPLE CODE - Code For This Tutorial
JUST copy the code for this tutorial App Name is 'LayerList - located at AppProjects/LayerList in AIDE, open the AIDE app, then open App Projects, THEN select the 'LayerList', app from your files hierachy(left menu). main.xml and MainActivity.java by default open in the editor.
Open any page: just click on any file from the app, like strings.xml Make sure at top of page, the app name 'LayerList' is there next to AppProjects like so: AppProjects/LayerList, then you know you have the proper App.
Save images: each image is 250x300
coloroneimage.png
colortwoimage.png
colorthreeimage.png
Then Copy/ move each image into res/drawable folder.
JUST copy the code for this tutorial App Name is 'LayerList - located at AppProjects/LayerList in AIDE, open the AIDE app, then open App Projects, THEN select the 'LayerList', app from your files hierachy(left menu). main.xml and MainActivity.java by default open in the editor.
Open any page: just click on any file from the app, like strings.xml Make sure at top of page, the app name 'LayerList' is there next to AppProjects like so: AppProjects/LayerList, 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 'LayerList' 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.
Save images: each image is 250x300
coloroneimage.png
colortwoimage.png
colorthreeimage.png
Then Copy/ move each image into res/drawable folder.
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.
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