This Tutorial Coding a Layer List
Prev Tutorial Android Material Design
Next App Tutorial Shape Drawables - Rotate, Elevate
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(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
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 a LayerList
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.
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
This is the layout file for the app code. To code the LayerList so it is elevated,
you must code it as android:background="@drawable/layers in the ImageView element, as shown in this photo.
And, add the android:elevation code as well.
If you code it as shown in this photo;
android:src=@drawable/layers, then the layerlist will not be elevated.
Where - How - Why To 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 this photo of the LayerList code.
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 file 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 also; as shown in this photo.
Then to add the layerlist to any element in your app 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 file extension,.xml, just the file name.
Additional Reading at Android Developer Website:
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;
for the App Name and,
for the package name(next line) use:
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
Code for the app - Material Theme
For this app you will use these coded pages:
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.
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.
You need to create this file and the drawable folder it goes into; to do so, goto the res/ folder of your app project; then create the drawable folder
so it is at res/drawable; then put the code from our Example
Code section for the layers.xml file into the layers.xml file you create; save the page.
For the layers.xml file, just select create new file, and for the folder drawable, just
select create new folder, Make sure your at res/ folder before you create the drawable folder. And create the layers.xml file once you have created the drawable folder.
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.
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.
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 target version 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 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 already coded we do not need to code them.
If you look at the photo in the build.gradle section, you can see that
the SDK version 21 has been added to the file.
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
And, if you were coding an app without using a template(that has this already included for you),
you would need to add them to either the androidmanifest.xml file or preferably, the 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. Look at the example photo of the build.gradle file. You can see how the
SDK versions min and target are added to the default config in the code.
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.
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.
This is a typical gradle.build file.
Coding the build.gradle file will be required in some of our 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.