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.

Xamarin image assets

When adding image assets to your xamarin forms app, they have to be located in your various device specific projects with various sizes that your hardware decides which to use.

for IOS you place all of your images in the resource folder using the following naming convention with a build action of BundleResouce

Path	Naming convention	Ratio	size
/Resources	myfile.png	1	25px^2
/Resources	myfile@2x.png	2	50px^2
/Resources	myfile@3x.png	3	75px^2

whereas for Droid it would look like with a build action of AndriodResource

Path	Naming convention	Ratio	size
/Resources/drawable-hdpi/	myfile.png	3	75px^2
/Resources/drawable-xhdpi/	myfile.png	4	100px^2
/Resources/drawable-xxhdpi/	myfile.png	6	150px^2
/Resources/drawable-xxxhdpi/	myfile.png	8	200px^2

and finally for UWP they are as follows with an build action of Content

Path	Naming convention	Ratio	size
/Assets	myfile-100.png	1	25px^2
/Assets	myfile-200.png	2	50px^2
/Assets	myfile-400.png	4	100px^2