Mobiele apps programmeren met Xamarin – Android – Het Material Thema wijzigen

print

Inhoud

Wat vooraf ging

Deze post richt zich uitsluitend op Android!

Een eenvoudig project

  • Start een nieuw Xamarin-project.
  • Pas de XAML van MainPage.xaml aan zoals hieronder. Er worden gewoon een aantal objecten toegevoegd.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TestThema" x:Class="TestThema.MainPage">
    <StackLayout Margin="10" Spacing="10">
	    <Label Text="PCVO Dender en Schelde!" FontSize="Large" VerticalOptions="Start" HorizontalOptions="Center" />
        <Entry Placeholder="Vul uw naam in" ></Entry>
        <Slider Maximum="100" ></Slider>
        <DatePicker ></DatePicker>
        <Button Text="OK"></Button>
    </StackLayout>

</ContentPage>

Mooi he?

Of toch niet, wat als u deze kleuren, bv. van de DatePicker niet zo geslaagd vindt?

Heeft deze DatePicker dan geen eigenschappen om deze kleuren te veranderen? Wel, nee, een kijkje in de klasse van de DatePicker toont geen eigenschappen om de kleuren te wijzigen (behalve de tekstkleur).

Waar komen deze kleuren vandaan?

  • Open MainActivity.cs onder het Android-project.

Hier wordt verwezen naar het thema Theme = "@style/MainTheme".

using Android.App;
using Android.Content.PM;
using Android.OS;

namespace TestThema.Droid
{
    [Activity(Label = "TestThema", Icon = "@drawable/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 bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    }
}

Waar staat deze stijl en dit thema nu?

U vindt dit onder uw Android Project – Resources – Values – Styles.xml.

  • Open Styles.xml. U krijgt onderstaande xml, de huidige toegepaste stijl.
<?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>

Als u enkel de kleur van de DatePicker wilt wijzigen merk dan op dat er naar de DatePicker verwezen wordt via:

<?xml version="1.0" encoding="utf-8" ?>
<resources>

     ...

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

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

U kunt nu hier de kleurcode wijzigen, laat u hiervoor inspireren door de het Android Material Kleurschema. Ik kies bv. voor een blauwe kleur en wijzig de code in:

<?xml version="1.0" encoding="utf-8" ?>
<resources>

     ...

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

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#2196F3</item>
  </style>
</resources>

Android Material Design

Android Material Design komt met 3 standaard thema’s:

  • Dark
  • Light
  • Light.DarkActionBar

Deze 3 thema’s zijn in Xamarin.Forms toegankelijk via AppCompat.

  • Dark – Theme.AppCompat
  • Light – Theme.AppCompat.Light
  • Light.DarkActionBar – Theme.AppCompat.Light.DarkActionBar

In bovenstaande code van Styles.xml wordt het thema Theme.AppCompat.Light.DarkActionBar via:

<?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">
  ...
  </style>

</resources>

Kuis Styles.xml op tot (merk op dat ik windowActionBar gewijzgd heb naar true:

<?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">true</item>

  </style>
</resources>

Test nu zelf de 3 basisstijlen uit door parent="Theme.AppCompat.Light.DarkActionBar" te wijzigen naar het gewenste thema.

Eigen kleuren kiezen

De 3 basisthema’s zijn grondig doordacht maar… wat als u toch een eigen kleuraccent wilt geven.

dit kan uiteraard en is eigenlijk al gedaan in basisthema. Laten we dit even hernemen:

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

Merk op dat er voor verschillende items kleuren zijn gewijzigd:

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

    ...

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

   ... 

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

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

Onderstaande afbeelding toont welke onderdelen u een eigen kleur kunt geven en waarvoor ze gebruikt worden.

Maak bij het kiezen van de gewenste kleuren gebruik van het Android Material Kleurschema!

Compatibiliteit inbouwen

Het Android Material design is geïntroduceerd met Android 5.0 Lollipop.

AppCompat maakt Android Material design compatibel met oudere Android versies.

Maar stel dat u toch specifieke Android 5 Lollipop (of hoger) opmaak wilt toevoegen dan kan dit ook.

  • Voeg een map Resources/values-v21 toe.
  • Kopieer het bestand Styles.xml naar deze map.
  • Voeg nu aan het bestand Styles.xml in de map Resources/values-v21 de opmaak toe voor Android 5.0 Lollipop en hoger. Behoudt dezelde naam voor het thema als in het originele Styles.xml.

Tabbar en Toolbar opmaken

U kunt nog een stapje verder gaan een eveneens de Tabbar en Toolbar een eigen stijl geven.

U vindt deze terug onder Resources/Layout binnen het Android-project.

Het zou me te ver leiden om dit hier in detail te behandelen maar onthoudt dat als u dit zou wensen, dit mogelijk is.

Hoor het eens van iemand anders

Onderstaande video van de Xamarin University legt uit hoe u vanaf nul de Material Design kunt toepassen. Veel van wat hier besproken wordt is ondertussen standaard opgenomen in Xamarin 2017. Toch is het interessant de achterliggende logica eens te bekijken.

Behandelde Basiscompetenties uit de module ICT Programmeren – Specifieke ontwikkelomgeving: eenvoudige functionaliteiten

  • IC BC017 – kan ICT veilig en duurzaam gebruiken
  • IC BC249 – kan de instellingen van een specifieke ontwikkelomgeving wijzigen
  • IC BC288 – kan ICT-problemen oplossen

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.