How do i place a TextView inside a ImageView on the same place across devices?

Question

I have an ImageView where I need to place a TextView on top of on a specific location on the ImageView like this drawing

I have managed to do this, somewhat using the following xml:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/background"

        android:adjustViewBounds="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/imageBg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"

        android:layout_height="wrap_content"
        android:text="Test text"

        android:textColor="#ff0000"

        android:layout_marginRight="200dp"
        android:layout_marginTop="205dp"


        app:layout_constraintLeft_toLeftOf="@id/background"
        app:layout_constraintRight_toRightOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background" />
        
</androidx.constraintlayout.widget.ConstraintLayout>

This works fine on my one emulator test device, but as I expected when trying on other emulator devices, it doesn't scale well across multiple devices running different resolutions etc. due to the fixed margin dp values.

How can I achieve this in the best possible way which would work across multiple devices and now that the TextView would be on the same position everytime? I know that I can make use of dimens.xml and use different margin values for different device dimensions there, but I don't believe this would be the best approach.

Answer 1

If the TextView is constrained to the image view at the top, bottom, start and end, then it will be positioned in the center of the ImageView. You can then use bias to position the TextView at a percentage position from the top and start of the ImageView. The TextView will maintain that relative position regardless of the screen size or orientation.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/background"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test text"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        android:textColor="#ff0000"
        app:layout_constraintBottom_toBottomOf="@+id/background"
        app:layout_constraintHorizontal_bias="0.25"
        app:layout_constraintLeft_toLeftOf="@id/background"
        app:layout_constraintRight_toRightOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background"
        app:layout_constraintVertical_bias="0.25" />

</androidx.constraintlayout.widget.ConstraintLayout>

This is what it looks like in Android Studio.

Answer 2

I know that I can make use of dimens.xml and use different margin values for different device dimensions there, but I don't believe this would be the best approach.

You are correct, you can use guidelines like this to make sure that your layout will look the same on different screens:

<?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">

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.8"
    tools:srcCompat="@tools:sample/backgrounds/scenic" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5"/>


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

<TextView
    android:id="@+id/textView7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorAccent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintWidth_percent="0.2"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toStartOf="@+id/guideline3" />

</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this (the black arrows are the guidelines):

And now you have only 1 layout but it is a responsive layout - you don't need to create more for different devices.

---

Please notice that I don't have any fixed sizes on my views, I have created a fully responsive layout using percentage, for more info about the subject you can check my answer.

Answer 3

There is a Library https://github.com/intuit/sdp that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens. Here is a picture example of that