Comment puis-je changer la couleur du titre AlertDialog et la couleur de la ligne en dessous


109

J'ai changé la couleur d'un titre AlertDialog en utilisant cette commande

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

Mais je veux changer la couleur de la ligne qui apparaît sous le titre; Comment puis je faire ça ?

Remarque: je ne souhaite pas utiliser de mise en page personnalisée

capture d'écran de l'effet souhaité


1
cherchez-vous à éviter les mises en page personnalisées pour une raison spécifique? Quelles stipulations supplémentaires devez-vous respecter?
Daniel Smith

4
Vous pouvez en fait changer la couleur du titre AlertDialog par un hack très simple. stackoverflow.com/a/21401181/855884
MatrixDev

Réponses:


134

Malheureusement, ce n’est pas une tâche particulièrement simple à accomplir. Dans ma réponse ici , je détaille comment ajuster la couleur d'un ListSeparatoren vérifiant simplement le style parent utilisé par Android, en créant une nouvelle image et en créant un nouveau style basé sur l'original. Malheureusement, contrairement au ListSeparatorstyle de 's, les AlertDialogthèmes sont internes et ne peuvent donc pas être référencés en tant que styles parents. Il n'y a pas de moyen facile de changer cette petite ligne bleue! Vous devez donc recourir à la création de dialogues personnalisés.

Si ce n'est pas votre tasse de thé ... n'abandonnez pas! J'étais très dérangé par le fait qu'il n'y avait pas de moyen facile de le faire, j'ai donc mis en place un petit projet sur github pour créer rapidement des dialogues de style holo personnalisés (en supposant que le téléphone prend en charge le style Holo). Vous pouvez trouver le projet ici: https://github.com/danoz73/QustomDialog

Il devrait facilement permettre de passer du bleu ennuyeux à l'orange excitant!

entrez la description de l'image ici

Le projet est essentiellement un exemple d'utilisation d'un générateur de boîte de dialogue personnalisé, et dans l'exemple, j'ai créé une vue personnalisée qui semblait répondre à l'exemple d'adresse IP que vous avez donné dans votre question d'origine.

Avec QustomDialog, afin de créer une boîte de dialogue de base (titre, message) avec une couleur différente souhaitée pour le titre ou le séparateur, vous utilisez le code suivant:

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

Et pour ajouter une mise en page personnalisée (par exemple, pour ajouter la petite adresse IP EditText), vous ajoutez

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

au constructeur avec une mise en page que vous avez conçue (l'exemple IP peut être trouvé dans le github). J'espère que ça aide. Un grand merci à Joseph Earl et sa réponse ici .


2
pourquoi Android ne prenait-il toujours pas en charge la modification des couleurs de la boîte de dialogue d'alerte, devrais-je utiliser une autre boîte de dialogue ou où se trouve le problème?
Mohammed Subhi Sheikh Quroush

3
Android essaie probablement d'appliquer des modèles d'interface utilisateur cohérents, c'est probablement pourquoi c'est si difficile. C'est la meilleure solution que je pourrais créer pour vous aider. J'espère que vous le trouverez utile, ou du moins intéressant et instructif :)
Daniel Smith

2
Salut Daniel. Merci de partager votre travail. C'est très utile. Je suis confronté à un problème dans la mise en œuvre de cela. En fait, je souhaite ajouter un choix d'élément unique à l'aide setItemsde cette boîte de dialogue personnalisée. Lorsque j'ajoute la liste, le titre est déplacé sous la liste. Comment résoudre ce problème.
Dory

3
enfin, peut-être pas encore tout à fait ... Je suis confronté au problème du titre sous la liste ... désolé.
dentex

1
@DanielSmith salut! Bon travail, mais avez-vous trouvé la solution pour le `` titre sous la liste '' comme mentionné ci-dessus
Shirish Herwade

74

Couleur du séparateur:

C'est un peu un hack, mais cela fonctionne très bien pour moi et cela fonctionne sans aucune bibliothèque externe (au moins sur 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));

Vous pouvez trouver d'autres identifiants de boîte de dialogue dans le fichier alert_dialog.xml . Par exemple. android:id/alertTitlepour changer la couleur du titre ...

MISE À JOUR: couleur du titre

Hack pour changer la couleur du titre:

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

Même sur KitKat, je suis tombé sur android.util.AndroidRuntimeException: requestFeature() must be called before adding contentici.
Konrad Reiche

J'utilise ce morceau de code à de nombreux endroits dans mon application et partout, cela fonctionne bien. Je ne connais que les problèmes liés à la DialogFragmentnon-identification de la couleur du titre, android:id/alertTitlemais je n'ai pas trouvé la bonne.
mmrmartin le

2
@platzhirsch, dans ma classe DialogFragment personnalisée, j'ai évité le problème requestFeature () en exécutant le code de personnalisation dans onStart (). Vous pouvez y accéder en utilisant getDialog ().
arlomedia

