Next Tutorial
Scrollable Photo Containers with Shadow

Prev Page
View All Tutorials

---

Coding Scrollable Topic Cards

If you are just arriving at this page; and you are not familiar with creating Android Apps,we suggest you begin with our tutorials introduction: About Our Tutorials. From there follow along with each tutorial lesson.

---

This is the App Photo - Scrollable Topic Cards

How 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. And, images can use _ but not -, in the image name.
Add your images and xml files you create to the drawable folder in your app project.You have to create the drawable folder.

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 of at least 21 to our androidmanifest.file at SDK Uses, or our build.gradle file at the default config.

We also gave a different color to each frame layout background. For the colors used, we implemented Material Design new color blends.

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.

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 android:background
="@drawable/nameoffile in your ImageViews for each of the 6 containers; like this:

android:background
="@drawable/aphotolayer1.xml android:background
="@drawable/aphotolayer2.xml android:background
="@drawable/aphotolayer3.xml android:background
="@drawable/aphotolayer4.xml android:background
="@drawable/aphotolayer5.xml android:background
="@drawable/aphotolayer6.xml

Additional Reading at Android Developer Website:
Material Design's Elevation
Drawables
Canvas and Drawables
Color Blends Android

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;

ScrollableTopicCards for the App Name and,
for the package name(next line) use:
com.aac.topiccards ;

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.

Image, 1 png image, 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.You must create the drawable folder.

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.

2 xml files at drawable folder

aphotosquare1.xml
atopiclayer.xml

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 right side side menu; this lets you Select to create a new Folder.

Create your drawable folder,click ok; 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.



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 for our textview.

Manifest 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, declare any activities you add, change 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.
Example, 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 page.

FYI
AIDE does get updates periodically; therefore, this default min and target SDK numbers can update; however; they are not updated automatically for any new code classes you may include in your app that require a specific api number.

You need to add the required SDK target number yourself for any code class you add or ensure that the one already there matches the required api of the code class you added.

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

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

The Example Code section has the code for the androidmanifest.xml for this tutorial app.

Build Gradle, this file is also created for us when we created our android gradle/java/xml template app.
We do need to ensure that the SDK Target version is at least api 21 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. You can however, use a newer sdk target; it just has to be 21 at least for Material Design.

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.


Platform Versions & Api

Each android platform build version has an API number assigned to it.
View the Android Platform Versions and API Levels and here, Android Api

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

Support Libraries

As mentioned in previous tutorial, 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.

Since Material Design; there are android platforms with other code classes that require dependencies.
The best practice is to read the android developer website for any code class you add; making note of the api for it. Then put that number as your Target SDK in either your manifest, or the build gradle at the default config section.

Features Material Design Support Library
Using the Design Support Library
You can learn more about adding dependencies and adding them in our next tutorials.

EXAMPLE CODE - Code For This Tutorial

JUST copy the code for this tutorial App Name is 'ScrollableTopicCards' - located at AppProjects/ ScrollableTopicCards in AIDE, open the AIDE app, then open App Projects, THEN select the ' ScrollableTopicCards ', 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 ScrollableTopicCards is there next to AppProjects like so: AppProjects/ ScrollableTopicCards , 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 ' ScrollableTopicCards ' 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 - ScrollableTopicCards :
Use Mouse To 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:id="@+id/card1" android:layout_width="match_parent" android:layout_height="195dp" android:background="#f48fb1"> <ImageView android:id="@+id/card1image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="45dp" android:scaleType="center" android:textColor="#880e4f" android:text="Topic" android:background="@drawable/atopiclayer"/> <TextView android:id="@+id/card1text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="20dp" android:layout_marginLeft="215dp" android:text="@string/section1"/> </FrameLayout> <FrameLayout android:id="@+id/card2" android:text="@string/section2" android:layout_width="match_parent" android:layout_height="195dp" android:background="#9ccc65"> <ImageView android:id="@+id/card2image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="45dp" android:background="@drawable/atopiclayer"/> <TextView android:id="@+id/card2text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="22dp" android:layout_marginLeft="215dp" android:text="@string/section2"/> </FrameLayout> <FrameLayout android:id="@+id/card3" android:text="@string/section3" android:layout_width="match_parent" android:layout_height="195dp" android:background="#dce775"> <ImageView android:id="@+id/card3image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="45dp" android:background="@drawable/atopiclayer"/> <TextView android:id="@+id/card3text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="22dp" android:layout_marginLeft="215dp" android:text="@string/section3"/> </FrameLayout> <FrameLayout android:id="@+id/card4" android:text="@string/section4" android:layout_width="match_parent" android:layout_height="195dp" android:background="#bcaaa4"> <ImageView android:id="@+id/card4image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="45dp" android:background="@drawable/atopiclayer"/> <TextView android:id="@+id/card4text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="22dp" android:layout_marginLeft="215dp" android:text="@string/section4"/> </FrameLayout> <FrameLayout android:id="@+id/card5" android:text="@string/section5" android:layout_width="match_parent" android:layout_height="195dp" android:background="#ffd54f"> <ImageView android:id="@+id/card5image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="45dp" android:background="@drawable/atopiclayer"/> <TextView android:id="@+id/card5text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="22dp" android:layout_marginLeft="215dp" android:text="@string/section5"/> </FrameLayout> <FrameLayout android:id="@+id/card6" android:text="@string/section6" android:layout_width="match_parent" android:layout_height="195dp" android:background="#4db6ac"> <ImageView android:id="@+id/card6image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="45dp" android:background="@drawable/atopiclayer"/> <TextView android:id="@+id/card6text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#880e4f" android:textSize="22dp" android:layout_marginLeft="215dp" android:text="@string/section6"/> </FrameLayout> </LinearLayout> </ScrollView> __________________________________ aphotosquare1.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <size android:width="186dp" android:height="215dp"/> <solid android:color="#ffffff" /> <corners android:radius="22dp" /> </shape> _____________________________________ atopiclayer.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="15dp" android:left="15dp"/> <item android:drawable="@drawable/atopicimage" android:width="150dp" android:height="140dp" android:top="15dp" android:left="15dp" android:gravity="center"/> </layer-list> _____________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ScrollableTopicCards</string> <string name="section1">Section1 Card1\nThis app uses a FrameLayout to add sectioned views. You can use the card squares for Topics, Headlines, or Photos.\n The cards are elevated using Material Design\'s elevation attribute.</string> <string name="section2">Section2 Card2</string> <string name="section3">Section3 Card3</string> <string name="section4">Section4 Card4</string> <string name="section5">Section5 Card5</string> <string name="section6">Section6 Card6</string> </resources __________________________ AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.aac.topiccards" > <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" android:resizeableActivity = "true"> <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> ________________________________ build.gradle apply plugin: 'com.android.application' android { compileSdkVersion 21 buildToolsVersion "21.1.0" defaultConfig { applicationId "com.aac.topiccards" minSdkVersion 16 targetSdkVersion 28 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) }
SAVE IMAGE: Right Click and Save As
atopicimage.png


Copy, Paste image into res/drawable folder.

This free script provided by
JavaScript Kit