CODEWITHSUNDEEP
android
WHOATEMYNOODLES
WHOATEMYNOODLES

Reputation: 897

What is the correct way to implement multiple views on top of each other?

A bit of context: I am trying to implement a SearchView, when onQueryTextChange is called, it displays a ProgressBar, and when the query is done it hides the progress bar and displays another view depending on the outcome of the query. If the query returns nothing, it makes a textview visible saying "No Results" and if there is data, it populates the recyclerView.

My question is, what is the correct way of implementing this? Do I stack them all on top of each other and make each one visible/invisible depending on the outcome of the query? Or do I use a viewflipper to display a fragment for no result and a fragment containing a recyclerview? Or lastly there is another way I do not know of?

This is what my search fragment looks like:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:fitsSystemWindows="true"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="@color/colorWhite">

<android.support.v7.widget.SearchView
    android:id="@+id/fragsearch_searchView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:queryBackground="@android:color/transparent"
    app:queryHint="Search"
    app:iconifiedByDefault="false"
    android:background="@color/backgroundColor"/>

<View
    android:id="@+id/fragsearch_divider1"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/dividerColor"
    android:layout_below="@+id/fragsearch_searchView"/>

<android.support.v7.widget.RecyclerView
    android:id="@+id/fragsearch_recycler"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorWhite"
    android:layout_below="@+id/fragsearch_divider1"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragsearch_progress_layout"
    android:background="@color/colorWhite"
    android:visibility="invisible"
    android:layout_below="@+id/fragsearch_divider1"
    android:gravity="center">

        <ProgressBar
            android:id="@+id/fragsearch_progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

</LinearLayout>

<TextView
    android:id="@+id/fragsearch_textview_noresults"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/fragsearch_divider1"
    android:padding="12dp"
    android:text="No Results Found"
    android:visibility="invisible"/>


</RelativeLayout>

enter image description here

Right now I'm just stacking all of them on top of each other and changing the visibility on each one. Is there a better way of doing this?

Upvotes: 0

Views: 174

Answers (4)

athul
athul

Reputation: 179

FrameLayout is used for this purpose.It is very useful for arranging views on top of each other.In your case replace RelativeLayout with FrameLayout.

Upvotes: 1

Ivan Wooll
Ivan Wooll

Reputation: 4323

I like to use a ViewFlipper for this. This way you can encapsulate the various view states in separate layouts and verify at design time that the correct layout is displayed. Much nicer than setting visibility on different Views.

<ViewFlipper>

    <ViewGroup1>
    </ViewGroup1>

    <ViewGroup2>
    </ViewGroup2>

</ViewFlipper>

To switch between the different children of a ViewFlipper call setDisplayedChild(index),

Upvotes: 1

Sudarshan Vidhate
Sudarshan Vidhate

Reputation: 133

Consider using framelayout for this purpose, also we can easily set children layout gravity, it gets rendered perfectly. Relativelayout could also help, but we should avoid views termed as 'Legacy'.

Upvotes: 0

Sumit Shukla
Sumit Shukla

Reputation: 4494

I have done it using Constraintlayout considering searchview inside toolbar:

<?xml version="1.0" encoding="utf-8"?>
<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:padding="@dimen/padding_8dp">

    <ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/recycler_company_details"/>

    <TextView
            android:id="@+id/txt_empty_data"
            android:text="No data available!!"
            android:layout_width="wrap_content"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:textColor="@android:color/holo_red_dark"
            android:layout_height="wrap_content" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Related Questions