androidxmllayoutresponsive-designandroid-toolbar

Android Xml layout issue to shift down the textView

I'm not sure why the layout design looks correct but on the emulator. check the screenshots and code please. almost as if there is something is on top of something else the causes the toolbar and textView to shift downwards a little. I tried changing or removing the elements over and over again without luck. any help will be appreciated

Thank you.

enter image description here

<?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"
android:background="@color/BackGround"
tools:context=".ReportError">

<include
    android:id="@+id/include"
    layout="@layout/toolbar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="5dp"
    android:padding="15dp"
    android:text="@string/report"
    android:textAlignment="center"
    android:textColor="@color/white"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toStartOf="@+id/guideline21"
    app:layout_constraintStart_toStartOf="@+id/guideline20"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textViewImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="64dp"
    android:fontFamily="sans-serif-black"
    android:text="@string/Choose_image"
    android:textColor="@color/black"
    android:textSize="18sp"
    app:layout_constraintEnd_toStartOf="@+id/guideline21"
    app:layout_constraintHorizontal_bias="0.515"
    app:layout_constraintStart_toStartOf="@+id/guideline20"
    app:layout_constraintTop_toBottomOf="@+id/include" />

<ImageView
    android:id="@+id/image_view"
    android:layout_width="0dp"
    android:layout_height="130dp"
    android:layout_marginTop="48dp"
    android:alpha="3.0"
    android:background="@drawable/circle"
    app:layout_constraintEnd_toStartOf="@+id/guideline21"
    app:layout_constraintStart_toStartOf="@+id/guideline20"
    app:layout_constraintTop_toBottomOf="@+id/textViewImage" />

<TextView
    android:id="@+id/textViewE"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="24dp"
    android:fontFamily="sans-serif-black"
    android:text="@string/enter_a_detailed_description_of_the_problem"
    android:textColor="@color/black"
    android:textSize="18sp"
    app:layout_constraintEnd_toStartOf="@+id/guideline21"
    app:layout_constraintHorizontal_bias="0.539"
    app:layout_constraintStart_toStartOf="@+id/guideline20"
    app:layout_constraintTop_toBottomOf="@+id/image_view" />

<EditText
    android:id="@+id/txtdata"
    android:layout_width="0dp"
    android:layout_height="150dp"
    android:layout_gravity="center"
    android:layout_marginTop="36dp"
    android:alpha="3.0"
    android:background="@drawable/circle"
    android:ems="10"
    android:gravity="start|top"
    android:inputType="textMultiLine"
    app:layout_constraintEnd_toStartOf="@+id/guideline21"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline20"
    app:layout_constraintTop_toBottomOf="@+id/textViewE" />

<Button
    android:id="@+id/btnbrowse"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="36dp"
    android:layout_marginTop="32dp"
    android:text="@string/browse"
    android:textColor="@color/black"
    app:layout_constraintBottom_toTopOf="@+id/guideline22"
    app:layout_constraintEnd_toStartOf="@+id/guideline23"
    app:layout_constraintHorizontal_bias="0.377"
    app:layout_constraintStart_toStartOf="@+id/guideline20"
    app:layout_constraintTop_toBottomOf="@+id/txtdata"
    app:layout_constraintVertical_bias="0.0" />

<Button
    android:id="@+id/btnupload"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="36dp"
    android:text="@string/upload"
    android:textColor="@color/black"
    app:layout_constraintBottom_toTopOf="@+id/guideline22"
    app:layout_constraintEnd_toStartOf="@+id/guideline21"
    app:layout_constraintHorizontal_bias="0.765"
    app:layout_constraintStart_toStartOf="@+id/guideline23"
    app:layout_constraintTop_toBottomOf="@+id/txtdata"
    app:layout_constraintVertical_bias="0.0" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline20"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.05" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline21"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.93" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline22"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.98" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline23"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.50" />

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="88dp"
    android:visibility="invisible"
    app:layout_constraintEnd_toEndOf="@+id/txtdata"
    app:layout_constraintHorizontal_bias="0.484"
    app:layout_constraintStart_toStartOf="@+id/txtdata"
    app:layout_constraintTop_toBottomOf="@+id/textViewE" />

    </androidx.constraintlayout.widget.ConstraintLayout>
Solution

  • Consider adding android:fitsSystemWindows="true" to the root layout. or to your root theme

    <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"
android:fitsSystemWindows="true"
android:background="@color/BackGround"
tools:context=".ReportError">

    fitsSystemWindows

    it sets the padding of the View to ensure the contents don't overlay the system windows.