Jak używać i stylizować nowy AlertDialog z appCompat 22.1 i nowszych


154

Próbuję migrować z domyślnego Androida AlertDialogdo nowego zawartego w appCompat-22.1. Jak dotąd rozumiem, że wystarczy zaimportować android.support.v7.app.AlertDialogpakiet, aby go użyć.

Ale jak mogę to stylizować? Na przykład zmienić kolory przycisków pozytywów / negatywów, kolor tytułu, kolor wiadomości i kolor tła?

Odpowiedzi:


448

Podczas tworzenia AlertDialogmożesz ustawić motyw do użycia.

Przykład - tworzenie okna dialogowego

AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.MyAlertDialogStyle);
builder.setTitle("AppCompatDialog");
builder.setMessage("Lorem ipsum dolor...");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();

styles.xml - styl niestandardowy

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <!-- Used for the buttons -->
    <item name="colorAccent">#FFC107</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">#FFFFFF</item>
    <!-- Used for the background -->
    <item name="android:background">#4CAF50</item>
</style>

Wynik

stylizowany alertdialog

Edytować

Aby zmienić wygląd tytułu, możesz wykonać następujące czynności. Najpierw dodaj nowy styl:

<style name="MyTitleTextStyle">
    <item name="android:textColor">#FFEB3B</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat.Title</item>
</style>

potem po prostu odwołaj się do tego stylu w MyAlertDialogStyle:

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    ...
    <item name="android:windowTitleStyle">@style/MyTitleTextStyle</item>
</style>

W ten sposób możesz zdefiniować inny textColordla wiadomości przez, android:textColorPrimarya inny dla tytułu za pomocą stylu.


2
Dziękuję @reVerse Jeszcze jedno. Wiele bibliotek pozwala na różne kolory tytułu i tekstu. Czy wiesz, czy to również jest możliwe?
ThanosFisherman

3
Cześć znowu! Czy istnieje sposób na zmianę rozmiaru tekstu wiadomości?
ThanosFisherman

1
@ThanosF Niestety nie znam żadnego atrybutu xml, który to robi. Ale z pewnością jest to możliwe dzięki Java-Code.
cofnij

2
@summers Jup. Taki jest zasadniczo pomysł appcompat-v7- przywraca wsteczną kompatybilność nowszych komponentów do poziomu API 7 (Android 2.1)
reVerse

1
Aby kolor tekstu przycisków działał na 21+, musiałem mieć element android: buttonStyle na „MyAlertDialogStyle” i element android: textColor w niestandardowym stylu przycisku.
Tim Autin

61

Aby użyć motywu dla całej aplikacji i nie używać drugiego parametru do stylizacji okna dialogowego

<style name="MyTheme" parent="Base.Theme.AppCompat.Light">
    <item name="alertDialogTheme">@style/dialog</item>
    <item name="colorAccent">@color/accent</item>
</style>

<style name="dialog" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">@color/accent</item>
</style>

W mojej aplikacji używającej akcentu kolorystycznego w motywie nie pokazuj przycisków alertDialog z motywem colorAccent Muszę dodać styl okna dialogowego w motywie.


Nie działa na API 10 (Android 2.3), prawdopodobnie tylko na API 11+.
Oliv

2
Może na API 15+. Nowy projekt zaczynam tylko na API 15+, myślę, że Android przed 4 jest przestarzały w 2015 roku.
neoteknic

@Oliv Działa na API 10 przy użyciu zależności com.android.support:design:23.2.1
passerby

IDEA mówi, że API 21+ jest wymagane do korzystania z colorAccent w Base.Theme.AppCompat.Light.Dialog.Alert przy użyciu „com.android.support:design:22.2.1”
Felipe Andrade

@Felipe Andrade Zawsze celuj w najnowszą wersję SDK, powinno działać! Mam projekt z min api 15 i projektem docelowym 25: 22.x jest przestarzały, użyj 25.1.x i więcej
neoteknic

19

Jeśli chcesz korzystać z nowego android.support.v7.app.AlertDialog i mieć różne kolory przycisków, a także mieć niestandardowy układ, spójrz na mój https://gist.github.com/JoachimR/6bfbc175d5c8116d411e

