web-dev-qa-db-fra.com

Comment créer un dialogue personnalisé avec des angles arrondis dans android

Ce que j'essaie de faire: J'essaie de créer une boîte de dialogue personnalisée dans Android avec des coins arrondis.

Que se passe-t-il? Je peux créer un dialogue personnalisé mais il n’a pas de coins arrondis. J'ai essayé d'ajouter un sélecteur mais je ne pouvais toujours pas obtenir de coins arrondis.

Ci-dessous mon code pour le même:

code Java:

private void launchDismissDlg() {

        dialog = new Dialog(getActivity(), Android.R.style.Theme_Dialog);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.dlg_dismiss);
        dialog.setCanceledOnTouchOutside(true);

        Button btnReopenId = (Button) dialog.findViewById(R.id.btnReopenId);
        Button btnCancelId = (Button) dialog.findViewById(R.id.btnCancelId);

        btnReopenId.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {



            }
        });


        btnCancelId.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {



            }
        });
        dialog.setCanceledOnTouchOutside(false);
        dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
        dialog.getWindow().setLayout(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
        dialog.show();

    }

code xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@Android:color/white"
    Android:orientation="vertical" >

    <TableLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" >

        <TableRow
            Android:id="@+id/tableRow1"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginTop="20dp"
            Android:gravity="center" >

            <TextView
                Android:id="@+id/textView1"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:gravity="center"
                Android:text="&quot;I WOULD LIKE TO DISMISS THE VENDOR&quot;"
                Android:textColor="@color/col_dlg_blue_light"
                Android:textSize="14sp"
                Android:textStyle="bold" />
        </TableRow>

        <TableRow
            Android:id="@+id/tableRow2"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginTop="5dp"
            Android:gravity="center" >

            <TextView
                Android:id="@+id/textView2"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:gravity="center"
                Android:text="BECAUSE"
                Android:textColor="@Android:color/black"
                Android:textStyle="bold" />
        </TableRow>



        <TableRow
            Android:id="@+id/tableRow4"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content" >

            <Button
                Android:id="@+id/btnReopenId"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_weight="1"
                Android:background="@color/col_dlg_green_light"
                Android:text="REOPEN"
                Android:padding="5dp"
                Android:textSize="14sp"
                Android:textColor="@Android:color/white"
                Android:textStyle="bold" />

            <Button
                Android:id="@+id/btnCancelId"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_weight="1"
                Android:background="@color/col_dlg_pink_light"
                Android:text="CANCEL"
                Android:padding="5dp"
                Android:textSize="14sp"
                Android:textColor="@Android:color/white"
                Android:textStyle="bold" />
        </TableRow>
    </TableLayout>

</LinearLayout>
androidandroid-custom-viewandroid-dialog
87
Devrath

Créez un xml dans drawable, par exemple dialog_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid
        Android:color="@color/white"/>
    <corners
        Android:radius="30dp" />
    <padding
        Android:left="10dp"
        Android:top="10dp"
        Android:right="10dp"
        Android:bottom="10dp" />
</shape>

définir comme fond dans votre layout xml

Android:background="@drawable/dialog_bg"

Définissez l'arrière-plan de la vue racine de la boîte de dialogue sur transparent, car Android place votre présentation de dialogue dans une vue racine qui masque les coins de votre présentation personnalisée.

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
265
Koma Yip

Vous devez faire ce qui suit:

  • Créez un arrière-plan avec des coins arrondis pour l'arrière-plan du dialogue:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle" >

    <solid Android:color="#fff" />

    <corners
        Android:bottomLeftRadius="8dp"
        Android:bottomRightRadius="8dp"
        Android:topLeftRadius="8dp"
        Android:topRightRadius="8dp" />

</shape>

  • Maintenant, dans le fichier XML de votre dialogue dans la disposition racine, utilisez cet arrière-plan avec la marge requise:

    Android:layout_marginLeft="20dip"
Android:layout_marginRight="20dip"
Android:background="@drawable/dialog_background"

  • enfin, dans la partie Java, vous devez procéder comme suit:

    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(layoutResId);
View v = getWindow().getDecorView();
v.setBackgroundResource(Android.R.color.transparent);

Cela fonctionne parfaitement pour moi.

