Login button — Android (Compose)

Source: en/integrations/buttons-android.md · Live: https://docs.1pass.dev/en/integrations/buttons-android LLM-sanitized: internal links absolutized, VitePress containers → admonitions, line numbers in the Jump-to Index reference this rendered file (1-indexed).

📍 Jump-to Index

• L22-L40: ## 1. Add the icon asset
• L41-L110: ## 2. The button (Hero / 4x1 equivalent)
• L111-L120: ## 3. Verify — on screen, not by build success
• L121-L126: ## Brand rules (summary)

---

Login button — Android (Compose)

Android does not render SVG directly — converting it to a VectorDrawable resource is the asset step. Button copy and brand rules are identical to Login button component; this page covers only the Android asset pipeline.

1. Add the icon asset

curl -o logi_icon.svg https://www.1pass.dev/icon.svg

In Android Studio:

1. Right-click res/drawable → New → Vector Asset
2. Asset Type: Local file (SVG, PSD) → pick logi_icon.svg
3. Import under the name logi_icon

⚠️ Warning: Read importer warnings, then check the result with your eyes The logi icon uses linearGradient. VectorDrawable gradients work on API 24+ (below minSdk 24, older devices fall back to flat color). Even if the import finishes without warnings, open the Preview and confirm the gradient dot survived; if it flattened, exporting a 512px PNG into drawable-xxhdpi etc. is the safer route.

2. The button (Hero / 4x1 equivalent)

Style is a matter of taste — all three variants are supported, and the app guides default to the neutral outline (the web page defaults to brand blue — Login button component). The pill shape is the Material 3 convention.

// Shared content — used by all three variants
@Composable
private fun RowScope.LogiButtonContent() {
    Image(                                                  // not Icon() — see below
        painter = painterResource(R.drawable.logi_icon),
        contentDescription = null,
        modifier = Modifier.size(24.dp),
    )
    Spacer(Modifier.width(8.dp))
    Text("Sign in with logi", fontWeight = FontWeight.SemiBold)
}

Neutral outline (app default example) — canvas surface + border:

OutlinedButton(
    onClick = { /* start your RP's OAuth flow */ },
    modifier = Modifier.fillMaxWidth().height(56.dp),
) { LogiButtonContent() }

Brand blue — colors from the icon's dot gradient, same in light/dark:

Button(
    onClick = { /* start your RP's OAuth flow */ },
    modifier = Modifier.fillMaxWidth().height(56.dp)
        .background(
            Brush.linearGradient(listOf(Color(0xFF0088FF), Color(0xFF0041E6))),
            shape = CircleShape,                            // M3 pill
        ),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Transparent,                 // the gradient Brush paints the bg
        contentColor = Color.White,
    ),
) { LogiButtonContent() }

Inverting (the web's former default) — navy in light, white in dark:

val dark = isSystemInDarkTheme()
Button(
    onClick = { /* start your RP's OAuth flow */ },
    modifier = Modifier.fillMaxWidth().height(56.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = if (dark) Color.White else Color(0xFF0F172A),   // --logi-button-bg
        contentColor = if (dark) Color(0xFF0F172A) else Color(0xFFF8FAFC),
    ),
) { LogiButtonContent() }

🚨 Danger: Icon() erases the gradient Icon() applies LocalContentColor as a tint by default — the gradient dot becomes a flat color, violating the brand guide's "no color separation" rule. Use Image(), or if you must use Icon(), pass tint = Color.Unspecified explicitly.

For icon-only (1x1) keep the touch target at 48dp or larger and set contentDescription = "Sign in with logi".

3. Verify — on screen, not by build success

A resource-name typo fails the compile, but a gradient flattened by tint and a flat-color fallback both build green. Check the actual render on an emulator:

adb exec-out screencap -p > login.png   # confirm the gradient dot renders, with your eyes

Brand rules (summary)

Copy "Sign in with logi" · minimum 32×32dp · no distortion / rotation / color separation — full table at Login button component › Brand guide.