Android app doesn't appear like the preview

Question

My app interface is supposed to be like the below preview

But it appears to be like this instead

As you can see, there's a gap between the search bar and the top of the screen when I run the app. What's causing this problem ? and How can I fix this ?

I tried to set the margin_top to 0dp but no use.

My xml file:

<?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=".ui.dashboard.DashboardFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/tag_spinner_constraint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <SearchView
            android:id="@+id/search_bar"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            app:layout_constraintEnd_toEndOf="@id/tag_spinner_constraint"
            app:layout_constraintStart_toStartOf="@id/tag_spinner_constraint"
            app:layout_constraintTop_toTopOf="@id/tag_spinner_constraint" />

        <HorizontalScrollView
            android:id="@+id/filter_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="none"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/search_bar">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/empty_rooms_btn"
                    android:layout_width="99dp"
                    android:layout_height="34dp"
                    android:layout_marginStart="5dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="4dp"
                    android:background="@drawable/rounded_button"
                    android:text="Phòng trống"
                    android:textSize="12sp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/floor_spinner" />

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/not_full_rooms_btn"
                    android:layout_width="wrap_content"
                    android:layout_height="34dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginLeft="12dp"
                    android:layout_marginTop="4dp"
                    android:background="@drawable/rounded_button"
                    android:text="Phòng ghép"
                    android:textSize="12sp"
                    app:layout_constraintStart_toEndOf="@+id/empty_rooms_btn"
                    app:layout_constraintTop_toBottomOf="@+id/floor_spinner" />

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/full_rooms_btn"
                    android:layout_width="105dp"
                    android:layout_height="34dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="4dp"
                    android:background="@drawable/rounded_button"
                    android:text="Phòng đã đầy"
                    android:textSize="12sp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintStart_toEndOf="@+id/not_full_rooms_btn"
                    app:layout_constraintTop_toBottomOf="@+id/floor_spinner" />

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/all_rooms_btn"
                    android:layout_width="wrap_content"
                    android:layout_height="34dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="4dp"
                    android:background="@drawable/rounded_button"
                    android:text="Tất cả"
                    android:textSize="12sp" />

            </LinearLayout>

        </HorizontalScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>


    <ListView
        android:id="@+id/contract_list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="2dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tag_spinner_constraint"
        app:layout_constraintVertical_bias="1.0">


    </ListView>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Thank you everyone for your help ! I've already tried the two above solutions and realized that the problem is not in the fragment xml file but in the activity_main.xml file

activity_main.xml

<?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"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

focus on the android:paddingTop="?attr/actionBarSize" line inside the parent most constraint layout configuration. That's causing the problem, just get rid of it and I am good to go.

Answer 2

Firstly, you should create a new style with parents as NoActionBar to remove the App bar from the activity.

<style name="Theme.AppName" parent="Theme.MaterialComponents.DayNight.NoActionBar">
.
. 
</style>

Secondly, you have to add that NoActionBar theme to the activity in theme attribute in the manifest.

<activity 
        android:name=".MainActivity"
        android:theme="@style/Theme.Design.Light.NoActionBar">

Lastly, you have to add an AppBar attribute to the XML inside the constraint layout with searchView inside that.

<androidx.constraintlayout.widget.ConstraintLayout
. 
. >

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <SearchView
            android:id="@+id/search_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</com.google.android.material.appbar.AppBarLayout>

.
.
.
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

All you need is the layout inspector. It is an embedded utility that can help to figure out which UI widget adds an unneeded gap.