Android scaling text and images based on screen size (phone vs tablet)

Question

I have a good understanding of the difference between px, dp and sp. The problem is, when I put a TextView ( or ImageView ) on the screen, the dpi is irrelevant. On a 3 inch high screen with 160 dpi, a text size of 80px will be 1/2 an inch, or 1/6th the height. On a 7 inch high screen with 160 dpi, it's still 1/2 inch, but that is now 1/14th of the height.

The problem is, using dp (or sp), what looks good on a phone disappears on a tablet.

Is there a way to specify fractional screen size, like percent?

Answer 1

I not sure if you can specify size in percent, but why you dont define different dimensions for screen in dimen.xml file. It is very hard to use the same values dp and sp for all screen sizes.

You need to create different dimens.xml different resource folders

 res/values-ldpi/dimens.xml
 res/values-mdpi/dimens.xml
 res/values-hdpi/dimens.xml

Next add some values to these files

 <!-- in values-ldpi/dimens.xml -->
 <dimen name="textSize">25dip</dimen>

 <!-- in values-mdpi/dimens.xml -->
 <dimen name="textSize">20dip</dimen>

Finaly reference to dimensions in your layout file:

<TextView
    android:layout_toRightOf="@id/at"
    android:layout_below="@id/hw"
    android:textSize="@dimen/textSize"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

EDIT:

If you want set height of image to 1/10 of screen size you need to use android:layout_weight attribute in your view containers. Check the example below.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        >

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/imageView"
            android:background="@drawable/ic_launcher" />
    </LinearLayout>

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:weightSum="1"
            android:layout_weight="9"
            >
 </LinearLayout>

 </LinearLayout>

Answer 2

This will give textSize depending upon the density.

  TextView text = new TextView(this);
  text.setText("text");
  TextView.setTextSize(16 * getResources().getDisplayMetrics().density);

OR

Create dimens.xml in values-ldpi,mdpi and hdpi.

<dimen name="textSize">30dip</dimen>
<dimen name="textSize">10dip</dimen>

and then add this in your layout.

<TextView
android:textSize="@dimen/textSize"
    //rest code here
/>