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

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 2

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

Answer 3

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.