@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    View v = inflater.inflate(R.layout.custom_layout, null);

    initDialogUi(v);

    final AlertDialog d = new AlertDialog.Builder(activity, R.style.AppCompatAlertDialogStyle)
            .setTitle(getString(R.string.some_dialog_title))
            .setCancelable(true)
            .setPositiveButton(activity.getString(R.string.some_dialog_title_btn_positive),
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            doSomething();
                            dismiss();
                        }
                    })
            .setNegativeButton(activity.getString(R.string.some_dialog_title_btn_negative),
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            dismiss();
                        }
                    })
            .setView(v)
            .create();

    // change color of positive button         
    d.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            Button b = d.getButton(DialogInterface.BUTTON_POSITIVE);
            b.setTextColor(getResources().getColor(R.color.colorPrimary));
        }
    });

    return d;
}

wprowadź opis obrazu tutaj


To wspaniale! Dziękuję
ThanosFisherman

Dzięki, to jedyny sposób, w jaki to zadziałało, ale czy możesz mi powiedzieć, jak mogę również uzyskać kolor pola wyboru? W mojej aplikacji jest okno dialogowe z listą przycisków opcji utworzonych za pomocą Builder setSingleChoiceItems(CharSequence[] items, int checkedItem, final OnClickListener listener). Nie chcę posuwać się do podklasy adaptera i poprawiania tam widoku.
Gabor

ciężka artyleria jest tym, co zawsze działa! Musiałem to wykorzystać, aby zająć się 2 przyciskami rebeliantów, które zawsze odmawiały zmiany koloru akcentu!
rupps

7

Postępuj zgodnie z odpowiedzią @reVerse, ale w moim przypadku miałem już pewną właściwość w moim AppThemepodobnym

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:textColor">#111</item>
    <item name="android:textSize">13sp</item>
</style>

Więc mój dialog będzie wyglądał
wprowadź opis obrazu tutaj

Rozwiązałem to przez

1) Zmień import z android.app.AlertDialogna android.support.v7.app.AlertDialog
2) Nadpisuję właściwość 2 in AppThemewartością null

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <!-- Used for the buttons -->
    <item name="colorAccent">#FFC107</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">#FFFFFF</item>
    <!-- Used for the background -->
    <item name="android:background">#4CAF50</item>


    <item name="android:textColor">@null</item>
    <item name="android:textSize">@null</item>
</style>

.

AlertDialog.Builder builder = new AlertDialog.Builder(mContext, R.style.MyAlertDialogStyle);

Mam nadzieję, że pomoże to innym ludziom

wprowadź opis obrazu tutaj


Ah dziękuję! Nie korzystałem z pomocy AlertDialog.
masterwok

1

Jeśli jesteś podobny do mnie, chcesz po prostu zmodyfikować niektóre kolory w AppCompat, a jedynym kolorem, który musisz w wyjątkowy sposób zmienić w oknie dialogowym, jest tło. Następnie wszystko, co musisz zrobić, to ustawić kolor colorBackgroundFloating.

Oto mój podstawowy motyw, który po prostu modyfikuje niektóre kolory bez zagnieżdżonych motywów:

    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/theme_colorPrimary</item>
        <item name="colorPrimaryDark">@color/theme_colorPrimaryDark</item>
        <item name="colorAccent">@color/theme_colorAccent</item>
        <item name="colorControlActivated">@color/theme_colorControlActivated</item>
        <item name="android:windowBackground">@color/theme_bg</item>
        <item name="colorBackgroundFloating">@color/theme_dialog_bg</item><!-- Dialog background color -->
        <item name="colorButtonNormal">@color/theme_colorPrimary</item>
        <item name="colorControlHighlight">@color/theme_colorAccent</item>
    </style>

-3
    <item name="editTextColor">@color/white</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHint">@color/gray</item>
    <item name="android:textColorPrimary">@color/gray</item>
    <item name="colorControlNormal">@color/gray</item>
    <item name="colorControlActivated">@color/white</item>
    <item name="colorControlHighlight">#30FFFFFF</item>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.