redondo - manual de programacion android pdf

Cómo hacer un diálogo personalizado con esquinas redondeadas en Android

Question

Lo que estoy tratando de hacer: estoy tratando de hacer un diálogo personalizado en Android con esquinas redondeadas.

Lo que está sucediendo: puedo hacer un diálogo personalizado pero no tiene esquinas redondeadas. Intenté agregar un selector, pero aún así no pude lograr esquinas redondeadas.

A continuación se muestra mi código para el mismo:

Código 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();

    }

código 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>

Answer 1

Ajuste

<?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>

evitará que el diálogo proyecte una sombra.

La solución es usar

<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>

donde está R.drawable.dialog_itated_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>

Answer 2

Aquí está la solución completa si desea controlar el radio de la esquina del diálogo y preservar la sombra de elevación

Diálogo:

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)
}

}

dialog_options.xml layout:

<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 clave es envolver el CardView con otro ViewGroup (aquí FrameLayout) y establecer márgenes para crear espacio para la sombra de elevación.

Answer 3

Crea un xml en dibujable, di 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>

configúrelo como fondo en su diseño xml

android:background="@drawable/dialog_bg"

Establezca el fondo de la vista raíz del cuadro de diálogo en transparente, ya que Android coloca el diseño del cuadro de diálogo dentro de una vista raíz que oculta las esquinas en su diseño personalizado.

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

Answer 4

Debes hacer lo siguiente:

• Cree un fondo con esquinas redondeadas para el fondo del Diálogo:

  <?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>

• Ahora, en el archivo XML de su cuadro de diálogo en el diseño raíz, use ese fondo con el margen requerido:

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

• Finalmente en la parte de Java necesitas hacer esto:

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

Esto funciona perfectamente para mi.

Answer 5

En Kotlin, estoy usando una clase DoubleButtonDialog.Java con window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) línea window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) como importante

class DoubleButtonDialog(context: Context) : Dialog(context, R.style.DialogTheme) { private var cancelableDialog: Boolean = true private var titleDialog: String? = null private var messageDialog: String? = null private var leftButtonDialog: String = "Yes" // private var rightButtonDialog: String? = null private var onClickListenerDialog: OnClickListener? = null override fun onCreate(savedInstanceState: Bundle?) { window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) //requestWindowFeature(android.view.Window.FEATURE_NO_TITLE) setCancelable(cancelableDialog) setContentView(R.layout.dialog_double_button) // val btnNegative = findViewById<Button>(R.id.btnNegative) // btnNegative.visibility = View.GONE // if (rightButtonDialog != null) { // btnNegative.visibility = View.VISIBLE // btnNegative.text = rightButtonDialog // btnNegative.setOnClickListener { // dismiss() // onClickListenerDialog?.onClickCancel() // } // } val btnPositive = findViewById<Button>(R.id.btnPositive) btnPositive.text = leftButtonDialog btnPositive.setOnClickListener { onClickListenerDialog?.onClick() dismiss() } (findViewById<TextView>(R.id.title)).text = titleDialog (findViewById<TextView>(R.id.message)).text = messageDialog super.onCreate(savedInstanceState) } constructor( context: Context, cancelableDialog: Boolean, titleDialog: String?, messageDialog: String, leftButtonDialog: String, /*rightButtonDialog: String?,*/ onClickListenerDialog: OnClickListener ) : this(context) { this.cancelableDialog = cancelableDialog this.titleDialog = titleDialog this.messageDialog = messageDialog this.leftButtonDialog = leftButtonDialog // this.rightButtonDialog = rightButtonDialog this.onClickListenerDialog = onClickListenerDialog } } interface OnClickListener { // fun onClickCancel() fun onClick() }

En el diseño, podemos crear un dialog_double_button.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="@dimen/dimen_10" android:background="@drawable/bg_double_button" android:orientation="vertical" android:padding="@dimen/dimen_5"> <TextView android:id="@+id/title" style="@style/TextViewStyle" android:layout_gravity="center_horizontal" android:layout_margin="@dimen/dimen_10" android:fontFamily="@font/campton_semi_bold" android:textColor="@color/red_dark4" android:textSize="@dimen/text_size_24" tools:text="@string/dial" /> <TextView android:id="@+id/message" style="@style/TextViewStyle" android:layout_gravity="center_horizontal" android:layout_margin="@dimen/dimen_10" android:gravity="center" android:textColor="@color/semi_gray_2" tools:text="@string/diling_police_number" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/dimen_10" android:gravity="center" android:orientation="horizontal" android:padding="@dimen/dimen_5"> <!--<Button android:id="@+id/btnNegative" style="@style/ButtonStyle" android:layout_width="0dp" android:layout_height="@dimen/dimen_40" android:layout_marginEnd="@dimen/dimen_10" android:layout_weight=".4" android:text="@string/cancel" />--> <Button android:id="@+id/btnPositive" style="@style/ButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:backgroundTint="@color/red_dark4" android:fontFamily="@font/campton_semi_bold" android:padding="@dimen/dimen_10" android:text="@string/proceed" android:textAllCaps="false" android:textColor="@color/white" android:textSize="@dimen/text_size_20" /> </LinearLayout> </LinearLayout>

luego use drawable.xml como

<?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="@dimen/dimen_10" /> <padding android:left="@dimen/dimen_10" android:top="@dimen/dimen_10" android:right="@dimen/dimen_10" android:bottom="@dimen/dimen_10" /> </shape>

Answer 6

Hice una nueva forma sin tener un fondo dibujable que hace que tenga CardView como padre y le dé una app:cardCornerRadius="20dp" y luego agregue esto en la clase java dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

Es otra forma de hacerlo.

Answer 7

Para cualquiera que le guste hacer cosas en XML, especialmente en el caso de que esté utilizando acciones de componentes de arquitectura de navegación para navegar a los cuadros de diálogo

Puedes usar:

<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>

Answer 8

Puede usar la forma para el fondo como-

<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>

Echa un vistazo a this para los detalles.

Answer 9

Si usa componentes materiales :

CustomDialog.kt

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

styles.xml

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

Answer 10

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();
    }
}

Answer 11

la manera más simple es usar

CardView y su tarjeta: 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>

Y cuando estás creando tu diálogo

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

Answer 12

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

esto funciona para mi