Android text not scaling appropriately on Nexus 6

Question

I have currently been tasked with scaling the UI from my tablet device Nexus 7 to the phone device Nexus 6.

I have read the resources and information at: http://developer.android.com/guide/practices/screens_support.html

And what I took from it was that I was required to use DP and SP across the system for every form of sizing or scaling, I was quite happy to realise that I already had this system in place, however when I went to load it up on the Nexus 6 I found that the font sizing wasn't scaling as I'd expect in portrait, however in landscape the device seems to scale and display as expected.

Snippet of Table Layout/Row for Buttons displayed above

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:stretchColumns="*" >

    <TableRow
        android:paddingBottom="20dp"
        android:paddingTop="20dp" >

        <Button
            android:id="@+id/H_btnWork"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_marginRight="10dp"
            android:layout_weight="0.333"
            android:background="#ffc837"
            android:gravity="center_vertical|center_horizontal"
            android:height="100dp"
            android:maxHeight="100dp"
            android:minHeight="100dp"
            android:paddingRight="5dp"
            android:text="Scheduled Work"
            android:textSize="20sp" />

        <Button
            android:id="@+id/H_btnDaywork"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_marginRight="10dp"
            android:layout_weight="0.333"
            android:background="#ffc837"
            android:gravity="center_vertical|center_horizontal"
            android:height="100dp"
            android:maxHeight="100dp"
            android:minHeight="100dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="Scheduled Attendance"
            android:textSize="20sp"/>

        <Button
            android:id="@+id/H_btnVariation"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_marginRight="10dp"
            android:layout_weight="0.333"
            android:background="#ffc837"
            android:gravity="center_vertical|center_horizontal"
            android:height="100dp"
            android:maxHeight="100dp"
            android:minHeight="100dp"
            android:paddingRight="5dp"
            android:text="Variations"
            android:textSize="20sp"
            android:visibility="visible" />
    </TableRow>

AndroidManifest.xml extract

<compatible-screens>
    <!--no small size screens -->


    <!--all normal size screens -->
    <screen android:screenSize="normal" android:screenDensity="ldpi" />
    <screen android:screenSize="normal" android:screenDensity="mdpi" />
    <screen android:screenSize="normal" android:screenDensity="hdpi" />
    <screen android:screenSize="normal" android:screenDensity="xhdpi" />
     <screen android:screenSize="normal" android:screenDensity="560" />

    <!-- all large size screens -->
    <screen android:screenSize="large" android:screenDensity="ldpi" />
    <screen android:screenSize="large" android:screenDensity="mdpi" />
    <screen android:screenSize="large" android:screenDensity="hdpi" />
    <screen android:screenSize="large" android:screenDensity="xhdpi" />
     <screen android:screenSize="large" android:screenDensity="560" />

    <!-- all xlarge size screens -->
    <screen android:screenSize="xlarge" android:screenDensity="ldpi" />
    <screen android:screenSize="xlarge" android:screenDensity="mdpi" />
    <screen android:screenSize="xlarge" android:screenDensity="hdpi" />
    <screen android:screenSize="xlarge" android:screenDensity="xhdpi" />
    <screen android:screenSize="xlarge" android:screenDensity="560" />

    <!-- Special case for Nexus 7 -->
    <!-- <screen android:screenSize="large" android:screenDensity="213" />-->

    </compatible-screens>

Any help tips or resources that could help me in properly scaling the UI would be greatly appreciated. Thank you.

Answer 1

if you need to individually fine tune dimensions, the best practice is to extract the sizes to separate /values/dimen.xml.

so you change all the buttons from:

android:textSize="20sp"

to

android:textSize="@dimen/text_size"

and then you have as many dimen.xml file as you need like this:

/values/dimen.xml this is the default

<?xml version='1.0' encoding='UTF-8'?>
<resources>
   <dimen name="text_size">20sp</dimen>
</resources>

/values-sw600dp/dimen.xml this is used on tablet

<?xml version='1.0' encoding='UTF-8'?>
<resources>
   <dimen name="text_size">22sp</dimen>
</resources>

/values-land/dimen.xml this is used on landscape

<?xml version='1.0' encoding='UTF-8'?>
<resources>
   <dimen name="text_size">18sp</dimen>
</resources>

/values-sw600dp-land/dimen.xml this is used on tablet landscape

<?xml version='1.0' encoding='UTF-8'?>
<resources>
   <dimen name="text_size">20sp</dimen>
</resources>

important notes:

• you don't have to do all of those files, you just add the ones that you need to change. For example, a tablet in landscape, if there's no sw600dp-land then the system will pick from sw600dp, if sw600dp doesn't exist then it gets from land if that doesn't exist it gets from the default. The important is to always have a default.

• delete <compatible-screens> from your manifest, is not doing any good.