Next Tutorial
Simple Card View

Prev Page
View All Tutorials

---

Photo Containers with Shadow

---

This is the App Photo - Photo Containers with Shadow

How 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.

Shadows

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 just 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

Layer List

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

To name your app; use;

Scrollable Photo Container for the App Name and,
for the package name(next line) use:
com.aac.photocontainers ;

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.

Images, one for each of the three photo containers.
park_photo_rounded.png
peggys_cove_lighthouse.png
public_gardens.png

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.

Java Class 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

aphotocardlayerpark.xml 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.


aphotocardlayerpeggyscove.xml 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.


myimageborder.xml
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. The outer border, the stroke color, is the lighter yellow.



Drawable Folder
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', from dots at right side in AIDE; and name it drawable
Then in the drawable folder, create your three xml files. Click on the dots in AIDE again; this time Select Create New File.

Create your drawable folder, then create your xml pages, one for each layerlist xml page, and the shape drawable xml file and code.

Strings 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.

Manifest 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 at least 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.

You can however, use a newer or more recent api number. Android platform api is at 30; (March 2021), with 31 about to be released; so you can set your target at any number 21- 30. And the min target should be api 16.


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

uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="28"


Build Gradle, this file is also created for us when we created our android gradle/java/xml template app. Just ensure the target sdk is at least 21 at the default Config section in this page.

For this app, the build.gradle file is located at; AppProjects/ScrollablePhotoContainer/app/src.


FYI:

View the Android Platform Versions and API Levels here.

You can find the android platform version of your android device at: Settings, AboutPhone.

Platform Dependencies

Android devices support several different platforms. And there are many device users of all recent platforms; those being android version 6, 7, 8, 9, 10, 11.
Versions 8, 9, 10, 11, are the platforms today with the most users. With each new platform release, older platforms become more obsolete; and have a smaller overall market share.
Since there are many users using the various platforms, apps that are developed need to have proper api and dependency libraries in order to perform as intended across all these platforms; and, reach the best user base.

Code Classes That Require Dependencies

Many code classes require support libraries(dependencies).
Material Design is a good example. Many code classes you use from material design require 'support libaries'(dependencies) to be added to the build.gradle file in your app project.
CardView, RecyclerView, Snackbar, Fabs, and Navigation Drawer are some of the most often used code classes that were introduced with api 21; platform version 5 of Material Design.

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;
implement 'com.android.support:design:28.0.0'

Android Developer website has the latest versions of these support libraries.

Android Support Libraries 2021

EXAMPLE CODE - Code For This Tutorial

JUST copy the code for this tutorial App Name is 'Scrollable Photo Container'
- located at AppProjects/ ScrollablePhotoContainer in AIDE, open the AIDE app, then open App Projects, THEN select the ' ScrollablePhotoContainer ', 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 ScrollablePhotoContainer is there next to AppProjects like so: AppProjects/ScrollablePhotoContainer
, 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 ' ScrollablePhotoContainer ' 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.

Example Code App - ScrollablePhotoContainer :
Copy Paste the Code
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:fillViewport="false"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:layout_width="match_parent" android:layout_height="300dp" android:elevation="35dp" android:background="#ffffff"> <ImageView android:id="@+id/photo1card" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="36dp" android:background="@drawable/aphotocardlayerpark"/> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="200dp" android:background="#ffffff"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="20dp" android:layout_marginLeft="31dp" android:text="@string/photo1infocontainertext"/> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="300dp" android:elevation="25dp" android:background="#ffffff"> <ImageView android:id="@+id/photo2card" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/aphotocardlayerpeggyscove"/> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="200dp" android:background="#ffffff"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="20dp" android:layout_marginLeft="31dp" android:text="@string/photo2infocontainertext"/> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="300dp" android:elevation="65dp" android:background="#ffffff"> <ImageView android:id="@+id/photo3card" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/public_gardens" android:background="@drawable/myimageborder"/> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="200dp" android:background="#ffffff"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="20dp" android:layout_marginLeft="31dp" android:text="@string/photo3infocontainertext"/> </FrameLayout> </LinearLayout> </ScrollView> myimageborder.xml <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#ffff66" /> <stroke android:width="15dp" android:color="#ffffb6" /> <padding android:left="1dp" android:top="25dp" android:right="1dp" android:bottom="25dp" /> </shape> aphotocardlayerpark.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/aphotosquare1" android:top="1dp" android:left="1dp" android:right="1dp" /> <item android:drawable="@drawable/park_photo_rounded" android:top="1dp" android:left="1dp" /> </layer-list> aphotocardlayerpeggyscove.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/aphotosquare1" android:top="1dp" android:left="1dp" android:right="1dp" /> <item android:drawable="@drawable/peggys_cove_lighthouse" android:top="1dp" android:left="1dp" /> </layer-list> _____________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ScrollablePhotoContainer </string> <string name="photo1infocontainertext"> Photo of Point Pleasant Park, Halifax , NS\n Photo size is 1100x500, this photo has rounded edges.\nThis photo container is created using a FrameLayout with a LayerList as the background drawable. \n A Shadow is cast onto this info text container using the Material Design Elevation property in the FrameLayout element.\n </string> <string name="photo2infocontainertext"> Photo of Peggys Cove, Nova Scotia \n Photo size is 1100x660\n\n This photo container is created using a FrameLayout with a LayerList as the background drawable.\nIt also has a shadow on this text container using the Elevation property. </string> <string name="photo3infocontainertext"> Photo of Public Gardens, Halifax, Nova Scotia\n Photo size is 1100x660\n This photo container is created using a FrameLayout with a Shape Drawable as the background, allowing for the border around the image. The photo is added using the android:src attribute.\n The shadow on this text container is also created using the Elevation property of Material Design. </string> </resources>
SAVE IMAGES: Right Click and Save As

park_photo_rounded.png

peggys_cove_lighthouse.png

public_gardens.png

Add the images to the drawable folder in your app project at res/drawable.

This free script provided by
JavaScript Kit