Lab: Flexible Dimensions

In this lab, we'll use the qualifier system and dimensions to scale our view for different form factors.

If you don't have access to a Nexus 5, please create an instance using Genymotion.

Remove ActionBar

The ActionBar in this case doesn't help our application since we'll only be showing one screen and don't have any configuration or navigation options. It's just taking up valuable screen real estate!

On newer OSes you get it by default unless you explicitly exclude it in the manifest file:

<application
    android:label="@string/app_name"
    android:icon="@drawable/ic_launcher"
    android:name=".CalculatorApplication"
    android:theme="@android:style/Theme.NoTitleBar">

Alternate dimens.xml

Let's create a folder called values-w350dp and a dimens.xml in that folder. Here is where you'd put your values you'd like to use on screens with at least 350dp in screen width.

<resources>
    <!--Keys-->
    <dimen name="button_dimensions">78dp</dimen>
    <dimen name="button_margin">4dp</dimen>
    <dimen name="key_text_size">50sp</dimen>

    <!--Zero-->
    <dimen name="zero_key_width">164dp</dimen>

    <!--Equals-->
    <dimen name="equals_button_width">250dp</dimen>

    <!--Display-->
    <dimen name="display_margin">8dp</dimen>
    <dimen name="display_text_size">40sp</dimen>
</resources>

You don't have to copy all the dimensions over from values/dimens.xml - just the ones that you are interested in overwriting.

Adjust display & commit

I adjusted my display margins after adjusting all my buttons to make the edges line up better.