Android Layout not displayed or displayed below the previous layout

127 Views Asked by At

I am building an app which is supposed to have an activity with fragments inside.

The overall display works but when I try to show a loading screen, it's never displayed. When I am taping on the top bar, it supposed to display another fragment but this one do not appear. I realize that the new fragment is displayed below the current layout.

here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        tools:context=".ui.activity.HomeScreenActivity">



        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/homelayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <include
                android:id="@+id/loading"
                android:visibility="gone"
                layout="@layout/layout_loading"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:minHeight="?attr/actionBarSize"
                android:background="@color/transparent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:menu="@menu/top_bar_menu"
                app:titleTextColor="@color/gainsboro_00"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAlignment="center"
                    android:text="@string/loading_car"
                    android:textColor="@color/gainsboro_00"
                    android:letterSpacing="0.5"
                    android:textAllCaps="true"
                    android:gravity="center"
                    android:clickable="true"
                    android:focusable="true"/>

            </androidx.appcompat.widget.Toolbar>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/main_container"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:orientation="vertical"
                app:layout_constraintTop_toBottomOf="@+id/toolbar"
                app:layout_constraintBottom_toBottomOf="parent"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation_view"
            style="@style/Widget.Custom.NavigationView"
            android:background="@color/gainsboro_06"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:clipToPadding="false"
            app:menu="@menu/navigation_menu"
            app:headerLayout="@layout/layout_nav_header">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:orientation="vertical"
                android:padding="16dp">

                <TextView
                    android:id="@+id/signout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"
                    android:textColor="@color/denotive_red"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:text="@string/signout" />
            </LinearLayout>

        </com.google.android.material.navigation.NavigationView>

        <FrameLayout
            android:id="@+id/select_vehicle_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.drawerlayout.widget.DrawerLayout>



</layout>

the behavior I expect is to be able to load the loading screen and for now, I am using:

       homeScreenBinding.loading.visibility = View.VISIBLE

and

       homeScreenBinding.loading.visibility = View.GONE

nothing shows up.

Same for the list I am supposed to display when taping on toolbarTitle . I did the code below

homeScreenBinding.toolbarTitle.setOnClickListener {
            if (savedInstanceState == null) {
                homeScreenBinding.selectVehicleLayout.visibility = View.VISIBLE
                replaceFragment(VehiclesListFragment(), R.id.select_vehicle_layout)
            }
        }

The fragment appears but it's like below the homelayout

the replaceFragment is defined as:


fun AppCompatActivity.replaceFragment(fragment: Fragment, container: Int) {


    val className = fragment.javaClass.name
   // supportFragmentManager
   //     .beginTransaction()
   //     .replace(container, fragment, className)
   //     .addToBackStack(className)
   //     .commit()

    supportFragmentManager.commit {
        replace(container, fragment, className)
        addToBackStack(className)
    }

}


I put some logs and I saw that clicks are catch and that we access the fragment. it's like anything which is supposed to be displayed on top of the DrawerLayout or homeLayout can't be displayed.

here is the loading layout

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

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

I feel that the issue is coming from the DrawerLayout. When i try to get ride of the DrawerLayout for test, the loading layout shows up

Any idea ? Thanks

1

There are 1 best solutions below

0
On

when I try to show a loading screen, it's never displayed

From the provided XML layouts, the main_container is overplayed on top of the loading_screen; i.e. the loading screen won't be seen as it's behind the main container.

To fix this, move the loading screen to be below the main_container:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        tools:context=".ui.activity.HomeScreenActivity">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/homelayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">


            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:minHeight="?attr/actionBarSize"
                android:background="@color/transparent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:menu="@menu/top_bar_menu"
                app:titleTextColor="@color/gainsboro_00"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAlignment="center"
                    android:text="@string/loading_car"
                    android:textColor="@color/gainsboro_00"
                    android:letterSpacing="0.5"
                    android:textAllCaps="true"
                    android:gravity="center"
                    android:clickable="true"
                    android:focusable="true"/>

            </androidx.appcompat.widget.Toolbar>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/main_container"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:orientation="vertical"
                app:layout_constraintTop_toBottomOf="@+id/toolbar"
                app:layout_constraintBottom_toBottomOf="parent"/>
                
                
            <include
                android:id="@+id/loading"
                android:visibility="gone"
                layout="@layout/layout_loading"/>
                

        </androidx.constraintlayout.widget.ConstraintLayout>


        <!--   Rest of the layout  -->

    </androidx.drawerlayout.widget.DrawerLayout>


</layout>

When I am taping on the top bar, it supposed to display another fragment but this one do not appear. I realize that the new fragment is displayed below the current layout.

The code that is commented out should be working:

   // supportFragmentManager
   //     .beginTransaction()
   //     .replace(container, fragment, className)
   //     .addToBackStack(className)
   //     .commit()

Instead of the current one.