Droid Themes

You can think of your Droid theme as a global CSS file for you android project, its the perfect place to modify the global styling of your application. To check which theme is applied by default to you android project open "MainActivity.cs" file in your project root.

now when you open your "MainActivity.cs" file you can identify which default theme you have assigned to your android application.

using Android.App;

using Android.Content.PM;

using Android.OS;

namespace pav.formEffects.Droid

{

    [Activity(Label = "pav.formEffects",

              Icon = "@mipmap/icon",

              Theme = "@style/MainTheme",

              MainLauncher = true,

              ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity

    {

        protected override void OnCreate(Bundle savedInstanceState)

        {

            TabLayoutResource = Resource.Layout.Tabbar;

            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

            LoadApplication(new App());

        }

    }

}

We can see from the Activity attribute on your Main Activity class that we are using our MainTheme; to see our main theme you can check under the resources/values/styles.xml file. Here you'll see something like the following:

<?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>

    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->

    <!-- colorPrimary is used for the default action bar background -->

    <item name="colorPrimary">#2196F3</item>

    <!-- colorPrimaryDark is used for the status bar -->

    <item name="colorPrimaryDark">#1976D2</item>

    <!-- colorAccent is used as the default value for colorControlActivated

         which is used to tint widgets -->

    <item name="colorAccent">#FF4081</item>

    <!-- You can also set colorControlNormal, colorControlActivated

         colorControlHighlight and colorSwitchThumbNormal. -->

    <item name="windowActionModeOverlay">true</item>

    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>

  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">

    <item name="colorAccent">#FF4081</item>

  </style>

</resources>

now go ahead and add the following to your MainTheme.

<style name="MainTheme" parent="MainTheme.Base">

  <item name="colorPrimary">#FF0000</item> <!--Red-->

  <item name="colorPrimaryDark">#00FF00</item> <!--Green-->

  <item name="colorAccent">#00FFFF</item> <!--Aqua-->

  <item name="android:textColor">#FFFF00</item> <!--yellow-->

  <item name="android:textColorPrimary">#FF00FF</item> <!--fuchsia-->

  <item name="android:windowBackground">@color/launcher_background</item>

  <item name="colorButtonNormal">#FF0000</item>

  <item name="colorControlHighlight">@color/colorAccent</item>

</style>

with just some simple changes like the ones above we can transform our normal look & feel.