How do I keep Text Size in TextView consistent over different screen sizes and densities?

Question

I have read many Q&A's regarding this and none of them worked. They were most likely outdated. Surely there is a simple solution to this. I am developing a UI that is a static picture background (which scales fine across all devices despite lack of density buckets), with TextViews layout out over the background (see pics).

1. Looks fine:

2. Doesn't look fine:

   

I have tried laying out the text in many different ways, currently from the center (there is an invisible image called centredot, since I am unsure of how to layout pixel distance from center). I have tried sp and dp they both react the same. I just want my text to consistently line up with the image. I can use buttons instead if that fixes the problem but I am unsure of how to do that as well.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".Main2Activity">

    <TextView
        android:id="@+id/mpView"
        android:layout_width="wrap_content"
        android:layout_height="0sp"
        android:layout_marginTop="208dp"
        android:layout_marginEnd="52dp"
        android:autoSizeTextType="none"
        android:onClick="mpRanges"
        android:text="@string/mp"
        android:textColor="#FFFFFF"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/centreDot"
        app:layout_constraintTop_toTopOf="@+id/centreDot" />

Answer 1

您可以使用这个库，这将在不同的屏幕尺寸上保持相同的字体大小。

Answer 2

If your image is not fixed by specific size in dp, you can't set TextView position with fixed dp value.

Imagine your image is 100px in width and scales to device width.

On one device display width is 200dp, so 100px image scales to 200dp. On another device display width is 400dp, so 100px scales to 400dp. Now lets calculate image center in dp: it's 100dp in the first case, and 200dp in the second one! That's why you can't make it look good on all devices.

To fix this you need to create custom ViewGroup (may be child of FrameLayout). In runtime you will be able to get real image size and calculate positions for all TextViews relatively to your image. Seems you even not need to implement onMeasure() and onDraw(), just onLayout().

Official documentation for creationg custom views:https://developer.android.com/guide/topics/ui/custom-components . But may be you will find better explained articles by googling "android create custom viewgroup" or something similar.

-

I still prefer my first answer, but will add another one: may be you will be able to do what you need with percent positioning in ConstraintLayout. You may create Guidelines for every dot on your image (both vertical and horizontal) with layout_constraintGuide_percent and stick TextView to it. 0.2 and 0.5 - replace this values by percent position of center of your dots in image.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gd1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.2" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gd2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@id/gd1"
    app:layout_constraintEnd_toEndOf="@id/gd2"
    app:layout_constraintStart_toStartOf="@id/gd2"
    app:layout_constraintTop_toTopOf="@id/gd1" />