Android Custom ListView that Open New Activity to Display Clicked Item
In this tutorial we shall learn how to create android custom listview that Open new activity to display clicked item. Our ListView will have Image,Text and OnItemClickListener to listen when an item is clicked then open another activity and display clicked items. The list will consist of images and names of various fruits, When a list item is clicked another activity opens and display both image and name of the clicked item as shown below.
-
- You can also see in the embedded video below how to start new activity when ListView items are clicked.
-
- Let’s get started with coding.
Contents
- 1 Creating a new android studio project
- 2 Adding ListView to our Activity
- 3 Downloading Fruit image
- 4 Creating Resource Layout File for holding listview data
- 5 Creating activity to receive and display clicked item
- 6 Receiving and displaying clicked items
- 7 Initializing ListView and Setting ListView Data
- 8 Running our app
- 9 GET SOURCE CODE FOR ONLY $5
- 10 Share this:
- 11 Related
Creating a new android studio project
-
- Open your android studio click File => New Project and give it a name in this tutorial i named it listviewnewactivity.
- Click next select Empty activity => finish.
Adding ListView to our Activity
- Open activity_main.xml file add listview
- Preview of activity_main file
Downloading Fruit image
- Use the link below to download fruit images used used in this tutorial
Creating Resource Layout File for holding listview data
- Right click layout => New => Layout Resource File and name it row_data.
- Preview of row_data file show below.
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_listdata
open your activity_listdata, Copy and Paste the code below.
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
|
1 2 3 4 |
intent.putExtra("name",fruitNames[i]); intent.putExtra("image",fruitImages[i]); |
- To receive through intent we use
|
1 2 3 4 |
intent.getStringExtra("name"); intent.getIntExtra("image",0); |
Open your ListdataActivity, Copy and Paste the code below for receiving and displaying clicked item.
|
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 |
package com.example.larntech.listviewnewactivity; 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 ListdataActivity extends AppCompatActivity { TextView listdata; ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_listdata); 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 |
package com.example.larntech.listviewnewactivity; 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(),ListdataActivity.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.
- Click on one of the item and you will see another activity with name and image of clicked item.
- That’s all if you have a question or need help please comment below.
