Android relative layout and different screen sizes/devices

Question

I just wrote all this and I'm being told by this little red bar that I can't post pictures, or more than two links. So if you could kindly reference this Imgur album, that'd be great. Thank you.

I'm relatively new here and even newer to android programming. I am trying to write an app that emphasizes visual appeal more than functional appeal. It's not an assignment or work related, it's just something I wanna try out.

So I've hit a roadblock. I am wrangling with the layout of some TextView boxes when in different emulators and devices. I have been reading this but it's kind of long and it doesn't seem to solve my problem and honestly, it's just over my head.

So here's my issue.

I have some TextView boxes and I used the layout attributes in XML, and in the Design window with a Nexus 4 mock device in Android studio, it looks like this (Image 1)

The code looks like this:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/anger"
    android:id="@+id/angertv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd="36dp"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/happiness"
    android:id="@+id/happinesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_alignParentStart="true"
    android:layout_marginStart="34dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/fear"
    android:id="@+id/feartv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_marginTop="165dp"
    android:layout_marginEnd="100dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sadness"
    android:id="@+id/sadnesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="165dp"
    android:layout_marginStart="66dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/surprise"
    android:id="@+id/surprisetv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="165dp"
    android:layout_marginStart="60dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/disgust"
    android:id="@+id/disgusttv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="165dp"
    android:layout_marginEnd="74dp" />

I have been using the parent borders to position the 6 words on the devices screen. But when time comes to run it, it looks like this (Image 2) on a Nexus 5 emulator screen, and when on an actual HTC One m8, it looks like this (Image 3).

So I try something like this instead:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/center"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/anger"
    android:id="@+id/angertv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_toEndOf="@+id/center"
    android:layout_marginStart="70dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/happiness"
    android:id="@+id/happinesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_toStartOf="@+id/center"
    android:layout_marginEnd="67dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/fear"
    android:id="@+id/feartv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_above="@+id/center"
    android:layout_toEndOf="@+id/center"
    android:layout_marginBottom="67dp"
    android:layout_marginStart="30dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sadness"
    android:id="@+id/sadnesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_below="@+id/center"
    android:layout_toStartOf="@+id/center"
    android:layout_marginTop="68dp"
    android:layout_marginEnd="12dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/surprise"
    android:id="@+id/surprisetv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_above="@+id/center"
    android:layout_toStartOf="@+id/center"
    android:layout_marginBottom="67dp"
    android:layout_marginEnd="10dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/disgust"
    android:id="@+id/disgusttv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_below="@+id/center"
    android:layout_toEndOf="@+id/center"
    android:layout_marginTop="68dp"
    android:layout_marginStart="16dp" />

I use an extra TextView (ID'd center) which is aligned to the center of the device, which is empty and use it to align it the other Views with text in them. These are the results.

Design window Nexus 4: (Image 4)

Nexus 5 emulator: (Image 5)

HTC One m8: (Image 6)

It's better but not quite. Ideally, the words should stay in one place inside the pie slices I have made. I have been looking around but nothing seems specific, and since I'm a beginner at all this, I can't seem to extrapolate from peoples answers to other questions that are maybe similar but not quite like this situation.

If anyone could explain to me how I can solve this issue, or point me in the right direction, I would be very grateful. Thank you.

Answer 1

You can use @dimen different dimen files so that different screen sizes will have different font sizes.

android:textSize="@dimen/text_28"

Have the dimen values in different directories:

res/values/dimen.xml

<dimen name="text_28">28sp</dimen>

res/values-600dp/dimen.xml

<dimen name="text_28">22sp</dimen>

etc.

You'll have to play around with different font sizes and screen sizes but you should be able to find something that works.

http://developer.android.com/training/multiscreen/screensizes.html#TaskUseSizeQuali

And this page shows some popular device metrics: https://design.google.com/devices/