ListView with CardView and Open New Activity When items are clicked

Richard | April 30, 2018 | Android | No Comments

Hi, Welcome to another ListView tutorial. In this Tutorial we shall develop a custom listview with cardview, imageview, text and Open New Activity When items are clicked. The items in this tutorial will be images and names of various fruits. When an item is clicked we shall start another activity which will display image and name of the clicked fruit item.

Let’s get started with coding

Contents

1 Create a new Android studio project
2 Adding CardView to Our project
3 Adding ListView to our Activity
4 Downloading Fruits Images used in this project
5 Creating Layout Resource File for holding listview data
6 Creating activity to receive and display clicked item
7 Receiving and displaying clicked items
8 Initializing ListView and Setting ListView Data
9 Running our app
10 Share this:
11 Related

Create a new Android studio project

Open your android studio click File => New Project and give it a name in this tutorial i named it ListViewCard.
Click next select Empty Activity => Finish.

Adding CardView to Our project

Click File => Project Structure => App => Dependency => + => Library Dependency => Search for card and then add CardView as Shown below.

Custom ListView with CardView

Adding ListView to our Activity

Open activity_main.xml file, Copy and paste the code below.


<!--?xml version="1.0" encoding="utf-8"?-->
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.larntech.listviewcard.MainActivity">

 	 	<listview android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content"></listview>

</relativelayout>

</relativelayout>

Downloading Fruits Images used in this project

Use the link below to download fruit images used used in this tutorial.

download images

Creating Layout Resource File for holding listview data

Right click layout => New => Layout Resource File and name it row_data.
Copy and Paste the code below to your row_data.xml file.


<!--?xml version="1.0" encoding="utf-8"?-->
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">

  <android.support.v7.widget.cardview android:layout_width="match_parent" android:layout_margintop="2dp" android:layout_height="wrap_content">
    <relativelayout android:id="@+id/listviewdata" android:layout_width="match_parent" android:padding="10dp" android:layout_height="wrap_content">

        <textview android:id="@+id/fruits" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginend="44dp" android:layout_tostartof="@+id/images" android:text="Apple" android:textcolor="#000" android:textsize="25dp">

        <imageview android:id="@+id/images" android:layout_width="60dp" android:layout_height="60dp" android:layout_alignparentend="true" android:layout_centervertical="true" android:layout_marginend="27dp" android:src="@drawable/apple">
    </imageview></textview></relativelayout>
  </android.support.v7.widget.cardview>
</relativelayout>

<android.support.v7.widget.cardview android:layout_width="match_parent" android:layout_margintop="2dp" android:layout_height="wrap_content">

</imageview></textview></relativelayout>

</android.support.v7.widget.cardview>

</relativelayout>

preview from row_data.

Custom ListView with CardView, ImageView, Text and Open New Activity When items are clicked

Creating activity to receive and display clicked item

Right click on Layout => New => Activity => Empty Activity => name it in this case i have named it activity_item.
Open your activity_item, Copy and Paste the code below.


<!--?xml version="1.0" encoding="utf-8"?-->
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.larntech.listviewcard.ItemActivity">
    <textview android:id="@+id/listdata" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_margintop="105dp" android:text="Apple" android:textcolor="#000" android:textsize="30dp">

    <imageview android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/apple" android:layout_centerhorizontal="true" android:layout_below="@+id/listdata" android:layout_margintop="27dp">
</imageview></textview></relativelayout>

</imageview></textview></relativelayout>

Receiving and displaying clicked items

We are going to use intents to send and receive clicked item.
To send data between activities through intent we use.


intent.putExtra("name",fruitNames[i]);
intent.putExtra("image",fruitImages[i]);

intent.putExtra("name",fruitNames[i]);

intent.putExtra("image",fruitImages[i]);

To receive data through intent we use.


intent.getStringExtra("name");
intent.getIntExtra("image",0);

intent.getStringExtra("name");

intent.getIntExtra("image",0);

Open your ItemActivity, Copy and Paste the code below for receiving and displaying clicked item.


package com.example.larntech.listviewcard;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;

public class ItemActivity extends AppCompatActivity {
    TextView listdata;
    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_item);

        listdata = findViewById(R.id.listdata);
        imageView = findViewById(R.id.imageView);
        Intent intent = getIntent();
        String receivedName =  intent.getStringExtra("name");
        int receivedImage = intent.getIntExtra("image",0);

        listdata.setText(receivedName);
        imageView.setImageResource(receivedImage);
        //enable back Button
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    //getting back to listview
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            onBackPressed();
        }
        return super.onOptionsItemSelected(item);

    }
    @Override
    public void onBackPressed() {
        super.onBackPressed();
    }
}

