ImageView not displaying correctly in the device

Question

I have this layout that I want to use as a header for navigation bar:

<?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="164dp">

    <ImageView
        android:id="@+id/app_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="false"
        android:scaleType="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/first_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:text="Name"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/app_icon" />

    <ImageView
        android:id="@+id/credits_material_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:scaleType="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/ic_dollar_coin_stack" />

    <TextView
        android:id="@+id/credits_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:text="Credits"
        android:textStyle="italic"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/credits_material_icon" />

    <TextView
        android:id="@+id/credits_available"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/credits_label" />
</android.support.constraint.ConstraintLayout>

In the layout editor, the layout looks like:

But on a device, I am getting something like this:

The encircled portion is the layout under concern. Under that, you can see a ListView but that is a child of LinearLayout so that is a separate story.

So, my question is that why none of my ImageViews are displaying at all?

Things I have tried:

• I have tried moving the ImageViews around with no improvement.
• I checked with the layout hierarchy with the Layout inspector. Turns out, it shows a literal dot in place of both the ImageViews.
• I have tried manually setting the height of this layout to a very large number to solve any accommodation related problems if there are any.

Answer 1

The answer is simple:

When in doubt, use android.support.v7.widget.AppCompatImageView

I thought that Android docs advising against its use in general was something to be taken seriously.

This will automatically be used when you use ImageView in your layouts. You should only need to manually use this class when writing custom views.

Another place I read that you are supposed to be extending from AppCompatActivity to enable this behavior. My Activities DO extend from AppCompatActivity but still I spent so much time thinking that maybe something is buggy with ConstraintLayout after all.

NO. My beloved ConstraintLayout hasn't lost its chivalry yet. :)

So, when in doubt, I reiterate,

Use android.support.v7.widget.AppCompatImageView

---

Some other answers saying the same thing:

Android vector drawable app:srcCompat not showing images

app:srcCompat does not work for ImageView