1
Juste comme un avertissement pour les futurs utilisateurs qui pourraient rencontrer cela; pour une raison quelconque, lorsque j'utilise juste une boîte de dialogue générique, je dois utiliser "title" comme nom d'identifiant au lieu de "alertTitle". Je ne sais pas si cela est mentionné ailleurs, mais je pensais simplement que j'ajouterais ma part dans l'espoir d'aider: P
zgc7009

3
J'arrive NullPointerExceptionausetTextColor()
Abhi

21

vérifiez que cela vous est utile ...

public void setCustomTitle (View customTitleView)

vous obtenez des détails à partir du lien suivant.

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

entrez la description de l'image ici


J'essaye ceci mais j'ai toujours la ligne bleue sous mon TextView
Mohammed Subhi Sheikh Quroush

j'ai du code. qui a mis en réponse après "Edit". vous essayez ceci.
Mr.Sandy

10

Cela définira la couleur du titre, de l'icône et du séparateur. Bound to change avec toute nouvelle version d'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);
    }
}

N'oubliez pas d'appeler dialog.show () avant d'appeler cette méthode.


@Vlado utilisez-vous appcompat? Si tel est le cas, cela peut ne pas fonctionner.
Jared Rummler

9

En suivant le code source de Dialog , j'ai trouvé que Title est généré dans Class MidWindowen gonflant la dialog_title_holo.xmlmise en page. donc l'Id de mTitleViewest titleet l'Id du diviseur esttitleDivider .

nous pouvons accéder à l'Id de titlesimplement parandroid.R.id.title .

et accès à l'ID de titleDivider parResources.getSystem().getIdentifier("titleDivider","id", "android");

Le code final que j'ai utilisé pour changer la direction du titre et changer de couleur est:

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

C'est une réponse complète! Utiliser android.R.id.title pour changer le titre également!
Andreas Lymbouras

Excellente réponse, m'a beaucoup aidé! J'ai dû changer: TextView mTitle = (TextView) findViewById (android.R.id.title); à: TextView mTitle = (TextView) dialog.findViewById (android.R.id.title); pour que cela fonctionne.
Jan Ziesse

Celui-ci a fonctionné pour moi, j'utilise une activité qui hérite de @android: style / Theme.Dialog. Pourrait personnaliser la ligne de séparation et la couleur du titre. +1
voghDev

4

Si vous ne voulez pas de "bibliothèque" pour cela, vous pouvez utiliser ce hack mal:

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

Cela a été testé et fonctionne sur 4.x; pas testé sous, mais si ma mémoire est bonne, cela devrait fonctionner pour 2.x et 3.x


Cela fonctionne très bien pour 4.xi Je n'ai pas essayé les autres non plus, alors je vais leur donner un essai et le confirmer
kandroidj

getDialog () me donne une erreur "La méthode getDialog () n'est pas définie pour le type MainActivity" il me demande de créer une méthode
Zen

4

Dans la classe onCreateView, je mets ceci:

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 liens vers notre fichier colors.xml qui stocke toutes les couleurs. d.setTitleFournit également un moyen hacky de définir la couleur du titre.


1

Si vous créez une mise en page personnalisée pour la boîte de dialogue d'alerte

alors vous pouvez ajouter comme ceci facilement pour changer la couleur

<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 vous utilisez une mise en page de titre personnalisée, vous pouvez l'utiliser comme alertDialog.setCustomTitle(customTitle);

Exemple

Sur l'interface utilisateur, utilisez une boîte de dialogue comme:

 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>

Je veux changer la couleur de la ligne à l'intérieur de l'ellipse rouge
Mohammed Subhi Sheikh Quroush

1

Voici une autre solution (basée sur les réponses suggérées) qui gère le style des boîtes de dialogue dans une classe sans avoir à se soucier de l'état de la boîte de dialogue lorsque vous modifiez le style - la boîte de dialogue peut être déjà affichée ou simplement initialisée.

Exemple d'utilisation:

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

La mise en oeuvre:

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

Poursuivant cette réponse: https://stackoverflow.com/a/15285514/1865860 , j'ai forké le joli repo github de @ daniel-smith et j'ai apporté quelques améliorations:

  • Exemple d'activité amélioré
  • mises en page améliorées
  • fixé setItemsméthode
  • ajout de diviseurs dans items_list
  • fermer les boîtes de dialogue au clic
  • prise en charge des éléments désactivés dans les setItemsméthodes
  • listItem rétroaction tactile
  • message de dialogue déroulant

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


0

Au lieu d'utiliser le séparateur dans la boîte de dialogue, utilisez la vue dans la mise en page personnalisée et définissez la mise en page comme mise en page personnalisée dans la boîte de dialogue.

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

Si vous utilisez l'extension de la boîte de dialogue, utilisez:

requestWindowFeature(Window.FEATURE_NO_TITLE);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.