This Tutorial Simple Card View
Prev Tutorial Photo Containers with Shadow
Next Tutorial View Animator
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.
Simple Card View
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 - Card View Simple
Where - How - Why To Use Card View
is a coding class introduced in android version 5.0.1, api 21. It is a new code class, also known as a UI widget. Using CardView
in your app allows you to create
cards to hold your photos, text, or both.
You can customize the cards as you like with these attributes: elevation, corner radius, content padding, background color. The elevation attribute will also cast a shadow.
The default cardview has a slight elevation with a minimal shadow.
CardView code class can also be used with another new code class, recyclerview.
This was also added in Material Design android version 5.0.1. Although a new
named class, it actually is similar to the older Listview code class, but with many improvements.
Basically it recycles the card to swap them thus improving
the performance of your app. Recyclerview is a little more complex to implement but it can be used for larger projects where you could have for example, a database
of information you want to have in your app.
CardView can be used by itself in your UI layout. You can size and customize the cards as you like, allowing you to have several cards per app page or only one or two per page.
You can also add a ScrollView to your cardview layout so that you can have as many cards as you want in your view; because the
scrollview allows for scrolling outside the physical boundry of your apps view.
For this tutorial, we are going to create a Simple Card View;
with one card. Because CardView is a code class of Material Design,
android version 5.0.1 - api 21, we need
to code the Sdk target version as 21; and we need to add the required support library for the CardView.
Adding these will make the cardview code and our app compatible across many android platforms. The most common android platforms as of this writing are: versions 4, 5, 6, 7.
The support library code and the Sdk version number code have to be added to our build.gradle file.
Additional Reading at Android Developer Website:
CardView and RecyclerView
Support Libraries Features Guide
Support Library packages
How To Add Support Library Code To build.gradle
Material Design's Elevation
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;
Card View Simple
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; this page has the code for our CardView layout, 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.
For the CardView we need to add the cardview widget code as shown in this photo. We added the width and height for our card. And, we used the TextView
element to add the text for our card.
Because we did not add
any customizable attributes like elevation, corner radius or content padding, the default cardview attributes are used, which gives the card a somewhat
elevated look with a slight shadow.
If you use the elevation attribute you can give the card a more elevated look, which will also cast a shadow.
Using the corner radius attribute you can add a more rounded look to the card corners.
Attributes for CardView
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.
1 strings.xml file, This file has the text for our card view. This page was created for you when you created your android template app; just replace code that's there with code
from our Example Code and save the page.
, this page has the code for the Sdk versions and our support libraries code which is added at the 'dependencies' section.
This file is created for us when we created our android gradle/java/xml template app.
We do need to add the Sdk target version 21 code and the min Sdk version 14, because we are using the elevation
code class from Material Design and the CardView
class from Material Design.
They are added at the 'Default Config' in the build.gradle file.
The SDK version 21 and min version 14 code has already been added for us in the build.gradle file at the 'defaultConfig' code section, so we don't have to add those,
however we do need to add our support library code for our CardView code class. We must add the support library code at the 'dependencies' section in our build.gradle file.
It is coded as:
The numbers at the end of the line of code v7:23.1.1 indicate the revision number, or the latest updated library for the cardview code class. You can
get the latest or most recent update at the android developer website.
Most recent CardView Revision number
For this app, the build.gradle file is located at; AppProjects/CardViewSimple/app/src.
Copy and replace the code from our Example Code Section with the code that is at the build.gradle file now, then save the page.
1 manifest file; this page has many things necessary for our app like the 'intent filter', 'app theme', and is where you can code things you may require like
'internet permissions', 'individual page names'.
This file is created whenever you make an android app. On this page you can also code the Sdk versions required
for your app build. These Sdk version numbers can also be coded in the build.gradle file of your app. Since these have already been coded for us in the
build.gradle file of this app, we don't need to add them in our androidmanifest.xml file. so we don't need to edit this page.
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 at least min Sdk version 14(for any added support libraries), and for target version 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 libraries' code for any
code class you add to your app that requires them like the CardView code class from Material Design.
And, Material Design is a good example because many code classes from material design require 'support libraries'. CardView, RecyclerView, SnackBar, Fab buttons,
are some of Material Design's UI widgets that require a support library.
How To add a 'support library' 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
Quoted From Android Developer Website
"Note that as the Design library depends on the Support v4 and AppCompat Support Libraries, those will be included automatically
when you add the Design library dependency.
We also took care that these new widgets are usable in the Android Studio Layout Editor’s Design view (find them under CustomView), giving you an easier way to preview some
of these new components"(1)