How to place a TextView on top of a ImageVew in ConstraintLayout

Question

I am using a ConstraintLayout and I want to place a TextView on top of an ImageView.

But I'm not able to find this feature in the ConstraintLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="com.example.sayani.myApp.MainActivity">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="4dp"
    android:layout_marginEnd="4dp"
    android:layout_marginStart="4dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/image1" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="240dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.501"
    app:layout_constraintStart_toStartOf="parent"/>
</android.support.constraint.ConstraintLayout>

In the above code the TextView is hidden under the ImageView.
How can I place the text on top of the image?

score 4 · Accepted Answer · answered Jan 24 '19 at 19:43

4

If your app has a minimum SDK of 21 or higher, you can add this to whichever UI element you want to appear above the other: android:elevation="4dp"

Doesn't have to be 4dp, it can be higher or lower depending on what works in your project.

answered Jan 24 '19 at 19:43

privatestaticint

854
1
9
23

score 1 · Answer 2 · answered Jan 24 '19 at 20:59

1

You can also use bringToFront() function which works on pre-api 21:

TextView myTextView = findViewById(R.id.textView);
myTextView.bringToFront();

answered Jan 24 '19 at 20:59

Mahdi Nouri

1,391
14
29

score 1 · Answer 3 · answered Jan 03 '22 at 12:17

If you in the XML add the TextView below the ImageView (like you have done) then it will appear on top of the ImageView. Consequently if you add it before it will appear below the ImageView.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:srcCompat="@drawable/image1" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    android:textSize="24sp"
    android:text="TextView on top of an ImageView" />

If you want it centered vertically on the screen then you could use

app:layout_constraintTop_toTopOf="@+id/imageView" app:layout_constraintBottom_toBottomOf="@+id/imageView"

How to place a TextView on top of a ImageVew in ConstraintLayout

3 Answers3