This Tutorial Photo Containers with Shadow
Prev Tutorial Scrollable Topic Cards
Next App Tutorial Simple Card View
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.
Photo Containers with Shadow
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 - Photo Containers with Shadow
Where - How - Why To Use Photo Containers
Using containers in your app is a good way to display photos by themselves or with info containers as we have done.
In this app we created scrollable photo containers using Frame Layouts. We also added the ScrollView element so we could scroll all the containers that exceeded the physical
boundry of the view display. And, we used a Linear Layout to put all the Frame Layouts into.
In each Frame Layout element we added our ImageView and Textviews. The ImageView holds our photo, and the TextView holds our text(info) about the photo.
In order to code this we added a framelayout with an ImageView, and then
a framelayout with a TextView.
We wanted to cast a shadow onto each info container as well. To do this, we added the Material Design's elevation
attribute to each FrameLayout element. We coded each
one with a different elevation number, so we could see the different shadow each number would create.
In our first framelayout code we used
android:elevation="35dp", in the second framelayout we used android:elevation="25dp", and in the third framelayout we used, android:elevation=65dp".
The third info container, with the public gardens photo has the most shadow cast as we used 65dp. The first info container, with the park photo, has the least shadow cast,
as we used 25dp.
If we had not coded the elevation attribute into each framelayout the info container background would be white in color.
LayerList For Photos
We coded a LayerList for the first two photo containers. The first two photos use the same layer, just
the photo is different; one of a park, and one photo is of peggys cove.
Shape Drawable For Border
For our third photo container we just added the image to our ImageView element but we also added
a shape drawable to the background so it would create the yellow border around the image.
Additional Reading at Android Developer Website:
Creating Shadows Using Material Design's Elevation
View all LayerList Properties - Attributes
Canvas and Drawables
Material Design Color Swatches
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;
Scrollable Photo Container
for the App Name and,
for the package name(next line) use:
The Coded Pages
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.
3 png images, one for each of the three photo containers.
You can download/save them to your computer/device from our Example Code section.
Then add them to the res/drawable folder in your app project.
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.
3 xml files
Each xml file must be created, and named as shown here; then add the code to each page from our Example Code section.
Create your drawable
folder at res/drawable in your app project; then in the folder drawable create each of these xml pages.
Add the code and save each page.
Coding The LayerList
This page will have, park_photo_rounded.png added to its layerlist code.
The photo in this layerlist has rounded shadowed corners. This border effect was added using GIMP, a Free image creator and editor. Each layer in your layerlist
is added using the 'item' attribute. You can add as many layers as you want. You must have at least 2 to have a layerlist.
This page will have, peggys_cove_lighthouse.png added to its layerlist code.
We add our first layer, then we add our photo name to be added as the second layer, which will actually put the photo on top.
This is the public gardens photo.
We wanted to add an image border around this photo, so we coded a shape drawable with the yellow color, then added a 'stroke' to it. The stroke
is the outer border and it can be a different color than your shape color as you can see by looking at this image of the code. The outer border,
the stroke color, is the lighter yellow.
You need to create a drawable
folder to put the 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 three xml files. Click on the dots at top of the File Hierachy left side menu; this lets you Select to create a new Folder.
Create your drawable
folder, then create your xml pages, one for each layerlist xml page, and the shape drawable xml file and code.
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. This file has the text strings for each of our info containers.
1 manifest file, AndroidManifest.xml, already created for us when we created our android gradle/java/xml template app.
Because we use a template app to create our apps; most codes have already been added for us.
For this app, we require a Sdk target version of 21, but this has already been coded for us in the build.gradle file so we don't need to
add it to this file or edit this file.
This is how you code it in your app androidmanifest.xml file
This is image of AndroidManifest.xml file
, this file is created for us when we created our android gradle/java/xml template app.
We do need to add the SDK version 21 code because we are using the elevation
code class from Material Design in our app code.
The SDK version 21 code has already been added for us in the build.gradle file at the 'defaultConfig' code section, so we don't have to edit the code in this file; just leave it as it is.
For this app, the build.gradle file is located at; AppProjects/ScrollablePhotoContainer/app/src.
The Material Design platform was introduced in android 5.01 which is api 21, for coding purposes Sdk version 21. Each android platform build version has a API assigned to it.
View the Android Platform Versions and API Levels
You can find the android platform version of your android device at: Settings, AboutPhone.
For most apps you build you will need to have the proper Sdk version coded in either the build.gradle file or the AndroidManifest.xml file.
Android devices at this time support several different platforms. And there are many device users of all recent platforms; those being android version 4,5 6 7.
And since there are users using the various platforms, apps that are made need to have proper coding in order to perform as intended across all these platforms.
In order to provide support to make the apps you create compatible for all the different android platforms; android uses support libraries
as dependencies, and coded as such in your build.gradle file.
To make the apps you build compatible, you should at this time use for your min Sdk version 14, especially when you are including a 'support library' in your app code.
And, for the target version use Sdk version 21. Doing so will make your app
compatible with more android device platforms.
In addition to adding the Sdk min and target versions, you also need to add the 'support libaries' for any
code class you add to your app that requires them.
Material Design is a good example. Many code classes you use from material design require 'support libaries' to be added to the build.gradle file in your app project.
Doing so will allow your code to perform as intended on more android platforms; and this means more users can download and install your app.
To add a 'support libary' to your code:
Basically, you add a line or few lines of code to your build.gradle file at the 'dependencies' section. For example, any UI design features you want to add from
the Material Design coding classes requires the 'design' library to be added.
This is the code;
Android Developer website has the latest versions of these support libraries.
Features Material Design Support Library Using the Design Support Library
Although Sdk min and target versions can be coded in your AndroidManifest.xml file, the build.gradle
file is used moreso for coding your Sdk min and target versions, because you also code your support libraries in the build.gradle file of your app.
It is more convenient to add these codes in the one file.
You can learn more about Material Design support libraries and how to add them to your build.gradle file
in our next app tutorial.