¿Cómo puedo cambiar el color del título de AlertDialog y el color de la línea debajo de él?


109

Cambié el color de un título de AlertDialog usando este comando

alert.setTitle( Html.fromHtml("<font color='#FF7F27'>Set IP Address</font>"));

Pero quiero cambiar el color de la línea que aparece debajo del título; Cómo puedo hacer eso ?

Nota: no quiero usar un diseño personalizado

captura de pantalla del efecto deseado


1
¿Existe una razón específica por la que desea evitar los diseños personalizados? ¿Qué estipulaciones adicionales tiene que deben cumplirse?
Daniel Smith

4
De hecho, puede cambiar el color del título de AlertDialog con un truco muy simple. stackoverflow.com/a/21401181/855884
MatrixDev

Respuestas:


134

Desafortunadamente, esta no es una tarea particularmente sencilla de realizar. En mi respuesta aquí , detallo cómo ajustar el color de un ListSeparatorsimplemente revisando el estilo principal utilizado por Android, creando una nueva imagen y creando un nuevo estilo basado en el original. Desafortunadamente, a diferencia del ListSeparatorestilo de ',AlertDialog temas son internos y, por lo tanto, no se puede hacer referencia a ellos como estilos principales. ¡No hay una manera fácil de cambiar esa pequeña línea azul! Por lo tanto, debe recurrir a la creación de cuadros de diálogo personalizados.

Si esa no es tu taza de té ... ¡ no te rindas! Me molestó mucho que no hubiera una manera fácil de hacer esto, así que configuré un pequeño proyecto en github para hacer diálogos de estilo holográfico personalizados rápidamente (asumiendo que el teléfono admite el estilo Holo). Puede encontrar el proyecto aquí: https://github.com/danoz73/QustomDialog

¡Debería permitir pasar fácilmente de un azul aburrido a un naranja emocionante!

ingrese la descripción de la imagen aquí

El proyecto es básicamente un ejemplo del uso de un generador de diálogo personalizado, y en el ejemplo creé una vista personalizada que parecía adaptarse al ejemplo de dirección IP que proporcionaste en tu pregunta original.

Con QustomDialog, para crear un cuadro de diálogo básico (título, mensaje) con un color diferente deseado para el título o divisor, utilice el siguiente código:

private String HALLOWEEN_ORANGE = "#FF7F27";

QustomDialogBuilder qustomDialogBuilder = new QustomDialogBuilder(v.getContext()).
    setTitle("Set IP Address").
    setTitleColor(HALLOWEEN_ORANGE).
    setDividerColor(HALLOWEEN_ORANGE).
    setMessage("You are now entering the 10th dimension.");

qustomDialogBuilder.show();

Y para agregar un diseño personalizado (por ejemplo, para agregar la pequeña dirección IP EditText), agrega

setCustomView(R.layout.example_ip_address_layout, v.getContext())

al constructor con un diseño que haya diseñado (el ejemplo de IP se puede encontrar en el github). Espero que esto ayude. Muchas gracias a Joseph Earl y su respuesta aquí .


2
¿Por qué Android todavía no admite el cambio de colores del cuadro de diálogo de alerta, debo usar otro cuadro de diálogo o dónde está el problema?
Mohammed Subhi Sheikh Quroush

3
Es probable que Android esté tratando de imponer patrones de interfaz de usuario consistentes, por lo que es probable que esto sea tan desafiante. Esta es la mejor solución que pude crear para ayudarte. Espero que lo encuentre útil, o al menos interesante e informativo :)
Daniel Smith

2
Hola Daniel. Gracias por compartir tu trabajo. Es muy útil. Estoy enfrentando un problema al implementar esto. En realidad, quiero agregar la opción de un solo elemento setItemsen este cuadro de diálogo personalizado. Cuando agrego la lista, en realidad cambia el título debajo de la lista. Cómo resolver este problema.
Dory

3
bueno, tal vez todavía no ... Estoy enfrentando el problema del título debajo de la lista ... lo siento.
dentón

1
@DanielSmith ¡hola! Buen trabajo, pero ¿encontró la solución para 'título debajo de la lista' como se mencionó anteriormente
Shirish Herwade

74

Color divisor:

Es un truco un poco, pero funciona muy bien para mí y funciona sin ninguna biblioteca externa (al menos en Android 4.4).

AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setTitle(R.string.dialog)
       .setIcon(R.drawable.ic)
       .setMessage(R.string.dialog_msg);
