Next Tutorial
View Animator with Array

Prev Page
View All Tutorials

---

Simple Card View

---

This is the App Photo - Card View Simple

How To Use Card View

CardView is a layout widget 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 widget of Material Design, android version 5.0.1 - api 21, we need to code the Sdk target version of at least 21; and we need to add the required support library(dependency) for the CardView.

Adding these will make the cardview perform as intended and our app compatible across many android platforms. The most used android platforms as of this writing are: versions 7, 8, 9, 10, 11. 11 is api 30.

We must look at our build gradle page to see what the SDK min and Target versions are; and, if they are less than 21 for the target we have to update it to at least api 21 which is android platform 5.

Additional Reading at Android Developer Website:
CardView
Support Library packages
Material Design's Elevation

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

Name your app; use,

Card View Simple for the App Name and,
for the package name(next line) use:
com.aac.cardviewexample

The Coded Pages

For this app you will use these coded pages:

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

Image of CardView Layout.
Note: CardView with androidx code now best practice to use. See androidx code at Example Code section.

Attributes for CardView

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

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

Build Gradle, this page has the code for the Sdk min and target 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 ensure the Sdk target is at least version 21; as this is required for CardView widget which we are adding.

And, at dependencies; we must add our support library dependency for the CardView widget from Material Design.

Updated Support Libraries 2021 March

Android continually updates its' support libraries. For CardView dependency, it is now recommended to use androidx support libraries when creating new apps that include the CardView layout widget.

Androidx supersedes the compat support libraries. Although you can still use appcompat in code; after api 28 they won't be maintained. So, to make your app and code most uptodate using androidx is now best practice.
Here is the code to add in your build gradle at dependencies. You can just copy and paste from the Example Code section at the code for the build gradle page.
implementation 'androidx.cardview:cardview:1.0.0'

This next image shows the dependency at build gradle coded with 'compat support library' code
This has been replaced with androidx.
Note: the word 'compile' has been replaced - the word 'implementation' is now used instead.


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.

Manifest 1 manifest file; this page has many things necessary for our app like the 'intent filter', 'app theme', 'app icon',and is where you can code things you may require like 'internet permissions', 'individual page names'; and declare any new activities you add.

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.

FYI:
Features Material Design Support Library
Using the Design Support Library

EXAMPLE CODE - Code For This Tutorial

JUST copy the code for this tutorial App Name is 'Card View Simple' - located at AppProjects/CardViewSimple in AIDE, open the AIDE app, then open App Projects, THEN select the ' Card View Simple ', 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 CardViewSimple is there next to AppProjects like so: AppProjects/CardViewSimple , 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 ' CardViewSimple ' 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 - Card View Simple :
Copy Paste the Code
build.gradle apply plugin: 'com.android.application' android { compileSdkVersion 21 buildToolsVersion "21.1.0" defaultConfig { applicationId "com.aac.cardviewsimpleexample" 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']) implementation 'androidx.cardview:cardview:1.0.0' } _____________________________________ main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#efebe9" android:orientation="vertical">  <androidx.cardview.widget.CardView xmlns:card_view="https://schemas.android.com/apk/res-auto" android:layout_marginTop="25dp" android:layout_width="500dp" android:layout_height="250dp" android:layout_gravity="center"> <TextView android:id="@+id/textofcardview" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="15dp" android:textSize="25dp" android:textColor="#111666" android:text="This is a Card View" android:textStyle="bold"/> </androidx.cardview.widget.CardView> </LinearLayout> _____________________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">CardViewSimple</string> </resources> _____________________________________

This free script provided by
JavaScript Kit