MyNotes: Setting the Mood

One of the first steps of the Material changes is to customize the theme.  For now, I am using the light Material theme as the base theme.  I may add a feature later to let the user switch to a dark theme.

The light themes can be a little hard on the eyes and they are blinding in a dark room, but they are pretty and show the shadows well.

The hard part is that I have to pick my color schemes to use as my application theme.  Google has provide the material color palettes in the design guide.  There also websites that will build your color palette based on a primary color.  The one I used is Material Palette.  Blue happens to be my favorite color, so I used a soft blue-gray as my primary color.  From there it build my palette for me:

To import this into my app requires some XML changes.

Step 1: Value Resource Updates

I like to keep my values resource xml files seperated based on functionality.  I stuck my theme colors in their own xml file named colors_theme.xml with the following content:

<resources>
    <item name="primaryColor" type="color">#607D8B</item>
    <item name="darkPrimaryColor" type="color">#455A64</item>
    <item name="lightPrimaryColor" type="color">#CFD8DC</item>

    <item name="accentColor" type="color">#FF9800</item>
    <item name="accentColorRipple" type="color">#FFE0B2</item>

    <item name="dividerColor" type="color">#b5b6b6</item>
    <item name="secondaryTextColor" type="color">#727272</item>
    <item name="primaryTextColor" type="color">@android:color/black</item>
</resources>

I then created a themes.xml file that contains my app theme style:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Main theme colors -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/darkPrimaryColor</item>
        <item name="colorAccent">@color/accentColor</item>
        <item name="android:textColorSecondary">@color/secondaryTextColor</item>
        <item name="android:textColorPrimary">@color/primaryTextColor</item>

    </style>
</resources>

Step 2: Manifest Updates

This one is really easy.  I just added an attribute to the application tag to use my app theme:

<application android:name=".MyNotesApplication" android:label="@string/app_name" android:icon="@drawable/my_icon" android:theme="@style/AppTheme">

Commits

That is it. My app now uses my new theme.  Please find the changes at https://github.com/fsk-software/mynotes/commit/7075f9c86d54af9e55015759d04a64169d0cb4c4