2024-10-22 버튼 배경 그라데이션 처리

간단한 계산기를 만들어 보기 위해 피그마 디자인을 참고하여 앱을 만들고 있던 도중

 

피그마에 있는 버튼의 배경색상이 그라데이션 처리가 되어 있었다.

 

버튼 배경색상을 단색으로는 많이 사용해 봤지만

그라데이션 처리는 해보지 않았기에 간단한 내용이지만 포스팅 해본다.

 

 

먼저 drawable 폴더에 새로운 xml 파일을 만들어 준다.

long_button

 

필자는 여기서 long_button 이라는 파일로 진행했다.

 

long_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="50dp"/>

    <gradient
        android:angle="270"
        android:startColor="#FD699C"
        android:endColor="#FD8569"
        android:type="linear" />

</shape>

 

shape 파일을 만들어서 기존 버튼에 속성을 주듯이 나머지 속성도 적용할 수 있고

 

그라데이션을 주기 위해서 gradient 속성을 작성해준다.

 

 

gradient 속성

 

■  angle : gradient가 흐르는 방향이다. 90 과 270은 세로 방향 , 0과 180은 가로 방향

 

■  startColor , endColor : 단어 뜻 그대로 gradient의 시작색상과 끝색상을 의미한다

 

■  type : gradient 타입은 여러개가 있지만 그중에서 자주 사용하는 속성은 2가지다.

• linear : 일직선으로 표현된 gradient
• radial : 원으로 퍼지는 gradient

 

적용 했을 경우 아래 버튼 이미지 처럼 그라데이션이 적용된걸 볼 수 있다.