drawShadow opacity affects the opacity of the whole Composable and its children [171624638]

Fixed

Bug

Status Update

No update yet.

Description

af...@gmail.com

created issue #1

Oct 26, 2020 02:05AM

Build: AI-202.7660.26.42.6907010, 202010150442,

AI-202.7660.26.42.6907010, JRE 11.0.8+10-b944.6842174x64 JetBrains s.r.o, OS Mac OS X(x86_64) v10.15.7, screens 1680x1050

AS: 4.2 Canary 14; Kotlin plugin: 1.4.20-M1-Studio4.2-1; Android Gradle Plugin: 4.2.0-alpha14; Gradle: 6.7; latest from SDK: 21.3.6528147; CMake: from local.properties: (not specified), latest from SDK: (not found), from PATH: 3.18.2

Jetpack Compose: 1.0.0-alpha05

IMPORTANT: Please read https://developer.android.com/studio/report-bugs.html carefully and supply all required information.

It seems like when I add a drawShadow modifier with an opacity lower than 1f to a Box. Its and its children's opacity gets affected.

Here's an example where changing the opacity should only change the shadow's opacity but instead it changes the opacity of the whole box.

val opacity = 0.3f

@Composable
private fun StrangeButton() {
    Box(
        modifier = Modifier.drawShadow(
            elevation = 4.dp,
            opacity = opacity
        ).background(
            color = Color.Green
        )
    ) {
        Image(
            asset = Icons.Default.Person,
            colorFilter = ColorFilter.tint(Color.White)
        )
    }
}

Please let me know if I can provide any more details. Thanks!

Comments

cl...@google.com <cl...@google.com> Oct 27, 2020 12:48PM

Assigned to an...@google.com.

an...@google.com <an...@google.com> #2Oct 27, 2020 03:51PM

Reassigned to mo...@google.com.

We have some support in androidx.compose.ui.autofill

Leaving this bug open in case Ralston wants to add more info

mo...@google.com <mo...@google.com> #3Oct 27, 2020 03:53PM

Status: Won't Fix (Intended Behavior)

I found an example here. One problem is that it only works with the Google autofill service. When using any other service like Microsoft Authenticator or OneKey, the following error is shown:

D/Autofill Status: Autofill popup isn't shown because autofill is not available.
    
    Did you set up autofill?
    1. Go to Settings > System > Languages&input > Advanced > Autofill Service
    2. Pick a service
    
    Did you add an account?
    1. Go to Settings > System > Languages&input > Advanced
    2. Click on the settings icon next to the Autofill Service
    3. Add your account

Is this a bug on your side or do the app developers of these password managers need to change their implementation?

an...@google.com <an...@google.com> #4Oct 27, 2020 03:58PM

Another problem I am facing with autofill is that it won't save my credentials. I tried forcing to finish the context as described here, but it won't do that either although I filled in the username with the one provided by the Google autofill service.

af...@gmail.com <af...@gmail.com> #5Oct 27, 2020 03:58PM

deleted

mo...@google.com <mo...@google.com> #6Oct 27, 2020 03:58PM

Status: Assigned (reopened)

Facing the same issue here, Google autofill service seems to work. Zero documentation on adding support for Autofill framework on jetpack compose.

an...@google.com <an...@google.com> #7Oct 27, 2020 04:03PM

Hello, I am trying to implement the same thing - it seems like there's no way for current password managers like 1Password or Bitwarden, to automatically pick up the fields. Is there a possible solution?

af...@gmail.com <af...@gmail.com> #8Oct 27, 2020 04:08PM

I setup this modifier:

@OptIn(ExperimentalComposeUiApi::class)
fun Modifier.autofill(
    autofillTypes: List<AutofillType>,
    onFill: ((String) -> Unit),
) = composed {
    val autofill = LocalAutofill.current
    val autofillNode = AutofillNode(onFill = onFill, autofillTypes = autofillTypes)
    LocalAutofillTree.current += autofillNode

    this.onGloballyPositioned {
        autofillNode.boundingBox = it.boundsInWindow()
    }.onFocusChanged { focusState ->
        autofill?.run {
            if (focusState.isFocused) {
                requestAutofillForNode(autofillNode)
            } else {
                cancelAutofillForNode(autofillNode)
            }
        }
    }
}

And use it like this:

val emailState = remember { EmailState() }
Email(
    modifier = Modifier.autofill(
        autofillTypes = listOf(
            AutofillType.Username,
            AutofillType.EmailAddress
        ),
        onFill = { emailState.text = it },
    ),
    emailState = emailState,
    onImeAction = { onForgotPasswordSubmitted(emailState.text) }
)

With these steps, autofill works for me.

ap...@google.com <ap...@google.com> #9Oct 28, 2020 03:27PM

Marked as fixed.

@lo...@gmail.com comment#8

what version of compose are you using? I'm using latest alpha and the above doesn't work for me. 😭