I know this has been asked before, but the solution in that post did not work for me.
I'm just beginning to learn Android programming and was doing a mock up. It displays correctly in Android Studio but not on my device. The images and background color display correctly but none of the text displays. I've tried changing the font and fontColor. What needs to be changed?
I had another example that used ReleativeLayout and it displays correctly but this ConstraintLayout does not.
The first image is from AS and the other is from my device.
This is the code from activity_main
<?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:id="@+id/listLayout"
android:layout_width="wrap_content"
android:layout_height="248dp"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
tools:context="com.vijer.test1.MainActivity">
<!-- First Group -->
<View
android:id="@+id/group_one"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/darker_gray"
app:layout_constraintLeft_creator="@id/listLayout"
app:layout_constraintTop_creator="@id/listLayout" />
<ImageView
android:id="@+id/album_art1"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="@string/image_description"
android:src="@drawable/image1"
app:layout_constraintLeft_creator="@id/listLayout"
app:layout_constraintTop_toTopOf="@id/listLayout" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/meta_artist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/album_art1"
app:layout_constraintTop_toTopOf="@id/listLayout"
tools:text="@string/tag_artist1" />
<TextView
android:id="@+id/meta_title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/album_art1"
app:layout_constraintTop_toBottomOf="@id/meta_artist1"
tools:text="@string/tag_title1" />
<TextView
android:id="@+id/meta_album1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintLeft_toRightOf="@id/album_art1"
app:layout_constraintTop_toBottomOf="@id/meta_title1"
tools:text="@string/tag_album1" />
<TextView
android:id="@+id/meta_time1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="@+id/meta_delimiter1"
app:layout_constraintTop_toBottomOf="@id/meta_title1"
tools:text="@string/tag_length1" />
<TextView
android:id="@+id/meta_delimiter1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="@+id/meta_file_type1"
app:layout_constraintTop_toBottomOf="@id/meta_title1"
tools:text="@string/tag_delimiter" />
<TextView
android:id="@+id/meta_file_type1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginTop="4dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="@+id/meta_time1"
app:layout_constraintEnd_toEndOf="@+id/listLayout"
tools:text="@string/tag_file_type1" />
<!-- Second Group -->
<View
android:id="@+id/group_two"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="4dp"
android:background="@android:color/darker_gray"
app:layout_constraintLeft_toLeftOf="@id/listLayout"
app:layout_constraintTop_toBottomOf="@id/group_one"
tools:layout_editor_absoluteX="0dp" />
<ImageView
android:id="@+id/album_art2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="4dp"
android:contentDescription="@string/image_description"
android:src="@drawable/image2"
app:layout_constraintLeft_toLeftOf="@id/listLayout"
app:layout_constraintTop_toBottomOf="@id/group_one" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/meta_artist12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/album_art2"
app:layout_constraintTop_toBottomOf="@id/group_one"
tools:text="@string/tag_artist2" />
<TextView
android:id="@+id/meta_title12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="30dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/album_art2"
app:layout_constraintTop_toBottomOf="@id/group_one"
tools:text="@string/tag_title2" />
<TextView
android:id="@+id/meta_album12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintLeft_toRightOf="@id/album_art2"
app:layout_constraintTop_toBottomOf="@id/group_one"
tools:text="@string/tag_album2" />
<TextView
android:id="@+id/meta_time12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="@+id/meta_delimiter12"
app:layout_constraintTop_toBottomOf="@id/group_one"
tools:text="@string/tag_length2" />
<TextView
android:id="@+id/meta_delimiter12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="@+id/meta_file_type12"
app:layout_constraintTop_toBottomOf="@id/group_one"
tools:text="@string/tag_delimiter" />
<TextView
android:id="@+id/meta_file_type12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="@+id/meta_time12"
app:layout_constraintEnd_toEndOf="@+id/group_one"
tools:text="@string/tag_file_type2" />
<!-- Third Group -->
<View
android:id="@+id/group_three"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="4dp"
android:background="@android:color/darker_gray"
app:layout_constraintLeft_toLeftOf="@id/listLayout"
app:layout_constraintTop_toBottomOf="@id/group_two" />
<ImageView
android:id="@+id/album_art3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="4dp"
android:contentDescription="@string/image_description"
android:src="@drawable/image3"
app:layout_constraintLeft_toLeftOf="@id/listLayout"
app:layout_constraintTop_toBottomOf="@id/group_two" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/meta_artist13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/album_art3"
app:layout_constraintTop_toBottomOf="@id/group_two"
tools:text="@string/tag_artist3" />
<TextView
android:id="@+id/meta_title13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="30dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/album_art3"
app:layout_constraintTop_toBottomOf="@id/group_two"
tools:text="@string/tag_title3" />
<TextView
android:id="@+id/meta_album13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintLeft_toRightOf="@id/album_art3"
app:layout_constraintTop_toBottomOf="@id/group_two"
tools:text="@string/tag_album3" />
<TextView
android:id="@+id/meta_time13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="@+id/meta_delimiter13"
app:layout_constraintTop_toBottomOf="@id/group_two"
tools:text="@string/tag_length3" />
<TextView
android:id="@+id/meta_delimiter13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="@+id/meta_file_type13"
app:layout_constraintTop_toBottomOf="@id/group_two"
tools:text="@string/tag_delimiter" />
<TextView
android:id="@+id/meta_file_type13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginTop="56dp"
android:fontFamily="@font/abeezee"
android:textColor="#ffffff"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="@+id/meta_time13"
app:layout_constraintEnd_toEndOf="@+id/group_two"
tools:text="@string/tag_file_type3" />
</android.support.constraint.ConstraintLayout>