package com.example.larntech.listviewcard;

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.MenuItem;

import android.widget.ImageView;

import android.widget.TextView;

public class ItemActivity extends AppCompatActivity {

TextView listdata;

ImageView imageView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_item);

listdata = findViewById(R.id.listdata);

imageView = findViewById(R.id.imageView);

Intent intent = getIntent();

String receivedName = intent.getStringExtra("name");

int receivedImage = intent.getIntExtra("image",0);

listdata.setText(receivedName);

imageView.setImageResource(receivedImage);

//enable back Button

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

}

//getting back to listview

@Override

public boolean onOptionsItemSelected(MenuItem item) {

if (item.getItemId() == android.R.id.home) {

onBackPressed();

}

return super.onOptionsItemSelected(item);

}

@Override

public void onBackPressed() {

super.onBackPressed();

}

Initializing ListView and Setting ListView Data

Open your MainActivity.java class
We shall start with initializing our listview and then set data list view data.
To set list view data we need to create custom Adapter that extends base Adapter.
Copy and Paste the code below in your MainActivity.java.


package com.example.larntech.listviewcard;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    ListView listView;

    String[] fruitNames = {"Apple","Orange","Kiwi","Passion","Banana"};
    int[] fruitImages = {R.drawable.apple,R.drawable.oranges,R.drawable.kiwi,R.drawable.watermelon,R.drawable.banana};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //finding listview
        listView = findViewById(R.id.listview);

        CustomAdapter customAdapter = new CustomAdapter();
        listView.setAdapter(customAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<!--?--> adapterView, View view, int i, long l) {
//               Toast.makeText(getApplicationContext(),fruitNames[i],Toast.LENGTH_LONG).show();
                Intent intent = new Intent(getApplicationContext(),ItemActivity.class);
                intent.putExtra("name",fruitNames[i]);
                intent.putExtra("image",fruitImages[i]);
                startActivity(intent);

            }
        });


    }

    private class CustomAdapter extends BaseAdapter {
        @Override
        public int getCount() {
            return fruitImages.length;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            View view1 = getLayoutInflater().inflate(R.layout.row_data,null);
            //getting view in row_data
            TextView name = view1.findViewById(R.id.fruits);
            ImageView image = view1.findViewById(R.id.images);

            name.setText(fruitNames[i]);
            image.setImageResource(fruitImages[i]);
            return view1;
        }
    }
}

package com.example.larntech.listviewcard;

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

ListView listView;

String[] fruitNames = {"Apple","Orange","Kiwi","Passion","Banana"};

int[] fruitImages = {R.drawable.apple,R.drawable.oranges,R.drawable.kiwi,R.drawable.watermelon,R.drawable.banana};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//finding listview

listView = findViewById(R.id.listview);

CustomAdapter customAdapter = new CustomAdapter();

listView.setAdapter(customAdapter);

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView adapterView, View view, int i, long l) {

// Toast.makeText(getApplicationContext(),fruitNames[i],Toast.LENGTH_LONG).show();

Intent intent = new Intent(getApplicationContext(),ItemActivity.class);

intent.putExtra("name",fruitNames[i]);

intent.putExtra("image",fruitImages[i]);

startActivity(intent);

}

});

}

private class CustomAdapter extends BaseAdapter {

@Override

public int getCount() {

return fruitImages.length;

}

@Override

public Object getItem(int i) {

return null;

}

@Override

public long getItemId(int i) {

return 0;

}

@Override

public View getView(int i, View view, ViewGroup viewGroup) {

View view1 = getLayoutInflater().inflate(R.layout.row_data,null);

//getting view in row_data

TextView name = view1.findViewById(R.id.fruits);

ImageView image = view1.findViewById(R.id.images);

name.setText(fruitNames[i]);

image.setImageResource(fruitImages[i]);

return view1;

}

Running our app

Run your app and you will see the output below.

Custom ListView with CardView, ImageView, Text and Open New Activity When items are clicked

To download source code click here
That’s all if you have a question or need help please comment below.

LarnTech

ListView with CardView and Open New Activity When items are clicked

Create a new Android studio project

Adding CardView to Our project

Adding ListView to our Activity

Downloading Fruits Images used in this project

Creating Layout Resource File for holding listview data

Creating activity to receive and display clicked item

Receiving and displaying clicked items

Initializing ListView and Setting ListView Data

Running our app

Related

About The Author

Richard

Create a new Android studio project

Adding CardView to Our project

Adding ListView to our Activity

Downloading Fruits Images used in this project

Creating Layout Resource File for holding listview data

Creating activity to receive and display clicked item

Receiving and displaying clicked items

Initializing ListView and Setting ListView Data

Running our app

Share this:

Related

Related Posts

About The Author

Richard