Android Tutorials 2022 - Cardview Electric Cars

Develop Android Apps, how to code a Hyperlink

New Tutorial 2022

Android - Cardview Example - Electric Cars Canada USA

Added July 2022

For this tutorial, we are going to learn how to add a Cardview design with two cards that when clicked goto two individual screens: 'Electric Cars Canada', and 'Electric Cars USA'. We must add the Cardview widget to our homepage layout, and include the image and text elements for each card we want to add.

For the card image, i resized an electric car image in Gimp(Free editor), then added it as the drawable image in each cardview.

We also add the required dependency for the Cardview widget in our build gradle at dependencies as shown in this image. We are including the cardview library from Androidx and therefore we must also code our target SDK at 28. Androidx is the most uptodate library.

Android Tutorial, Androidx dependency for Cardview widget

Android Tutorial, Androidx dependency for Cardview widget

We are going to create a new app for this tutorial, and name is - Cardview Electric Cars

Android Tutorial, Cardview with Electric Cars

Creating Our New App

Open AIDE, Select New Project, from the left menu, or center menu hierachy of files; and do the following:

Select
Create an Android app, choose java xml programming language

Create an Android app, choose java xml programming language

choose NEW ANDROID APP(Gradle/Android SDK/java/xml) if your using the newest version of AIDE.

Choose HELLO WORLD example app template(java/xml);if your using an older version of AIDE,

For app name; type 'Cardview Electric Cars'

For app package name type: com.aac.cardview_example

Click Create

Your new app is now created for you - named 'Cardview Electric Cars'. For now, you will have the 'little green Android image' as your app icon.
This app has a customized app icon; you can download it at the Example Code section and the other app images also.

Once you add your apps' icon image and run your app with the updated and new pages you create, and the apps' other images; you'll see the customized 'App Icon' instead of little green Android icon.
Note: Not all tutorials have a customized icon or require new pages to be created.

AIDE automatically opens your new app in the editor for you.

Where Code is Coded

For our Cardview - Electric Cars, app, we must edit and create new screens. Our already created main.xml, and the MainActivity.java aka our java class, must be edited. Just copy paste the code from Example Code section for these two pages and Save each page.

Once all pages are edited and new pages created, and images added to the 'drawable', and 'drawable-hdpi' folders, you can Run your app to view the changes.

We must create new screens;

screen_one.xml
screen_two.xml

and, java pages for those;

FirstScreen.java
SecondScreen.java

Each java class must include the code to 'getActionBar'. Then once you include it you can customize the app bar on screen one and screen two using the code as shown in this image.

Because we are adding a country flag to screen one and screen two, FirstScreen.java, and SecondScreen.java are coded with the getactionbar method and the code to customize them.

FirstScreen.java
image of get action bar for customizing appbar

image of get action bar for customizing appbar

Also note, we included the 'import statement' for the getActionBar method.
import android.app.ActionBar;
If we do not include it, we would get an error message when trying to compile our code(Run the app).

Images- Screen one and screen two with customized app bar.

cardview android example

examole of cardview with customized appbar

Images must be added for this app. Save them at the Example Code section, then copy paste them to the appropriate folders.
Icon and the Cardview images are added to 'res/drawable-hdpi' folder, and the country flags are added to 'res/drawable' folder. This folder is not created by default when you created your app. We must create the folder, then add the Canada and USA flags to it as shown in this image.

Create res/drawable
image of drawable folder AIDE

All code for this tutorial is at the Example Code section on this page. Only copy and replace code for the pages mentioned that require updating.
At Example Code section on this page; any page notated as 'no edit required', means you dont have to copy and paste that page - added only for you to view.

TIPS

Navigating The App Project Hierachy

To view A FILE do either: from right menu choose FILES or GOTO, this will show the apps files along the top of editor, dropdown, and left side menu. After editing a file, SAVE it, right side menu, choose SAVE.

Creating Pages

Check for the filename extensions of page your creating. If for example, your creating a new Java page, (java folder)you want to see pages already created in that folder that have the .java file extension. Click 'create new java class' to create your page.

For xml files, you must create these in the 'res/layout' folder of your app project. Click 'add new xml file', to create your page.

Additional Reading on coding, at Android Developer website
Cardview - Android Developer

In Summary,
App Name is 'Cardview Electric Cars' - located at AppProjects/ in AIDE; OPEN the AIDE app, then open App Projects, THEN select the 'Cardview ElectricCars', app from your files hierachy(left menu); then DOUBLE CLICK on any file from the app, like strings.xml, to open it in AIDE.

