How to make loading spinner appear in place of the fragment until this fragment appears?

I have the following screen:

When I click AREA DE EXPOSICION TextView, ExhibitionAreaFragment gets loaded below the 2 TextViews, when I click SALÓN MULTIUSOS TextView, MultipurposeRoomFragment gets loaded below the 2 TextViews. As those 2 fragments contain very big zoomable images, the change of fragment lasts between 2 and 3 seconds. While waiting, I want to appear on screen in place of the fragment a loading spinner like that:

https://1.bp.blogspot.com/-yIhXlQfYN1E/WMksG192LLI/AAAAAAAAA9w/txsqdQfykVksDEFshayeN54c0Gu6C3AAwCLcB/s1600/glow.gif

It doesn't necessarily has to look exactly the same as in the link but I want it to be a loading spinner and I want it to be part of the activity layout, not an alert dialog.

Here is my MainActivity class:

[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
{
    TextView exhibitionAreaTextView;
    TextView multipurposeRoomTextView;

    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.activity_main);

        exhibitionAreaTextView = FindViewById<TextView>(Resource.Id.exhibitionAreaTextView);
        multipurposeRoomTextView = FindViewById<TextView>(Resource.Id.multipurposeRoomTextView);

        ExhibitionAreaFragment exhibitionAreaFragment = new ExhibitionAreaFragment();
        MultipurposeRoomFragment multipurposeRoomFragment = new MultipurposeRoomFragment();

        SupportFragmentManager.BeginTransaction().Add(Resource.Id.imageZoneLinearLayout, exhibitionAreaFragment).Commit();

        exhibitionAreaTextView.Click += delegate
        {
            SupportFragmentManager.BeginTransaction().Replace(Resource.Id.imageZoneLinearLayout, exhibitionAreaFragment).Commit();
        };

        multipurposeRoomTextView.Click += delegate
        {
            SupportFragmentManager.BeginTransaction().Replace(Resource.Id.imageZoneLinearLayout, multipurposeRoomFragment).Commit();
        };
    }
}

And here is my activity_main layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
    <LinearLayout
        android:orientation="horizontal"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="100"
        android:layout_margin="10dp">
        <TextView
            android:text="ÁREA DE EXPOSICION"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/exhibitionAreaTextView"
            android:layout_weight="50"
            android:gravity="center"
            android:background="#0000FF"/>
        <TextView
            android:text="SALÓN MULTIUSOS"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/multipurposeRoomTextView"
            android:layout_weight="50"
            android:gravity="center"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageZoneLinearLayout" />
</LinearLayout>

Answers

  • LeoZhuLeoZhu Member ✭✭✭
    edited January 27

    you could add a ProgressBar into your layout,then when you click the TextView,let your ProgressBar appear.and after 2-3 seconds ,let it disappear.

    <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
            >
        <LinearLayout
            android:id="@id/ll"
            android:orientation="horizontal"
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="100"
            android:layout_margin="10dp">
    
        />
            <TextView
                android:text="ÁREA DE EXPOSICION"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/exhibitionAreaTextView"
                android:layout_weight="50"
                android:gravity="center"
                android:background="#0000FF"/>
            <TextView
                android:text="SALÓN MULTIUSOS"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/multipurposeRoomTextView"
                android:layout_weight="50"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/ll"
            android:id="@+id/imageZoneLinearLayout" />
        <ProgressBar
            android:id = "@+id/loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:indeterminateDrawable="@drawable/animdraw"
            android:visibility ="gone"
            android:indeterminateDuration="5000" />
    </RelativeLayout>
    

    create the animdraw.xml in Resources/drawable (fiveplus is the loading icon)

    <?xml version="1.0" encoding="utf-8" ?> 
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/fiveplus"
        android:fromDegrees="0.0"
        android:pivotX="50.0%"
        android:pivotY="50.0%"
        android:toDegrees="360.0" />
    

    in activity you could call it in the click event (you could add a timer to add a timer to limit display to 2-3 seconds) :

       exhibitionAreaTextView.Click += delegate
        {
            progressBar.Visibility = ViewStates.Visible;
            SupportFragmentManager.BeginTransaction().Replace(Resource.Id.imageZoneLinearLayout, exhibitionAreaFragment).Commit();
        };
    
  • SvetoslavHlebarovSvetoslavHlebarov USMember ✭✭✭

    FirstActivity is my MainLauncher. In FirstActivity I have a button which when clicked leads to my MainActivity. What I want is while MainActivity is loading, the loading spinner to appear in it. When the activity has loaded, the loading spinner to dissappear. Afterwards, when I click the button of MainActivity, I want the loading spinner to appear again and after some time to dissappear.

    here is my activity_main.axml:

    <LinearLayout 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:orientation="vertical"
        android:gravity="center">
        <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button1" />
        <ProgressBar
            android:id = "@+id/loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminateDrawable="@drawable/animdraw"
            android:visibility="gone"/>
    </LinearLayout>
    

    here is my MainActivity.cs:

    public class MainActivity : AppCompatActivity
    {
            ProgressBar loading;
            Button button1;
    
            protected override void OnCreate(Bundle savedInstanceState)
            {
                base.OnCreate(savedInstanceState);
                // Set our view from the "main" layout resource
                SetContentView(Resource.Layout.activity_main);
    
                loading = FindViewById<ProgressBar>(Resource.Id.loading);
                button1 = FindViewById<Button>(Resource.Id.button1);
    
                loading.Visibility = ViewStates.Visible;
                System.Threading.Thread.Sleep(3000);
                loading.Visibility = ViewStates.Gone;
    
                button1.Click += delegate
                {
                    loading.Visibility = ViewStates.Visible;
                    System.Threading.Thread.Sleep(3000);
                    loading.Visibility = ViewStates.Gone;
                };
    
            }
    }
    

    I replaced SupportFragmentManager.BeginTransaction() with System.Threading.Thread.Sleep(3000) and removed a lot of controls from my previous .axml so the code is simplier. The code of animdraw.xml is the same as you send me.

  • LeoZhuLeoZhu Member ✭✭✭

    @SvetoslavHlebarov you may use a Handler or Timer to ,it's similar to this

Sign In or Register to comment.