20
SMR

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

ça marche pour moi

12
Gabriel Ribeiro Silva

dimen.xml

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

    <integer name="weight">1</integer>

    <dimen name="dialog_top_radius">21dp</dimen>

    <dimen name="textview_dialog_head_min_height">50dp</dimen>
    <dimen name="textview_dialog_drawable_padding">5dp</dimen>

    <dimen name="button_dialog_layout_margin">3dp</dimen>


</resources>

styles.xml

<style name="TextView.Dialog">
        <item name="Android:paddingLeft">@dimen/dimen_size</item>
        <item name="Android:paddingRight">@dimen/dimen_size</item>
        <item name="Android:gravity">center_vertical</item>
        <item name="Android:textColor">@color/black</item>
    </style>

    <style name="TextView.Dialog.Head">
        <item name="Android:minHeight">@dimen/textview_dialog_head_min_height</item>
        <item name="Android:textColor">@color/white</item>
        <item name="Android:background">@drawable/dialog_title_style</item>
        <item name="Android:drawablePadding">@dimen/textview_dialog_drawable_padding</item>
    </style>

    <style name="TextView.Dialog.Text">
        <item name="Android:textAppearance">@style/Font.Medium.16</item>
    </style>

    <style name="Button" parent="Base.Widget.AppCompat.Button">
        <item name="Android:layout_height">@dimen/button_min_height</item>
        <item name="Android:layout_width">match_parent</item>
        <item name="Android:textColor">@color/white</item>
        <item name="Android:gravity">center</item>
        <item name="Android:textAppearance">@style/Font.Medium.20</item>
    </style>

 <style name="Button.Dialog">
        <item name="Android:layout_weight">@integer/weight</item>
        <item name="Android:layout_margin">@dimen/button_dialog_layout_margin</item>
    </style>

    <style name="Button.Dialog.Middle">
        <item name="Android:background">@drawable/button_primary_selector</item>
    </style>

dialog_title_style.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <gradient
        Android:angle="270"
        Android:endColor="@color/primaryDark"
        Android:startColor="@color/primaryDark" />

    <corners
        Android:topLeftRadius="@dimen/dialog_top_radius"
        Android:topRightRadius="@dimen/dialog_top_radius" />

</shape>

dialog_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="@color/backgroundDialog" />
    <corners
        Android:topLeftRadius="@dimen/dialog_top_radius"
        Android:topRightRadius="@dimen/dialog_top_radius" />
    <padding />
</shape>

dialog_one_button.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@drawable/dailog_background"
    Android:orientation="vertical">

    <TextView
        Android:id="@+id/dialogOneButtonTitle"
        style="@style/TextView.Dialog.Head"
        Android:text="Process Completed" />

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="16dp"
        Android:layout_marginLeft="16dp"
        Android:layout_marginRight="16dp"
        Android:orientation="vertical">

        <TextView
            Android:id="@+id/dialogOneButtonText"
            style="@style/TextView.Dialog.Text"
            Android:text="Return the main menu" />

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:orientation="horizontal">

            <Button
                Android:id="@+id/dialogOneButtonOkButton"
                style="@style/Button.Dialog.Middle"
                Android:text="Ok" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

OneButtonDialog.Java

package com.example.sametoztoprak.concept.dialogs;

import Android.app.Dialog;
import Android.graphics.Color;
import Android.graphics.drawable.ColorDrawable;
import Android.os.Bundle;
import Android.support.v7.app.AppCompatActivity;
import Android.view.View;
import Android.view.Window;
import Android.widget.Button;
import Android.widget.TextView;

import com.example.sametoztoprak.concept.R;
import com.example.sametoztoprak.concept.models.DialogFields;

/**
 * Created by sametoztoprak on 26/09/2017.
 */

public class OneButtonDialog extends Dialog implements View.OnClickListener {

    private static OneButtonDialog oneButtonDialog;
    private static DialogFields dialogFields;

    private Button dialogOneButtonOkButton;
    private TextView dialogOneButtonText;
    private TextView dialogOneButtonTitle;

    public OneButtonDialog(AppCompatActivity activity) {
        super(activity);
    }

