Empty UI when using ConstraintLayout in Fragments Android

VINNUSAURUS :

I am using ConstraintLayout in a Fragment, but when I run the app the UI is empty, below are the Fragment and an Activity where the fragments are shown.

Fragment Layout

<?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"
             tools:context=".FirstFragment">

    <!-- TODO: Update blank fragment layout -->


    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/firstFragButton"
            tools:text="Go"
            android:layout_marginBottom="384dp"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"/>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/first_fragment"
            android:id="@+id/textView" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="parent" android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/firstFragButton" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main

Contains NavHostFragment

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@null"
        tools:context=".MainActivity">

    <fragment
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="395dp"
            android:layout_height="340dp" app:navGraph="@navigation/nav_graph" app:defaultNavHost="true"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/fragment"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Tamir Abutbul :

Different phones got different screen size, in your layout, you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

You may want o do something like this:

<?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"
  tools:context=".FirstFragment">

<!-- TODO: Update blank fragment layout -->


<Button
    android:id="@+id/firstFragButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Go" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="first_fragment"
    app:layout_constraintBottom_toTopOf="@+id/firstFragButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

To achieve a responsive look on all devices:

Same goes for your NavHostFragment, either use:

android:layout_width="0dp" and android:layout_height="0dp" to make your view spread all over your screen or use something like to make your view to be responsive:

app:layout_constraintWidth_percent="0.8" app:layout_constraintHeight_percent="0.5"

This will tell your view to be 80% of the screen size in width and 50% in height:

You can check my examples because with the white background on the images it may not be so very clear.

Generally, If you are using ConstraintLayout I recommend do use it with guidelines and Chains to support different screen sizes.