버튼 만들기

버튼을 사용하면 사용자가 정의된 작업을 트리거할 수 있습니다. 버튼에는 5가지 유형이 있습니다.

유형

디자인

목적

채워짐

대비되는 텍스트가 있는 단색 배경

'제출', '저장'과 같은 기본 작업 그림자 효과는 버튼의 중요성을 강조합니다.

Tonal

배경 색상은 표면과 일치하도록 다릅니다.

기본 또는 중요한 작업 채워진 버튼은 시각적 무게를 제공하며 '장바구니에 추가', '로그인'과 같은 작업에 적합합니다.

과열

그림자를 사용하면 눈에 띄게 할 수 있습니다.

기본 또는 중요한 작업 버튼을 더 눈에 띄게 하려면 높이를 높입니다.

윤곽선 있음

테두리가 있으며 채우기가 없습니다.

중요하지만 기본이 아닌 작업에 사용합니다. 윤곽선이 있는 버튼은 다른 버튼과 함께 사용하여 '취소' 또는 '뒤로'와 같은 대체 작업이나 보조 작업을 나타내는 데 적합합니다.

텍스트

배경이나 테두리가 없는 텍스트

탐색 링크와 같이 중요하지 않은 작업 또는 '자세히 알아보기' 또는 '세부정보 보기'와 같은 보조 작업

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

채워진 버튼 만들기

채워진 버튼 구성요소는 기본 Button 컴포저블을 사용합니다. 기본적으로 단색으로 채워집니다.

결과

'filled'라고 적힌 보라색 배경의 채워진 버튼
그림 1. 채워진 버튼

채워진 색조 버튼 만들기

채워진 색조 버튼 구성요소는 FilledTonalButton 컴포저블을 사용합니다. 기본적으로 색조 색상으로 채워집니다.

결과

연한 보라색 배경에 'filled'라고 적힌 색조 버튼
그림 2. 색조 버튼

윤곽선이 있는 버튼 만들기

윤곽선이 있는 버튼 구성요소는 OutlinedButton 컴포저블을 사용합니다. 기본적으로 윤곽선과 함께 표시됩니다.

결과

'윤곽선'이라고 적힌 어두운 테두리가 있는 투명한 윤곽선 버튼
그림 3. 윤곽선이 있는 버튼

상단 버튼 만들기

상단 버튼 구성요소는 ElevatedButton 컴포저블을 사용합니다. 기본적으로 고도 효과를 나타내는 그림자가 있으며 그림자가 있는 윤곽선이 그어진 버튼으로 표시됩니다.

결과

회색 배경에 'Elevated'라고 적힌 버튼이 있습니다.
그림 4. 돌출된 버튼

텍스트 버튼 만들기

텍스트 버튼 구성요소는 TextButton 컴포저블을 사용합니다. 클릭할 때까지는 텍스트로만 표시됩니다. 기본적으로 솔리드 채우기나 윤곽선이 없습니다.

결과

'텍스트 버튼'이라고 표시된 텍스트 버튼
그림 5. 텍스트 버튼

핵심사항

  • onClick: 사용자가 버튼을 누르면 호출되는 함수입니다.
  • enabled: 이 매개변수가 false이면 버튼이 사용할 수 없고 비활성 상태로 표시됩니다.
  • colors: 버튼에 사용되는 색상을 결정하는 ButtonColors의 인스턴스입니다.
  • contentPadding: 버튼 내 패딩입니다.

이 가이드가 포함된 컬렉션

이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.

구성 가능한 함수를 사용하여 Material Design 디자인 시스템을 기반으로 멋진 UI 구성요소를 쉽게 만드는 방법을 알아보세요.

질문이나 의견이 있으신가요?

자주 묻는 질문(FAQ) 페이지로 이동하여 빠른 가이드를 알아보거나 문의하여 의견을 보내주세요.