//The tricky part
Dialog d = builder.show();
int dividerId = d.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
View divider = d.findViewById(dividerId);
divider.setBackgroundColor(getResources().getColor(R.color.my_color));

Puede encontrar más ID de diálogo en el archivo alert_dialog.xml . P.ej. android:id/alertTitlepara cambiar el color del título ...

ACTUALIZACIÓN: color del título

Truco para cambiar el color del título:

int textViewId = d.getContext().getResources().getIdentifier("android:id/alertTitle", null, null);
TextView tv = (TextView) d.findViewById(textViewId);
tv.setTextColor(getResources().getColor(R.color.my_color));

Incluso en KitKat me encuentro android.util.AndroidRuntimeException: requestFeature() must be called before adding contentaquí.
Konrad Reiche

Utilizo este código en muchos lugares de mi aplicación y en todas partes funciona bien. Solo conozco problemas DialogFragmenten los que el color del título no tiene identificación, android:id/alertTitlepero no encontré el correcto.
mmrmartin

2
@platzhirsch, en mi clase DialogFragment personalizada, evité el problema requestFeature () ejecutando el código de personalización en onStart (). Puede acceder al diálogo allí usando getDialog ().
arlomedia

1
Solo como un aviso para los futuros usuarios que puedan encontrar esto; por alguna razón, cuando uso solo un diálogo genérico, tengo que usar "título" como mi nombre de identificador en lugar de "alertTitle". No estoy seguro de si esto se menciona en otro lugar, pero pensé que agregaría mi granito de
arena

3
Estoy llegando NullPointerExceptionalsetTextColor()
Abhi

21

comprueba que esto te sea útil ...

public void setCustomTitle (View customTitleView)

obtienes detalles del siguiente enlace.

http://developer.android.com/reference/android/app/AlertDialog.Builder.html#setCustomTitle%28android.view.View%29

CustomDialog.java

Dialog alert = new Dialog(this);
    alert.requestWindowFeature(Window.FEATURE_NO_TITLE);
    alert.setContentView(R.layout.title);
    TextView msg = (TextView)alert.findViewById(R.id.textView1);
    msg.setText("Hello Friends.\nIP address : 111.111.1.111");
    alert.show();

title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Set IP address"
    android:textColor="#ff0000"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="2dp"
    android:layout_marginTop="5dp"
    android:background="#00ff00"
    />
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#775500"
    android:textAppearance="?android:attr/textAppearanceLarge" />

ingrese la descripción de la imagen aquí


Intento esto pero todavía tengo la línea azul debajo de mi TextView
Mohammed Subhi Sheikh Quroush

tengo un código. que puso en respuesta después de "Editar". prueba esto.
Mr.Sandy

10

Esto establecerá el color del título, el icono y el divisor. Listo para cambiar con cualquier nueva versión de Android.

public static void colorAlertDialogTitle(AlertDialog dialog, int color) {
    int dividerId = dialog.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
    if (dividerId != 0) {
        View divider = dialog.findViewById(dividerId);
        divider.setBackgroundColor(color);
    }

    int textViewId = dialog.getContext().getResources().getIdentifier("android:id/alertTitle", null, null);
    if (textViewId != 0) {
        TextView tv = (TextView) dialog.findViewById(textViewId);
        tv.setTextColor(color);
    }

    int iconId = dialog.getContext().getResources().getIdentifier("android:id/icon", null, null);
    if (iconId != 0) {
        ImageView icon = (ImageView) dialog.findViewById(iconId);
        icon.setColorFilter(color);
    }
}

Recuerde llamar a dialog.show () antes de llamar a este método.


@Vlado, ¿estás usando appcompat? Si es así, es posible que esto no funcione.
Jared Rummler

9

Siguiendo el código fuente de Dialog , encontré que el Título se genera en Clase MidWindowal inflar el dialog_title_holo.xmldiseño. entonces el Id de mTitleViewes titley el Id de divisor es titleDivider.

podemos acceder a Id de titlesimplemente por android.R.id.title.

y acceso a Id de titleDividerporResources.getSystem().getIdentifier("titleDivider","id", "android");

El código final que utilicé para cambiar la dirección del título y cambiar el color es:

TextView mTitle = (TextView)findViewById(android.R.id.title);
mTitle.setGravity(Gravity.RIGHT|Gravity.CENTER_VERTICAL);
int x = Resources.getSystem().getIdentifier("titleDivider","id", "android");
View titleDivider = findViewById(x);
titleDivider.setBackgroundColor(getContext().getResources().getColor(R.color.some_color));

