Android Custom the shape of an outlined button

사용 언어: Kotlin 1.6.10
사용 버전: Android Studio 2021.01.01
​

안드로이드 Custom the shape of an outlined button을 알아보겠습니다.

​
기본적인 Material Outlined Button은 조약돌같이 동그랗습니다. 동글동글.

가끔 앱을 만들다 보면 다른 모양도 필요할 때가 있습니다.

오늘은 다른 모양을 만들어보겠습니다. 청동기 시대에 사용한 반달돌칼 모양에 도전하겠습니다.

​

Style 또는 Theme으로 갑니다.

Material Outlined Button의 모양은 shapeAppearance에서 정의됩니다.

기본 테두리 버튼은 ShapeAppearance.Material3.SmallComponent를 사용합니다.

​

우리는 위의 스타일을 상속받는 우리만의 ShapeAppearance를 만들어줍시다.

우리가 사용할 이름은 name에 정의하고, parent에는 상속받을 스타일을 적어줍니다.

item에는 우리가 변경할 속성들을 적어줍니다. 일단 반달 모양이기 때문에 cornerFamily에는 corner를 적어줍니다. 그리고 오른쪽 위, 왼쪽 위, 오른쪽 아래, 왼쪽 아래 구석의 동그란 정도를 숫자로 적어 줍니다.

cornerSizeBottomLeft는 왼쪽 아래, cornerSizeBottomRight는 오른쪽 아래, cornerSizeTopLeft는 왼쪽 위, cornerSizeTopRight는 오른쪽 위를 나타냅니다.

​

​

우리가 만든 ShapeFullScreenButtonUP은 ShapeAppearance를 만든 거기 때문에 버튼에 적용된 상태는 아닙니다. 이제 버튼 스타일을 만듭니다.

이름에 FullScreenButtonUp이라 만들었고, parent에는 상속받을 OutlinedButton을 적었습니다.

우리는 모양만 바꿀 거기 때문에 shapeAppearanceOverlay만 우리가 만든 ShapeFullScreenButtonUp으로 변경해 줍니다.

자 다음과 같이 만들었으면, 위의 동그란 버튼으로 갑니다.

이제 style에 우리가 만든 FullScreenButtonUp을 적용해 줍니다.

짜잔, 반달 돌칼이 되었습니다.

끝.

카테고리: Android