Customizing Theme.AppCompat.Light.DarkActionBar

In a new blank project using the Master-Detail Xamarin.Forms template, the Android project renders with a light grey background and dark grey text. I'm trying to change that to a pure white background and pure black text by customizing the Theme.AppCompat.Light.DarkActionBar theme. The template has a style named MainTheme.Base where attributes such as colorPrimary can be used to change the app bar color, etc.

I'm following the documentation for Xamarin.Android / User Interface / Material Theme and it says "Add color customizations to styles.xml by defining the colors of layout attributes that you want to change. "

Where can I find a complete list of those layout attributes, or, which ones correspond to the background and text color? I tried this:

<item name="android:background">@color/white</item> but that also made the text background in the app bar white, so is there a separate attribute I need to change that back to my colorPrimary color?

<item name="android:windowBackground">@color/white</item> didn't make any changes that I could see.

Thanks for any assistance you can provide.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post a basic demo?

  • joshbulajoshbula Member

    @jezh said:
    Could you please post a basic demo?

    colors.xml :

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="launcher_background">#a31f39</color>
        <color name="colorPrimary">#a31f39</color>
        <color name="colorPrimaryDark">#79172a</color>
        <color name="colorAccent">#c22342</color>
        <color name="splash_background">#ffffff</color>
        <color name="white">#ffffff</color>
        <color name="black">#000000</color>
        <color name="colorListViewSelectedBackground">#E5E7E9</color>
    </resources>
    

    styles.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="MainTheme" parent="MainTheme.Base">
        </style>
        <!-- Base theme applied no matter what API -->
        <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
            <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
            <item name="windowNoTitle">true</item>
            <!--We will be using the toolbar so no need to show ActionBar-->
            <item name="windowActionBar">false</item>
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
            <item name="colorAccent">@color/colorAccent</item>
            <!-- You can also set colorControlNormal, colorControlActivated
             colorControlHighlight and colorSwitchThumbNormal.-->
            <item name="android:colorPressedHighlight">@color/ListViewSelected</item>
            <item name="android:colorLongPressedHighlight">@color/ListViewHighlighted</item>
            <item name="android:colorFocusedHighlight">@color/ListViewSelected</item>
            <item name="android:colorActivatedHighlight">@color/ListViewSelected</item>
            <item name="android:activatedBackgroundIndicator">@color/ListViewSelected</item>
            <item name="windowActionModeOverlay">true</item>
            <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
            <item name="android:windowBackground">@color/white</item>
            <item name="android:textColor">@color/black</item>
            <!-- WHAT SHOULD I PUT HERE TO MAKE THE BACKGROUND WHITE INSTEAD OF LIGHT GREY? -->
            <item name="android:windowBackground">@color/white</item><!--NOT WORKING-->
        </style>
        <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
            <item name="colorAccent">@color/colorAccent</item>
        </style>
        <color name="ListViewSelected">@color/colorListViewSelectedBackground</color>
        <color name="ListViewHighlighted">@color/colorListViewSelectedBackground</color>
        <style name="SplashTheme" parent="SplashTheme.Base">
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">@color/black</item>
            <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
            <item name="colorAccent">@color/colorAccent</item>
        </style>
        <style name="SplashTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:windowBackground">@drawable/splash_screen</item>
        </style>
    </resources>
    
Sign In or Register to comment.