how can I make such dialog in android?

Question

I would like to implement dialog such this one

User hits the button "Icon", this dialog opens, user chooses appropriate icon by pressing on it, then dialog closes and returns to me id of this icon.

How could I do it?

Thanks.

Answer 1

You want to create an alertDialog with a custom grid in it. In my answer I assume that OP wanted to know how to create such a dialog in general. Therefore I am using a normal style. If you want to use a dark style, create a custom styling and use it in your AlertDialog.Builder:

AlertDialog.Builder builder = new AlertDialog.Builder(context, <YourCustomStyle>);

Result:

1. Create the layout for a single entry. Since OP is only showing icons, I only use an ImageView. If the icon should for example have text under it, you simply could create a TextView below it and fill it with your text.

view_icon_chooser_entry.xml:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<ImageView
    android:id="@+id/image_choose_icon_entry"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:contentDescription="@null"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

2. Create an adapter that can deal with the data and create the layout. In my example I am extending from a BaseAdapter since this is quite easy to do. A little bit more modern would be to use a RecyclerView and create your own custom adapter for it.

AlertDialogImageAdapter.java:

public class AlertDialogImageAdapter extends BaseAdapter {
    private LayoutInflater layoutInflater;

    AlertDialogImageAdapter(Context context) {
        layoutInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return iconList.length;
    }

    @Override
    public Object getItem(int position) {
        return iconList[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @SuppressLint("InflateParams")
    @NonNull
    public View getView(int position, View convertView, @NonNull ViewGroup parent) {
        AlertDialogViewHolder alertDialogViewHolder;

        if (convertView == null) {
            // This is an alertDialog, therefore it has no root
            convertView = layoutInflater.inflate(R.layout.view_icon_chooser_entry, null);

            DisplayMetrics metrics = convertView.getResources().getDisplayMetrics();
            int screenWidth = metrics.widthPixels;

            convertView.setLayoutParams(new GridView.LayoutParams(screenWidth / 6, screenWidth / 6));
            alertDialogViewHolder = new AlertDialogViewHolder();
            alertDialogViewHolder.icon = convertView.findViewById(R.id.image_choose_icon_entry);
            convertView.setTag(alertDialogViewHolder);
        } else {
            alertDialogViewHolder = (AlertDialogViewHolder) convertView.getTag();
        }

        alertDialogViewHolder.icon.setAdjustViewBounds(true);
        alertDialogViewHolder.icon.setScaleType(ImageView.ScaleType.CENTER_CROP);
        alertDialogViewHolder.icon.setPadding(8, 8, 8, 8);
        alertDialogViewHolder.icon.setImageResource(iconList[position]);
        return convertView;
    }

    // This is your source for your icons, fill it with your own
    private Integer[] iconList = {
            android.R.drawable.ic_media_play, android.R.drawable.ic_media_pause,
            android.R.drawable.ic_delete, android.R.drawable.ic_btn_speak_now,
            android.R.drawable.ic_media_previous, android.R.drawable.ic_media_next,
            android.R.drawable.ic_menu_my_calendar, android.R.drawable.ic_menu_agenda,
            android.R.drawable.ic_media_play, android.R.drawable.ic_media_pause,
            android.R.drawable.ic_delete, android.R.drawable.ic_btn_speak_now,
            android.R.drawable.ic_media_previous, android.R.drawable.ic_media_next,
            android.R.drawable.ic_menu_my_calendar, android.R.drawable.ic_menu_agenda,
            android.R.drawable.ic_media_play, android.R.drawable.ic_media_pause,
            android.R.drawable.ic_delete, android.R.drawable.ic_btn_speak_now,
            android.R.drawable.ic_media_previous, android.R.drawable.ic_media_next,
            android.R.drawable.ic_menu_my_calendar, android.R.drawable.ic_menu_agenda
    };

    private class AlertDialogViewHolder {
        ImageView icon;
    }
}

3. Then, place a method to create a new AlertDialog with your custom AlertDialogImageAdapterand use a grid for the layout. You can change how many columns you have with setNumColumns(4).

Put this method where you want to show the alert dialog and simply call it:

private void showAlertDialog(Context context) {
    GridView gridView = new GridView(context);
    gridView.setAdapter(new AlertDialogImageAdapter(context));
    gridView.setNumColumns(4);
    gridView.setGravity(Gravity.CENTER);
    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            // TODO: Implement
            Toast.makeText(view.getContext(), "Clicked position is: " + position, Toast.LENGTH_LONG).show();
        }
    });

    AlertDialog.Builder builder = new AlertDialog.Builder(context);
    builder.setView(gridView);
    builder.setTitle(R.string.title_chose_icon);
    builder.show();
}

Answer 2

Have a look at the fragments section in the API Demo app. There are some dialogs you can use

Answer 3

I will suggest you to "imitate" the dialog and not using the android one. For that, you can create a second layout with the dark grey background and all your clickable icons inside. When you will call the dialog, set the dimming to the main layout and put the one with the icons on the top.

I am using this in my app. I will provide you some code in 10min.