Как создать пользовательский диалог с cardview в Android

#android #gridview #android-alertdialog

#Android #gridview #android-alertdialog

Вопрос:

Я хочу создать пользовательский диалог в своем приложении с помощью cardview. Поискал в Google и реализовал то же самое, но не получил ожидаемого результата. Итак, кто-нибудь может мне помочь в его реализации.

Результат, который я получаю

Результат

Это мой category.xml файл

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@ id/layout_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
>
<RelativeLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingTop="3dip" >
    <ImageView android:id="@ id/close"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:layout_alignParentRight="true"
        android:layout_marginRight="3dp"
        android:src="@drawable/ic_cancel_black_24dp"
        />
    <TextView android:id="@ id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="3dp"
        android:textColor="#FFF"
        android:textSize="20dip"
        android:text="Choose Categories"/>
</RelativeLayout>

<GridView
    android:id="@ id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:numColumns="3"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"/>
  

и это мой custom.xml файл

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
>
<ImageView android:id="@ id/categoryImage"
    android:layout_width="50dip"
    android:layout_height="50dip"
    android:layout_alignParentRight="true"
    android:layout_marginRight="3dp"
    android:src="@drawable/ic_cancel_black_24dp"/>
<TextView android:id="@ id/categoryText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="safsafsa"
    android:layout_centerHorizontal="true"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="3dp"
    />
  

И это мой MainActivity.java

 public class MainActivity extends AppCompatActivity {

public final int CATEGORY_ID =0;
private Context mContext;
Dialog dialog;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Button button = (Button)findViewById(R.id.button1);
    button.setOnClickListener(new Button.OnClickListener(){
        public void onClick(View v)
        {
            showDialog(CATEGORY_ID);
        }
    });
}

protected Dialog onCreateDialog(int id) {

    switch(id) {

        case CATEGORY_ID:

            AlertDialog.Builder builder;
            Context mContext = this;
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
            View layout = inflater.inflate(R.layout.category,(ViewGroup) findViewById(R.id.layout_root));
            GridView gridview = (GridView)layout.findViewById(R.id.gridview);
            gridview.setAdapter(new ImageAdapter(this));

            gridview.setOnItemClickListener(new AdapterView.OnItemClickListener()
            {

                @Override
                public void onItemClick(AdapterView<?> arg0, View arg1,
                                        int arg2, long arg3) {
                    // TODO Auto-generated method stub
                    Toast.makeText(arg1.getContext(), "Position is " arg2, Toast.LENGTH_LONG).show();
                }
            });

            ImageView close = (ImageView) layout.findViewById(R.id.close);
            close.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v){
                    dialog.dismiss();
                }
            });

            builder = new AlertDialog.Builder(mContext);
            builder.setView(layout);
            dialog = builder.create();
            break;
        default:
            dialog = null;
    }
    return dialog;
}
  

И это мой ImageAdapter.java

  public class ImageAdapter extends BaseAdapter {
        private Context mContext;
        private LayoutInflater mInflater;
        public ImageAdapter(Context c) {
            mInflater = LayoutInflater.from(c);
            mContext = c;
        }
        public int getCount() {
            return mThumbIds.length;
        }
        public Object getItem(int position) {
            return null;
        }
        public long getItemId(int position) {
            return 0;
        }
        // create a new ImageView for each item referenced by the
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {  // if it's not recycled,
                convertView = mInflater.inflate(R.layout.custom, null);
                convertView.setLayoutParams(new GridView.LayoutParams(100,100));
                holder = new ViewHolder();
                holder.title = (TextView) convertView.findViewById(R.id.categoryText);
                holder.icon = (ImageView)convertView.findViewById(R.id.categoryImage);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            holder.icon.setAdjustViewBounds(true);
            holder.icon.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.icon.setPadding(5, 5, 5, 5);
            holder.title.setText(categoryContent[position]);
            holder.icon.setImageResource(mThumbIds[position]);
            return convertView;
        }
        class ViewHolder {
            TextView title;
            ImageView icon;
        }
        // references to our images
        private Integer[] mThumbIds = {
                R.drawable.ic_cancel_black_24dp, R.drawable.ic_cancel_black_24dp,R.drawable.ic_cancel_black_24dp,
                R.drawable.ic_cancel_black_24dp,R.drawable.ic_cancel_black_24dp, R.drawable.ic_cancel_black_24dp
        };

    }
    private String[] categoryContent = {
            "Pubs", "Restuarants","shopping",
            "theatre","train", "taxi",
    };


}
  

Комментарии:

1. родительский макет должен быть cardview в пользовательской строке вместо LinearLayout.

Ответ №1:

Вы должны использовать это

 dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
  

Ответ №2:

Вы должны изменить свой custom.xml в это

 <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:padding="10dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@ id/categoryImage"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_alignParentRight="true"
        android:layout_marginRight="3dp"
        android:src="@drawable/ic_cancel_black_24dp" />

    <TextView
        android:id="@ id/categoryText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="3dp"
        android:textColor="#000000"
        android:text="safsafsa" />
</LinearLayout>
  

и такой фон в gridview

 android:background="#ffffff"
  

Комментарии:

1. Да, это я знаю .. изначально я пытался сделать это без cardview. Только для этого я не получаю результат

2. попытался добавить фоновое изображение, но я все равно получаю диалоговое окно с некоторыми любимыми изображениями

3. я добавил результат, который я получаю, пожалуйста, проверьте

4. о каком макете вы говорите

5. TextView, идентификатор которого равен categoryText

Ответ №3:

Создайте фрагмент диалога и установите фоновый рисунок ПРОЗРАЧНЫМ

 val dialog = context?.let { Dialog(it) }
dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
//For Not title bar
dialog?.requestWindowFeature(Window.FEATURE_NO_TITLE)
// Include dialog.xml file
dialog?.setContentView(R.layout.dailog_confirm_tab)
 dialog?.show()
dialog?.btnConfirm?.setOnClickListener { // Close dialog
        dialog.dismiss()
        //Perform logic actions
    }