Search code examples
javaandroidandroid-studioandroid-alertdialogandroid-xml

Android change color of AlertDialog elements


I would like to change the colors of the AlertDialog elements using only xml.

The elements I want to change using xml are:

  1. Background color of the AlertDialog
  2. Url text color
  3. Line color of textInput when focused
  4. Color of the text on the two AlertDialog buttons

I would like the size of the AlertDialog to remain unchanged.

I tried using the styles: How can I change default dialog button text color in android 5

But they don't work and the size of the AlertDialog changes, it shrinks.

Can you give me a hand?

enter image description here

public void AlertDialog() {
        View viewInflated = LayoutInflater.from(MainActivity.this).inflate(R.layout.text_input, null);
        final EditText input = (EditText) viewInflated.findViewById(R.id.input);
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setTitle("Url");
        builder.setView(viewInflated);
        builder.setPositiveButton(android.R.string.ok, (dialog, which) -> {
            dialog.dismiss();
            String text = input.getText().toString();
            if (!text.equals("")) pinAppWidget(text);
        });
        builder.setNegativeButton(android.R.string.cancel, (dialog, which) -> dialog.cancel());
        builder.show();
    }

text_input.xml

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

    <AutoCompleteTextView
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text"
        android:imeOptions="actionDone"
        android:inputType="text" />

</FrameLayout>

values/themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Test" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
        <item name="android:statusBarColor">@color/colorPrimary</item>
    </style>

    <style name="Theme.Test" parent="Base.Theme.Test" />
</resources>

values-night/themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Test" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your dark theme here. -->
        <!-- <item name="colorPrimary">@color/my_dark_primary</item> -->
        <item name="android:statusBarColor">@color/colorPrimary</item>
    </style>
</resources>

Solution

  • How you limited this a only xml files, you can stared with you theme. You're gonna need create a new theme that inherits the desired characteristics, let's use Theme.MaterialComponents.DayNight.Dialog.Alert that will serve for you. Then override the theme defaut properts of AlertDialog. You can make this it.

    <resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Test" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
        <item name="android:statusBarColor">@color/colorPrimary</item>
        <item name="alertDialogTheme">@style/Theme.CustomThemeAlertDialog</item>
    </style>
    <style name="Theme.CustomThemeAlertDialog" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
        <!--Background color-->
        <item name="android:background">#0000ff</item>
    
        <!--tittle color-->
        <item name="android:textColor">#000000</item>
    
        <!--text color of message-->
        <item name="android:textColorPrimary">#ff0000</item>
    
        <!--text color of buttons-->
        <item name="colorPrimary">#FFFF00</item>
    </style>
    <style name="Theme.Test" parent="Base.Theme.Test" />
    

    The default result of an simple AlertDialog is this it (without your custom View)enter image description here

    And to finish add the properts android:textColor="@color/color_text_url" (for Url text color) and android:backgroundTint="@color/color_line_input_url" (for Line color of textInput when focused) in your AutoCompleteTextView

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="4dp">
    
    <AutoCompleteTextView
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text"
        android:imeOptions="actionDone"
        android:inputType="text"
        android:textColor="@color/color_text_url"
        android:backgroundTint="@color/color_line_input_url" />
    
    </FrameLayout>
    

    And is that