Android Custom ListView that Open New Activity to Display Clicked Item

Richard | April 25, 2018 | Android | No Comments

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.

Android ListView OnItemClick Open New Activity With Clicked Item

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 Share this:
10 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, Copy and paste the code below.


<!--?xml version=" 1.0"="" encoding="utf-8" ?--=""><android.support.constraint.constraintlayout 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=".MainActivity">

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

</android.support.constraint.constraintlayout>

<!--?xml version=" 1.0"="" encoding="utf-8" ?--=""><android.support.constraint.constraintlayout 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=".MainActivity">

</Listview>

</android.support.constraint.constraintlayout>

Preview of activity_main file

Downloading Fruit image

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

download images

Creating Resource Layout 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">

<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"/>

</Relativelayout>
</Relativelayout>

<!--?xml version=" 1.0"="" encoding="utf-8" ?--="">

</Relativelayout>

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.


<!--?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.listviewnewactivity.ListdataActivity">

<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="100dp" android:layout_height="100dp" android:src="@drawable/apple" android:layout_centerhorizontal="true" android:layout_below="@+id/listdata" android:layout_margintop="27dp"/>

</Relativelayout>

<!--?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.listviewnewactivity.ListdataActivity">

</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 through intent we use


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

intent.getStringExtra("name");

intent.getIntExtra("image",0);

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


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();
    }
}

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.


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;
        }
    }
}

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.

Click here to download source code

That’s all if you have a question or need help please comment below.

Tags:Android custom listview, Android ListView With Image, ListView open new activity, listview pass data between activities, Text and OnItemClickListener

LarnTech

Android Custom ListView that Open New Activity to Display Clicked Item

Creating a new android studio project

Adding ListView to our Activity

Downloading Fruit image

Creating Resource Layout 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

Creating a new android studio project

Adding ListView to our Activity

Downloading Fruit image

Creating Resource Layout 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