ListView with CardView and Open New Activity When items are clicked
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.
Adding ListView to our Activity
- Open activity_main.xml file, Copy and paste the code below.
1 2 3 4 5 6 7 8 |
<!--?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> |
Downloading Fruits Images used in this project
- Use the link below to download fruit images used used in this tutorial.
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.
- preview from row_data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--?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> |
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.
1 2 3 4 5 6 7 8 |
<!--?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> |
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.
- To receive data through intent we use.
- Open your ItemActivity, Copy and Paste the code below for receiving and displaying clicked item.
1 2 3 4 |
intent.putExtra("name",fruitNames[i]); intent.putExtra("image",fruitImages[i]); |
1 2 3 4 |
intent.getStringExtra("name"); intent.getIntExtra("image",0); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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.
- To download source code click here
- That’s all if you have a question or need help please comment below.
Post Views:
1,438
Related
Related Posts
-
Converting Website into Android App using WebView
No Comments | Apr 19, 2018 -
Android Custom ListView that Open New Activity to Display Clicked Item
No Comments | Apr 25, 2018 -
Room Database , ViewModel , LiveData, RecyclerView (MVVM) || Android Architecture Component
No Comments | May 30, 2020 -
Firebase Authentication Tutorial Login( kotlin )
No Comments | Jun 27, 2020