¡Esta es una respuesta completa! ¡Usando android.R.id.title para cambiar el título también!
Andreas Lymbouras

Gran respuesta, me ayudó mucho! Tuve que cambiar: TextView mTitle = (TextView) findViewById (android.R.id.title); a: TextView mTitle = (TextView) dialog.findViewById (android.R.id.title); para que esto funcione.
Jan Ziesse

Este funcionó para mí, estoy usando una actividad que hereda @android: style / Theme.Dialog. Podría personalizar la línea divisoria y el color del título. +1
voghDev

4

Si no quieres una "biblioteca" para eso, puedes usar este mal truco:

((ViewGroup)((ViewGroup)getDialog().getWindow().getDecorView()).getChildAt(0)) //ie LinearLayout containing all the dialog (title, titleDivider, content)
.getChildAt(1) // ie the view titleDivider
.setBackgroundColor(getResources().getColor(R.color.yourBeautifulColor));

Esto fue probado y funciona en 4.x; no probado bajo, pero si mi memoria es buena debería funcionar para 2.xy 3.x


Esto funciona muy bien para 4.xi, pero tampoco he probado los demás, así que los intentaré y lo confirmaré
kandroidj

getDialog () me da un error "El método getDialog () no está definido para el tipo MainActivity" me pide que cree un método
Zen

4

En la clase onCreateView, pongo esto:

Dialog d = getDialog();
    d.setTitle(Html.fromHtml("<font color='#EC407A'>About</font>"));
    int dividerId = d.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
    View divider = d.findViewById(dividerId);
    divider.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

colorPrimary tiene enlaces a nuestro archivo colors.xml que almacena todos los colores. También d.setTitleproporciona una forma engañosa de establecer el color del título.


1

Si está creando un diseño personalizado para el cuadro de diálogo de alerta

entonces puede agregar así fácilmente para cambiar el color

<LinearLayout
    android:id="@+id/DialogTitleBorder"
    android:layout_width="fill_parent"
    android:layout_height="1dip"
    android:layout_below="@id/mExitDialogDesc"
    android:background="#4BBAE3"            <!--change color easily -->
    >

</LinearLayout>

1

Si usa un diseño de título personalizado , puede usarlo como alertDialog.setCustomTitle(customTitle);

Ejemplo

En el diálogo de uso del hilo de la interfaz de usuario como:

 LayoutInflater inflater = LayoutInflater.from(getApplicationContext());
 View customTitle = inflater.inflate(R.layout.customtitlebar, null);
 AlertDialog.Builder d = new AlertDialog.Builder(this);
 d.setCustomTitle(customTitle);
 d.setMessage("Message");
 d.setNeutralButton("OK", null);
 d.show();

customtitlebar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#525f67">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" >
    </ImageView>

    <TextView
        android:id="@+id/customtitlebar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:textColor="#ffffff"
        android:text="Title Name"
        android:padding="3px"
        android:textStyle="bold" 
        android:layout_toRightOf="@id/icon"
        android:layout_alignParentTop="true"
        android:gravity="center_vertical"/>

     <ImageView
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#ff0000" 
        android:layout_below="@id/icon"><!-- This is line below the title -->
    </ImageView>

</RelativeLayout>

Quiero cambiar el color de la línea dentro de la elipse roja
Mohammed Subhi Sheikh Quroush

1

Aquí hay otra solución (basada en respuestas sugeridas) que maneja el estilo de los cuadros de diálogo en una clase sin necesidad de preocuparse por el estado del cuadro de diálogo cuando cambia el estilo; el cuadro de diálogo ya se puede mostrar o simplemente inicializar.

Ejemplo de uso:

AlertDialog.Builder builder = new AlertDialog.Builder(context);
AlertDialog dialog = builder.create(); //or builder.show()
DialogViewDecorator.decorate(dialog, android.R.color.holo_red_light); //can also set the defaut color in the class

Implementación:

