Android Custom Dialog With ListView Tutorial welcomes you.
In this example, we will create a custom dialog with listview.
We will also implement onitemclicklistener for the dialog listview.
Developers use dialog with listview when they want to have a quick selection from the user. For example, to select the city or country of the user.
Alert dialog with listview can be used as an alternative to spinner, where user can select any item from several options.
Outcome of listview dialog
Step 1. Two XML files
First of all, make a new project in android studio.
Here, select “Empty activity” as the default template so that we can have clean work space without any pre-written code lines.
We need two XML files separately. One is for custom dialog and another is for listview layout.
Create a new XML file under res->layout directory and give it a name like dialog_listview.xml
Add the following source code in dialog_listview.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="Below is ListView in Custom dialog"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/listview">
</ListView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btndialog"
android:text="Cancel"/>
</LinearLayout>
Above file create the view layout for our custom dialog.
It contains one text view, one list view and one button.
We will inflate this file in the JAVA class to create custom dialog view.
Now time create another XML file named list_item.xml under same directory.
Following is the code block for list_item.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/tv"
android:textColor="#fff"
android:paddingLeft="15dp"
android:gravity="center_vertical"
android:background="@color/colorAccent"
android:textSize="20sp"
android:text="hwllo"/>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#000"/>
</LinearLayout>
ListView in custom dialog will have some row items. Every row items will create it’s look and feel with help of above file.
Above file contains one text view and one view. So every row of listview will also contain them with their background colors.
Step 2. Main File codes
When you have created a new project, system must have created two files automatically.
One is activity_main.xml and another is MainActivity.java
Write down the following code snippet in activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Open Custom Dialog With LISTView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textview"
android:padding="10dp"
android:layout_marginTop="20dp"
android:textColor="#000"
android:textSize="25sp"
android:text="Select your car please !"
/>
</LinearLayout>
It contains two UI widgets. One is Button and another is text view.
When the user click the button, we will open the custom dialog.
Text view will hold the name of the selected car.
Now in MainActivity.java file, add the below code structure
import android.app.Activity;
import android.app.Dialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView textView;
private Button dialogBtn;
private String[] myImageNameList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = findViewById(R.id.textview);
dialogBtn = findViewById(R.id.btn);
dialogBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this);
}
});
}
public void showDialog(Activity activity){
final Dialog dialog = new Dialog(activity);
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_listview);
Button btndialog = (Button) dialog.findViewById(R.id.btndialog);
btndialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
ListView listView = (ListView) dialog.findViewById(R.id.listview);
ArrayAdapter arrayAdapter = new ArrayAdapter(this,R.layout.list_item, R.id.tv, myImageNameList);
listView.setAdapter(arrayAdapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textView.setText("You have clicked : "+myImageNameList[position]);
dialog.dismiss();
}
});
dialog.show();
}
}
Looking above code confidently
Let us understand the logic behind the code of main activity.
First of all, read the below one
private TextView textView;
private Button dialogBtn;
private String[] myImageNameList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
First line is making the object of text view class. Second line will help us to use button in our project.
Last line is making one string array. This string array contain the names of the cars.
We will fill the listview with these car names.
In onCreate() method, compiler will first use findViewById() method to find textview and button.
On click method for button is like below
dialogBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this);
}
});
As per the above code, compiler will call showDialog() method when the user touches the button.
Code for showDialog() method is as the below
public void showDialog(Activity activity){
final Dialog dialog = new Dialog(activity);
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_listview);
Button btndialog = (Button) dialog.findViewById(R.id.btndialog);
btndialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
ListView listView = (ListView) dialog.findViewById(R.id.listview);
ArrayAdapter arrayAdapter = new ArrayAdapter(this,R.layout.list_item, R.id.tv, myImageNameList);
listView.setAdapter(arrayAdapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textView.setText("You have clicked : "+myImageNameList[position]);
dialog.dismiss();
}
});
dialog.show();
}
First of all, compiler will create the Dialog object.
Then it will set it as non cancelable. It means that if user touches outside the dialog, system will pop down the dialog.
.setContentView() method will give the look and feel to our custom dialog. File dialog_listview.xml will help us in this task.
Then compiler will find the Cancel button using it’s id and will implement is’s click event.
Then compiler will find the listview.
After this, it will create the array adapter to populate the listview.
Here, it is using string array variable to show them (car names) in listview.
On click event of list view is also written. When the user clicks the listview, compiler will set the value of selected car name into text view.
Download Code for android custom dialog with listview
https://github.com/1hardikparsania/android-custom-dialog-with-listview