This Tutorial Scrollable Topic Cards
Prev Tutorial Shape Drawable Rotate, Elevate
Next App Tutorial Android Photo Containers with Shadow
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 Scrollable Topic Cards
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 - Scrollable Topic Cards
Where - How - Why To Use Scrollable Topic Cards
Topic Cards can be used to display content(like text or photos) within sectioned containers in your app. To display our container with the topic cards, we coded a
frame layout with a imageview and a textview element.
We add our text to the TextView
, and our photos or text to the ImageView
To create our topic card on the left of our container; we made a layerlist and added a shape drawable and an image we made to it. The shape drawable is the first layer
and the image(atopicimage.png) we added is our top layer. It says TOPIC.
To code the layerlist we added the code for the layerlist to a file in our drawable
folder; we named our layerlist - atopiclayer.xml.
We add each item we want to be in the layerlist to the layerlist code using the item
attribute. In this case we wanted 2 items, a shape drawable for the first layer, and the atopicimage.png
as the second layer; as shown in this image.
This is the layerlist, atopiclayer.xml
You can add whatever you want to the layerlist, shapedrawables, or images you made yourself. If you add your own images they must be a png or jpeg format.
Add your images and xml files you create to the drawable
folder in your app project.
We added elevation
to the topic cards using the Material Design attribute 'android:elevation=45dp'. Because we added this elevation code we must
add the Sdk version 21 to our androidmanifest.file or our build.gradle file.
We also gave a different color to each frame layout background. For the colors used, we implemented
Material Design new color swatches.
We added six topic containers which would exceed the physical parameter of our display view. To view all the containers we added a vertical
ScrollView element. This allows scrolling outside the displayed view; so we can see all six containers, and we can add as many containers as we want.
Using Photos for the Cards
For this tutorial we used topic cards with a shape drawable and a png image to display our TOPIC header text. If you want to have Text Headers for the topic cards you can code
a png image for each topic title. Or you can add actual photos to the cards. IF, for example, you wanted to have photos of people
you would just add the photo of each person to each topic layer.
To do so, just replace this image code we have in our code, atopicimage.png, with the code
for your own images. And, you would have to make a xml file for each persons photo. You have 6 containers with 6 photo cards, so you need to create 6 xml files. You can
name they as you like.
Then, at the ImageView elements in your layout file, just code the xml file name.
For example, if you named your xml layer files, aphotolayer1.xml -
aphotolayer6.xml; at your first ImageVew code aphotolayer1.xml at your second ImageView code aphotolayer2.xml, and so on. You place that code at the
in your ImageViews for each of the 6 containers; like this:
Additional Reading at Android Developer Website:
Material Design's Elevation
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;
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.
1 png image, a topicimage.png; this is required for our LayerList code
You can save this at the Example Code section and add it to the drawable
folder in the app project, at res/drawable.
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
Shape drawable code for aphotosquare1.xml
Code for atopiclayer.xml
For this app we are going to create two xml files, one for the square shape drawable(aphotosquare1.xml) and one our layerlist(atopiclayer.xml)
which has the shape drawable and our atopicimage.png.
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 two 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 drawable xml page. Copy paste the code from our Example Code section into each xml page,
save the 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. This file has the text for our textview.
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 can code things that may be required for your app or you want to customize for your app, like; app permissions, app theme, and your Sdk min and target versions.
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/ScrollableTopicCards/app/src.
This is a what a typical gradle.build file looks like.
The Material Design platform was introduced in android 5.01 which is api 21. Each android platform build version has a API assigned to it.
Android Platform Versions and API Levels
You can find the android platform version of your android device at: Settings, AboutPhone.
The Sdk version can be added to either your androidmanifest.xml file or the build.gradle file in your app project.
The android templates apps we use (android/gradle/java/xml) to create our apps, have added it to the build.gradle file, so that is where you can find the code.
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.
Additionally, you may need to add 'support libraries' or 'dependencies' as they are known, for certain specific code classes from the Material Design coding classes.
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.
Features Material Design Support Library Using the Design Support Library
You can learn more about Material Design libraries and adding them in our next tutorials.