public class DialogViewDecorator {

private static final
@ColorRes int DEFAULT_TITLE_DIVIDER_COLOR = android.R.color.holo_orange_light;

public static void decorate(Dialog dialog) {
    decorate(dialog, DEFAULT_TITLE_DIVIDER_COLOR);
}

/**
 * Sets the title divider color when the view is shown by setting DialogInterface.OnShowListener on the dialog.
 * <p/>
 * If you want to do other things onShow be sure to extend OnDecoratedDialogShownListener(call super.show(...)!)
 * and call {@link #decorate(Dialog, int, OnDecoratedDialogShownListener)}.
 *
 * @param dialog
 * @param titleDividerColor
 */
public static void decorate(Dialog dialog, final int titleDividerColor) {
    decorate(dialog, titleDividerColor, new OnDecoratedDialogShownListener(titleDividerColor));
}

/**
 * Method for setting a extended implementation of OnDecoratedDialogShownListener. Don't forget to call super
 * or the titleDividerColor wont be applied!
 *
 * @param dialog
 * @param titleDividerColor
 * @param OnShowListener
 * @param <T>
 */
public static <T extends OnDecoratedDialogShownListener> void decorate(Dialog dialog, int titleDividerColor, T OnShowListener) {
    if (dialog == null || titleDividerColor <= 0) { return; }

    if (dialog.isShowing()) {
        setTitleDividerColor(dialog, titleDividerColor);
    } else {
        dialog.setOnShowListener(OnShowListener);
    }
}

private static void setTitleDividerColor(DialogInterface dialogInterface, int titleDividerColor) {
    try {
        Dialog dialog = (Dialog) dialogInterface;
        int dividerId = dialog.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
        View divider = dialog.findViewById(dividerId);
        if (divider != null) {
            divider.setBackgroundColor(dialog.getContext().getResources().getColor(titleDividerColor));
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}


public static class OnDecoratedDialogShownListener implements DialogInterface.OnShowListener {
    private int titleDividerColor;

    public OnDecoratedDialogShownListener() {
        this.titleDividerColor = DEFAULT_TITLE_DIVIDER_COLOR;
    }

    public OnDecoratedDialogShownListener(int titleDividerColor) {
        this.titleDividerColor = titleDividerColor;
    }

    @Override
    public void onShow(DialogInterface dialogInterface) {
        setTitleDividerColor(dialogInterface, titleDividerColor);
    }
}}

0

Continuando con esta respuesta: https://stackoverflow.com/a/15285514/1865860 , bifurqué el agradable repositorio de github de @ daniel-smith e hice algunas mejoras:

  • Actividad de ejemplo mejorada
  • diseños mejorados
  • setItemsmétodo fijo
  • divisores agregados en items_list
  • descartar cuadros de diálogo al hacer clic
  • soporte para elementos deshabilitados en setItemsmétodos
  • listItem retroalimentación táctil
  • mensaje de diálogo desplazable

enlace: https://github.com/dentex/QustomDialog


0

En lugar de usar el divisor en el diálogo, use la vista en el diseño personalizado y configure el diseño como diseño personalizado en el diálogo.

custom_popup.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

    <com.divago.view.TextViewMedium
        android:id="@+id/txtTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="AlertDialog"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <View
        android:id="@+id/border"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/txtTitle"
        android:background="@color/txt_dark_grey" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/border"
        android:scrollbars="vertical">

        <com.divago.view.TextViewRegular
            android:id="@+id/txtPopup"
            android:layout_margin="15dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </ScrollView>
</RelativeLayout>

activity.java:

public void showPopUp(String title, String text) {

    LayoutInflater inflater = getLayoutInflater();
    View alertLayout = inflater.inflate(R.layout.custom_popup, null);

    TextView txtContent = alertLayout.findViewById(R.id.txtPopup);
    txtContent.setText(text);

    TextView txtTitle = alertLayout.findViewById(R.id.txtTitle);
    txtTitle.setText(title);

    AlertDialog.Builder alert = new AlertDialog.Builder(this);
    alert.setView(alertLayout);
    alert.setCancelable(true);

    alert.setPositiveButton("Done", new DialogInterface.OnClickListener() {

        @Override
        public void onClick(DialogInterface dialog, int which) {
            dialog.dismiss();
        }
    });

    AlertDialog dialog = alert.create();
    dialog.show();
}

0
    ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.BLACK);

    String title = context.getString(R.string.agreement_popup_message);
    SpannableStringBuilder ssBuilder = new SpannableStringBuilder(title);
    ssBuilder.setSpan(
            foregroundColorSpan,
            0,
            title.length(),
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
    );

AlertDialog.Builder alertDialogBuilderUserInput = new AlertDialog.Builder(context);
alertDialogBuilderUserInput.setTitle(ssBuilder)

-1

En caso de que esté utilizando la ampliación del cuadro de diálogo, utilice:

requestWindowFeature(Window.FEATURE_NO_TITLE);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.