로그인 버튼 — Android (Compose)

Source: integrations/buttons-android.md · Live: https://docs.1pass.dev/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. 아이콘 자산 넣기
• L41-L110: ## 2. 버튼 (Hero / 4x1 상당)
• L111-L119: ## 3. 검증 — 빌드 통과가 아니라 화면으로
• L120-L124: ## 브랜드 규칙 (요약)

---

로그인 버튼 — Android (Compose)

Android 는 SVG 를 직접 렌더하지 않습니다 — VectorDrawable 로 변환해 리소스로 넣는 것이 자산 배치입니다. 버튼 문구·브랜드 규칙은 로그인 버튼 컴포넌트 와 동일하고, 이 페이지는 Android 자산 파이프라인만 다룹니다.

1. 아이콘 자산 넣기

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

Android Studio 에서:

1. res/drawable 우클릭 → New → Vector Asset
2. Asset Type: Local file (SVG, PSD) → logi_icon.svg 선택
3. 이름 logi_icon 으로 임포트

⚠️ Warning: 임포터 경고를 읽고, 결과를 눈으로 확인하세요 logi 아이콘은 linearGradient 를 씁니다. VectorDrawable 의 그라디언트는 API 24+ 에서 동작합니다 (minSdk 24 미만이면 하위 단말에서 단색 폴백). 임포트가 경고 없이 끝나도 Preview 로 그라디언트 dot 이 살아 있는지 확인하고, 뭉개졌다면 512px PNG 로 내려 drawable-xxhdpi 등에 넣는 쪽이 안전합니다.

2. 버튼 (Hero / 4x1 상당)

스타일은 취향입니다 — 세 변형 모두 지원하고, 앱 가이드의 기본 예시는 뉴트럴 아웃라인입니다(웹 기본 예시는 브랜드 블루 — 로그인 버튼 컴포넌트). pill 형태는 Material 3 관례입니다.

// 공통 내용 — 세 변형이 공유
@Composable
private fun RowScope.LogiButtonContent() {
    Image(                                                  // Icon() 아님 — 아래 참조
        painter = painterResource(R.drawable.logi_icon),
        contentDescription = null,
        modifier = Modifier.size(24.dp),
    )
    Spacer(Modifier.width(8.dp))
    Text("logi 로 로그인", fontWeight = FontWeight.SemiBold)
}

뉴트럴 아웃라인 (앱 기본 예시) — 캔버스 표면 + 보더:

OutlinedButton(
    onClick = { /* 자기 RP 의 OAuth 시작 */ },
    modifier = Modifier.fillMaxWidth().height(56.dp),
) { LogiButtonContent() }

브랜드 블루 — 아이콘 dot 그라디언트에서 취색, 라이트/다크 동일:

Button(
    onClick = { /* 자기 RP 의 OAuth 시작 */ },
    modifier = Modifier.fillMaxWidth().height(56.dp)
        .background(
            Brush.linearGradient(listOf(Color(0xFF0088FF), Color(0xFF0041E6))),
            shape = CircleShape,                            // M3 pill
        ),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Transparent,                 // 그라디언트는 배경 Brush 가 담당
        contentColor = Color.White,
    ),
) { LogiButtonContent() }

반전형 (웹 종전 기본) — 라이트=네이비, 다크=화이트:

val dark = isSystemInDarkTheme()
Button(
    onClick = { /* 자기 RP 의 OAuth 시작 */ },
    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() 을 쓰면 그라디언트가 지워집니다 Icon() 은 기본으로 LocalContentColor 를 tint 로 덮어씌웁니다 — 그라디언트 dot 이 단색이 되어 브랜드 가이드의 "색 분해 ❌" 위반. Image() 를 쓰거나, 굳이 Icon() 이면 tint = Color.Unspecified 를 명시하세요.

아이콘 전용(1x1) 은 터치 타깃 48dp 이상을 유지하고 contentDescription = "logi 로 로그인" 을 답니다.

3. 검증 — 빌드 통과가 아니라 화면으로

리소스 이름 오타는 컴파일에서 잡히지만, tint 로 뭉개진 그라디언트와 폴백 단색 렌더는 빌드가 초록입니다. 에뮬레이터에서 실제 렌더를 확인하세요:

adb exec-out screencap -p > login.png   # 그라디언트 dot 이 보이는지 눈으로

브랜드 규칙 (요약)

문구 "logi 로 로그인" · 최소 32×32dp · 변형/회전/색 분해 금지 — 전체 표는 로그인 버튼 컴포넌트 › 브랜드 가이드.