Make sure at top of page, the app name 'Cardview Electric Cars' is there next to AppProjects like so: AppProjects/Cardview ElectricCars, 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, to Open your app.

You can open the app Simply by Clicking on the Android little green App Icon,with the wording 'Cardview Electric Cars' 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 - Code For This Tutorial.

JUST copy the code for this tutorial from the Example Code in this section.

Example Code:
Copy Paste the Code

//we must edit build gradle add SDK target and the dependency code for cardview
Just copy paste to replace the code thats there now or if you prefer just copy paste whats required

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.0"

defaultConfig {
        applicationId "com.aac.cardview_example"
        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'

}

__________

//we edit this page Add the app icon name and include code for FirstScreen.java and SecondScreen.java at Activity element

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.aac.cardview_example" >

</manifest>
___________

//this page must be created Just copy paste the code then Save the page

screen_one.xml

</LinearLayout>

____________

//this page must be created

screen_two.xml

android:orientation="vertical">

</LinearLayout>

_____________

//this page must be edited This has the layout design for our Cardview

main.xml

<androidx.cardview.widget.CardView

android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginTop ="5dp"
		
		android:focusable="true"
		android:scrollbars="vertical"
		app:cardElevation ="20dp"
		app:cardCornerRadius="12dp"
		
	    app:contentPadding="3dp">

___________
//this page must be edited  First we declare the variables for our cards as buttons  We add the onclicklisteners for each card and set the intents also

MainActivity.java

package com.aac.cardview_example;

import android.app.*;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.content.Intent;

public class MainActivity extends Activity 
{
	ImageView b1, b2;

@Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

setContentView(R.layout.main);

b1 = (ImageView) findViewById(R.id.image1);
		b1.setOnClickListener(new View.OnClickListener()
			{
				@Override public void onClick(View view)
				{
					Intent intent = new Intent(MainActivity.this, FirstScreen.class);
					startActivity(intent);
				}});

b2 = (ImageView) findViewById(R.id.image2);
		b2.setOnClickListener(new View.OnClickListener()
			{
				@Override public void onClick(View view)
				{
					Intent intent = new Intent(MainActivity.this, SecondScreen.class);
					startActivity(intent);
				}});

}
}

____________

//this page must be created We include the getactionbar method so we can customize our app bar with an image and text

FirstScreen.java

package com.aac.cardview_example;

import android.app.*;
import android.app.Application;
import android.view.View;
import android.os.Bundle;
import android.app.ActionBar;
import android.app.Activity;

public class FirstScreen extends Activity

{
	@Override protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.screen_one);
		
		
		ActionBar actionBar = getActionBar();
		
		
		//Hide Actionbar icon
		actionBar.setDisplayShowHomeEnabled(true);

// Hide Actionbar Title
		actionBar.setDisplayShowTitleEnabled(true);

//change title name
		actionBar.setTitle("Canada");

getActionBar().setIcon(R.drawable.canada_flag160);
		
		actionBar.setElevation(35);
		
		
	}}
	____________
	
	//this page must be created
	
	SecondScreen.java
	
	
	package com.aac.cardview_example;

import android.app.*;
import android.app.Application;
import android.view.View;
import android.os.Bundle;
import android.app.Activity;

public class SecondScreen extends Activity

{
	@Override protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.screen_two);
		
		
		ActionBar actionBar = getActionBar();

//Hide Actionbar icon
		actionBar.setDisplayShowHomeEnabled(true);

// Hide Actionbar Title
		actionBar.setDisplayShowTitleEnabled(true);

//change title name
		actionBar.setTitle("U.S.A");

getActionBar().setIcon(R.drawable.usa_flag160);
		
		actionBar.setElevation(35);
		
	}}
	_____________
	
	//app name only on this page No edit required
	
	strings.xml
	
	
	<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">CardView ElectricCars</string>

</resources>

____________
	
	End of App Code
	
	
	Download the App Images

App Images; Save as Named

This app has 3 images, and 1 app icon image.
Unless stated otherwise, Save each image as named to the res/drawable-hdpi folder of your app project -
SAVE IMAGE(S): Save As

app icon is:

electric_car400.jpg

card image is:

card_image.jpg

Save these next two images to res/drawable folder. Because these are the images in our customized appbar they goto the 'Drawable' folder.

canada_flag160.png

usa_flag160.png

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas