Imposible to align custom font [235876330]

Fixed

Feature Request

Status Update

No update yet.

Description

iv...@bandlab.com

created issue #1

Jun 14, 2022 02:40AM

We use a custom font (developed by 3rd party company) in our app, and we found that by using the recently introduced text style setting includeFontPadding=false we cannot center text properly (see the attached screenshot).

Example:

Text(
    text = "Tough Bounce",
    color = Color.Black,
    style = TextStyle(
        fontSize = 12.sp,
        lineHeight = 16.sp,
        fontFamily = null, // custom font family here
        platformStyle = PlatformTextStyle(
            paragraphStyle = PlatformParagraphStyle(includeFontPadding = false),
            spanStyle = null
        ),
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.None
        )
    ),
)

More information in this thread: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1654746582388999?thread_ts=1617664367.220300&cid=CJLTWPH7S

Jetpack Compose version: 1.2.0-beta03
Jetpack Compose component used: BasicText/Text, TextStyle
Android Studio Build: #AI-213.7172.25.2211.8624637
Kotlin version: 1.6.21
Devices/Android versions reproduced on: any
Keyboard (i.e. Gboard, Samsung, etc): -

fonts.jpg

319 KB

View

Download

Comments

si...@google.com <si...@google.com> Jun 14, 2022 04:04PM

Reassigned to si...@google.com.

si...@google.com <si...@google.com> #2Jul 24, 2022 02:49PM

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

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

si...@google.com <si...@google.com> #3Jul 30, 2022 03:16AM

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?

Message last modified on Jul 30, 2022 03:17AM

si...@google.com <si...@google.com> #4Aug 1, 2022 06:03PM

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.

si...@google.com <si...@google.com> #5Aug 1, 2022 06:04PM

deleted

Message last modified on Aug 2, 2022 01:06AM

Mon Aug 01 2022 11:04:05 GMT-0700 (Pacific Daylight Time).png

355 KB

View

Download

si...@google.com <si...@google.com> #6Aug 1, 2022 06:05PM

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

si...@google.com <si...@google.com> Aug 3, 2022 12:49AM

Marked as fixed.

ap...@google.com <ap...@google.com> #7Aug 3, 2022 12:49AM

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?

ai...@gmail.com <ai...@gmail.com> #8Aug 4, 2022 05:30AM

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.