在 Android Studio 设计中的多个视图之间切换

Question

I have an activity that presents a list and some icons. My activity design contains a ConstraintLayout at the top level with the list and the icons as children.

Now there can be a situation where we don't have any data. In that case I would like the activity to show neither list nor icons but instead show an image and some error text.

How would I go about implementing this in a way that I can still edit the layout in the Android Studio design view ? In other words, not just add the image and the error text overlapping my normal activity elements and toggle their visibility programmatically. Are there layers or something? Or switchable fragments?

Or like this: How can I group view elements in a way that I can show and hide the whole group in the designer?

Answer 1

Yes, in android are Fragments ( Android docs ) and You can create two fragments, one for a situation when data is loaded successfully and second if data isn't loaded. You can start with the first fragment and when You get information about failed loading data You can switch fragments to second with information about fail.

But I think You can do this in one ConstraintLayout layout. In Your main layout add on top image as You would like to display it and set visibility parameter android:visibility="gone" . Now You see everything and can create UI in design mode. And when You get information about failed with loading data just change image parameter to visible .

To do it programmatically:

ImageView imageView = findViewById(R.id.imageDataFailed);
imageView.setVisibility(View.VISIBLE);

How it looks with two containers:

<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">

    <!--    Here is container for success data load. When You failed load data set visibility="gone"-->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button Success"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!--    Here is container for failed data load. If You want to change design just set `visible`-->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button Failed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.constraintlayout.widget.ConstraintLayout>