How to display first character of each name in a list view in alert dialog as a circular icon?

Question

I've tried as explined below, How can I display a list view in an Android Alert Dialog?.

But unable to get the alert dialog as shown below:

Im able to create a dialog with list of names. But not able to get a circular view with characters of first letter in first name and last name.

Answer 1

you can try this, add new drawable

my_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ffffff" />
    <stroke

        android:width="1dp"
        android:color="#ccc" />

</shape>

and add this to your customized view:

<TextView
       android:id="@+id/my_letter"
       android:textColor="#26ae90"
       android:textSize="50dp"
       android:text="A"
       android:textAlignment="center"
       android:layout_width="60dp"
       android:layout_height="60dp"
       android:background="@drawable/my_shape"/>

then use this code at your getview() methode of the adapter

my_letter.setText(String.valueOf(name.getText().toString().charAt(0));

Answer 2

1. inside the custom adapter you can use this

   image_view_myRoudnIcon.setText(mylist.get(position).getName().substring(0, 1)); text_view_name.setText(mylist.get(position).getName());

2. use this code to get round image view in xml

   ;

Answer 3

I have created this only for answer this problem it works 10000% Please follow the step below.

work flow.

1. Method to create dialog and show.

   private void showDialog(){
   AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(MainActivity.this);
   dialogBuilder.setIcon(R.drawable.ic_launcher); 
   dialogBuilder.setTitle("Friends List");
   
   ArrayList<DialogModel> list = new ArrayList<DialogModel>();
   list.add(new DialogModel("Rafique"));
   list.add(new DialogModel("Abedin"));
   list.add(new DialogModel("Masud"));
   list.add(new DialogModel("Younus"));
   
   DialogAdapter dialogAdapter = new DialogAdapter(this, list);
   
   dialogBuilder.setNegativeButton("cancel",new DialogInterface.OnClickListener() {
               @Override
               public void onClick(DialogInterface dialog, int which) {
                   dialog.dismiss();
               }
   });
   //seting adapter to dialog
   dialogBuilder.setAdapter(dialogAdapter,null);
   //show dialog
   dialogBuilder.show();
   }
   

2. Code to create adapter for dialog

   private class DialogAdapter extends ArrayAdapter<DialogModel>{
   
   ArrayList<DialogModel> list;
   
   public DialogAdapter(Context context,  ArrayList<DialogModel> objects) {
       super(context, R.layout.list, objects);
       this.list = objects;
   }
   
   private class ViewHolder{
       Button icon;
       TextView name;
   }
   
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
   
       ViewHolder viewHolder;
   
       if (convertView == null) {
           viewHolder = new ViewHolder();
           LayoutInflater inflater = LayoutInflater.from(getContext());
           convertView = inflater.inflate(R.layout.list, parent, false);
           viewHolder.icon = (Button) convertView.findViewById(R.id.round_icon);
           viewHolder.name = (TextView) convertView.findViewById(R.id.tv_name);
              convertView.setTag(viewHolder);
        } else {
              viewHolder = (ViewHolder) convertView.getTag();
        }
       viewHolder.icon.setText(list.get(position).getName().substring(0, 1));
       viewHolder.name.setText(list.get(position).getName());
   
        return convertView;
     }
   
     }
   

3. Model of the adapter

    private class DialogModel{
   
   private String name;
   
   DialogModel(String name){
       this.name = name;
   }
   
   public String getName() {
       return name;
   }
   }
   

4. XML for adapter layout
   create a layout list.xml

   <Button  android:id="@+id/round_icon"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" 
            android:background="@drawable/round_buttin" 
            android:text="B" android:layout_marginLeft="5dp"/> 
   <TextView android:id="@+id/tv_name" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="Name" 
            android:textAppearance="?android:attr/textAppearanceLarge" 
            android:layout_marginLeft="10dp"/>
   

5. xml for round icon for the code portion android:background="@drawable/round_button"
   create round_button.xml
   and put it in drawable folder

   <?xml version="1.0" encoding="utf-8"?> 
    <selector xmlns:android="schemas.android.com/apk/res/android">;   
         <item android:state_pressed="false"> 
            <shape android:shape="oval"> 
               <solid android:color="#fa09ad"/> 
            </shape> 
         </item> 
         <item android:state_pressed="true"> 
            <shape android:shape="oval"> 
               <solid android:color="#c20586"/> 
            </shape> 
         </item>     
    </selector>
   

if any problem you are free to ask.