    public static OneButtonDialog getInstance(AppCompatActivity activity, DialogFields dialogFields) {
        OneButtonDialog.dialogFields = dialogFields;
        return oneButtonDialog = (oneButtonDialog == null) ? new OneButtonDialog(activity) : oneButtonDialog;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.dialog_one_button);
        getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

        dialogOneButtonTitle = (TextView) findViewById(R.id.dialogOneButtonTitle);
        dialogOneButtonText = (TextView) findViewById(R.id.dialogOneButtonText);
        dialogOneButtonOkButton = (Button) findViewById(R.id.dialogOneButtonOkButton);

        dialogOneButtonOkButton.setOnClickListener(this);
    }

    @Override
    protected void onStart() {
        super.onStart();
        dialogOneButtonTitle.setText(dialogFields.getTitle());
        dialogOneButtonText.setText(dialogFields.getText());
        dialogOneButtonOkButton.setText(dialogFields.getOneButton());
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.dialogOneButtonOkButton:

                break;
            default:
                break;
        }
        dismiss();
    }
}

enter image description here

11
Samet ÖZTOPRAK

J'ai créé une nouvelle méthode sans avoir d'arrière-plan dessinable, c'est-à-dire qu'elle a CardView en tant que parent et lui donne un app:cardCornerRadius="20dp", puis l'ajoute dans la Java classe dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

C'est une autre façon de le faire.

5
Sattar

Vous pouvez utiliser la forme pour l’arrière-plan

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<solid Android:color="@Android:color/transparent"/>
<corners Android:radius="10dp" />
<padding Android:left="10dp" Android:right="10dp"/>
</shape>

Regardez this pour plus de détails.

5
Sanjeet A

le moyen le plus simple est d'utiliser de

CardView et sa carte: cardCornerRadius

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView 
 xmlns:Android="http://schemas.Android.com/apk/res/Android"
 xmlns:card="http://schemas.Android.com/apk/res-auto"
 Android:orientation="vertical"
 Android:id="@+id/cardlist_item"
 Android:layout_width="match_parent"
 Android:layout_height="130dp"
 card:cardCornerRadius="40dp"
 Android:layout_marginLeft="8dp"
 Android:layout_marginRight="8dp"
 Android:layout_marginTop="5dp"
 Android:layout_marginBottom="5dp"
 Android:background="@color/white">

  <RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_margin="12sp"
    Android:orientation="vertical"
    Android:weightSum="1">
    </RelativeLayout>

</Android.support.v7.widget.CardView>

Et quand vous créez votre dialogue

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
3
behrad

Voici la solution complète si vous souhaitez contrôler le rayon de l'angle du dialogue et le conserver ombre d'élévation

Dialogue:

class OptionsDialog: DialogFragment() {

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup, savedInstanceState: Bundle?): View {
    dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
    return inflater.inflate(R.layout.dialog_options, container)
}

}

mise en page dialog_options.xml:

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content">

<androidx.cardview.widget.CardView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="40dp"
    app:cardElevation="20dp"
    app:cardCornerRadius="12dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        id="@+id/actual_content_goes_here"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content">
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>
</FrameLayout>

La clé consiste à envelopper CardView avec un autre ViewGroup (ici, FrameLayout) et à définir des marges pour créer un espace pour l'ombre d'élévation.

2
laszlo

Réglage

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

empêchera le dialogue de jeter une ombre.

La solution est d'utiliser

dialog.getWindow().setBackgroundDrawableResource(R.drawable.dialog_rounded_background);

où est R.drawable.dialog_rounded_background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item>
        <shape Android:shape="rectangle" Android:padding="10dp">
            <solid
                Android:color="@color/dialog_bg_color"/>
            <corners
                Android:radius="30dp" />
        </shape>
    </item>

</layer-list>
0
Zoran

Pour ceux qui aiment faire des choses en XML, spécialement dans le cas où vous utilisez des actions de composant d'architecture de navigation afin de naviguer dans les boîtes de dialogue

Vous pouvez utiliser:

<style name="DialogStyle" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">

    <!-- dialog_background is drawable shape with corner radius -->
    <item name="Android:background">@drawable/dialog_background</item>

    <item name="Android:windowBackground">@Android:color/transparent</item>
</style>
0
user158