'Full screen CircularProgressIndicator blocks the touch within a FrameLayout

I have implemented stopwatch with CircularProgressIndicator with a full screen that only appears on the edges. so CircularProgressIndicator overlays MainLayout and blocks all the clicks within this layout. I have tried to set android:clickable="false" on CircularProgressIndicator and android:clickable="true on layout below. But none of the variations worked for me. How can I make this working?

<FrameLayout
    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_gravity="center"
    android:gravity="start" android:clickable="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.wear.widget.BoxInsetLayout android:clickable="true"
        android:id="@+id/MainLayout"
        android:layout_height="match_parent"
        android:layout_width="match_parent">

        <LinearLayout
            app:layout_box="all"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:background="#FFFFFF">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs" android:clickable="true"
                android:layout_margin="5dp"
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_gravity="center"
                app:tabMode="fixed" />

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/MainPager" android:clickable="true"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

        </LinearLayout>
    </androidx.wear.widget.BoxInsetLayout>
 
    
    <com.google.android.material.progressindicator.CircularProgressIndicator
        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:theme="@style/Theme.AppCompat" android:clickable="false"
        android:id="@+id/timerProgress"
        android:layout_width="match_parent"
        android:layout_height="match_parent"        
        android:indeterminate="false"
        app:trackThickness="2dp"
        app:indicatorColor="@color/green"
        app:trackColor="@android:color/transparent"
        android:layout_gravity="center" 
        android:textAlignment="center"
        android:tooltipText="Loading"
        android:indeterminateTint="@color/green"      
           />
</FrameLayout>

EDIT: what I tried to achieve is the screenshot on this post. UI is perfectly fine and looks similar to below but as I have the CircularProgressIndicator as the last control within the Framelayout it blocks the controls below. If I add it as first element in FL, this time CircularProgressIndicator is not visible at all.

android xamarin.android

Solution 1:^[1]

It is because your CircularProgressIndicator is above all your content so every click will be into your CircularProgressIndicator view. I don't know what are you trying to do, but you can set an onClickListener to you CirculerProgressIndicator or readjust your layout in a way that your CircularProgressIndicator will be by side of your other components, and not above.

Solution 2:^[2]

The best approach is to place CircularProgressIndicator on the bottom ,and then place BoxInsetLayout with a transparent background above it .

But here is a tricky way , we can create a subclass inherit from CircularProgressIndicator , and override the method OnInterceptTouchEvent.

 public class MyControl : CircularProgressIndicator
    {
        public MyControl (Context context) : base(context)
        {
        }

        public override bool OnInterceptTouchEvent(MotionEvent ev)
        {
            return true;
        }
    }

And then add the custom control into parent layout in code

MyControl a= new MyControl(this);
a.LayoutParameters = new FrameLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
parent.AddView(a, 1);

Then the clicked event should be triggered on BoxInsetLayout.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Guilherme Magro
Solution 2	ColeX - MSFT

'Full screen CircularProgressIndicator blocks the touch within a FrameLayout

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]