Textview Not Appearing On Emulator And Real Device

This is how the design looked in Preview tab But when I run it on emulator or real device, valid until date not appearing. wrap_content - so you created a layout that your views can expand according to the content of them (if you will add 200 dp on 600 dp image and set width and height to wrap_content this will be your view size) and you can see that even on your preview - your views are overlapping one another.

So you can either use fixed size on your views, but by doing so you are entering the danger zone - your layout won't be responsive to all screen sizes, that's because different phones got different screen size and what may look good on one phone won't look good on another phone.

---

Sure, you can fix this by creating a single layout for every screen size but that's a lot of work.

You can also define your relative layout with android:weightSum and layout_weight

But there is an even better option:

---

You can use ConstraintLayout to achieve a single layout that is responsive to all screen sizes, all of its view hierarchy is flat (no nested view groups) and is it really simple to use.

Here is an example for a layout that looks just like you want with constraintLayout :

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


<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView12"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView13"
    android:layout_width="0dp"
    android:layout_height="15dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView12"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintStart_toEndOf="@+id/textView10"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView14"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="heart"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/textView8" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toTopOf="@+id/textView14"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView8"
    tools:src="@tools:sample/avatars[11]" />
</androidx.constraintlayout.widget.ConstraintLayout>

And here is how it looks in portrait :

And landscape:

Solution 2:

Finally I solved it ! I just move the imageView with id itemImage, place it after first RelativeLayout.