0

How can i add a compose loading indicator top of the form where user can't interact with other elements (such as form fields) when progress indicator is showing.

@Composable
fun CenteredCircularProgressIndicator() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(50.dp),
    ) {
        
        CircularProgressIndicator(
            color = colors.primary,
            modifier = Modifier
                .wrapContentSize()
                .align(Alignment.Center)
        )
    }
}

how can i achieve same like frame-layout in compose ?

 In Xml world 
    <FrameLayout 
        android:id="@+id/progressBarContainer"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:clickable="true" >
    
        <ProgressBar
            android:id="@+id/progressBar" 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="center" />
    
    </FrameLayout>
Sam
  • 6,215
  • 9
  • 71
  • 90
  • 1
    Does this answer your question? [Jetpack Compose: how to disable gesture detection on children](https://stackoverflow.com/questions/69142209/jetpack-compose-how-to-disable-gesture-detection-on-children) – Phil Dukhov Dec 18 '21 at 03:33
  • I was looking something simple like frame-layout trick – Sam Dec 18 '21 at 03:42
  • My answer essentially does the same thing: you add the `gesturesDisabled` modifier to your `Box` and it will catch all touches. Why doesn't that work for you? – Phil Dukhov Dec 18 '21 at 04:42
  • @PhilipDukhov tried your answer, what happening is i still can do modification on the focus field (ex : text field) any suggestion for that, thanks for sharing this information and answering most of the compose questions in SO – Sam Dec 18 '21 at 05:30
  • I suggest that you've applied my modifier after your `Modifier.padding`. If I'm right, it's gonna work only inside this padded size. Move it before the padding, and it's gonna cover whole view. See [why modifier order matters](https://stackoverflow.com/a/65698101/3585796) – Phil Dukhov Dec 18 '21 at 07:42
  • @PhilipDukhov I tried before the padding, not blocking any input if the focus on a text field. i can use the e keyboard "Next" button and change the text on each text field – Sam Dec 18 '21 at 07:57
  • Do expect it to block keyboard? Obviously it cannot do that. Keyboard is not part of Compose tree. Also looks like selection handle also not blocked, not sure why, but all Compose touches are blocked: click doesn't move the selection, and when the selection handle disappears, no other touches works. I think that when you block input, text field should lost its focus anyway. – Phil Dukhov Dec 18 '21 at 08:09
  • @PhilipDukhov any suggestion how can i stop user entering the any values when loading indicator shown ? – Sam Dec 18 '21 at 08:12
  • You can clear focus with `LocalFocusManager.current.clearFocus()` – Phil Dukhov Dec 18 '21 at 08:22

0 Answers0