Wednesday 14 November 2018

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;

            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" ?>
  <style name="MainTheme" parent="MainTheme.Base">
  <!-- 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 -->
    <!-- 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 name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>

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>

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

Monday 12 November 2018

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