LANGUAGE/Kotlin

[Kotlin] round Button (gradient)

보겸삼촌 2020. 6. 26. 00:40

# 개발환경

tool : android studio 4.0
os : windows 10 pro 64-bit

 

 

# Tip

레이아웃 중 공백을 주기 위해선 전체 layout에 weightSum을 1로, 빈 공백을 위해서 width=0, height=0 인 View에 layout_weight=1으로 주면 좋음

  

 

- Button 속성

  ▶ textAllCaps : true일 때, text의 모든 문자를 대문자로 바꿈

 

 

- XML 태그

  ▶ solid : 색상

  ▶ stroke : 윤곽선 

  ▶ gradient : 그라데이션

      - angle : 각도, (45도 단위)

      - startColor, centerColor, endColor

  ▶ corners : 라운드

      - bottomLeftRadius : 각도 깊이 ...

  ▶ padding

 

 

 

#투명도 설정

color 에서 헥사코드 앞 두자리가 투명도

 

 

  색상을 선택하면 A%에 투명도 %가 나오고, Hex 코드 값으로 4D가 나타남

 

 

 

 

# 샘플코드

# app > res > drawable > custom_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#05ACF8"></solid>

    <gradient
        android:angle="225"
        android:centerColor="#359CCA"
        android:endColor="#01405C"
        android:startColor="#AAE0F8" />

    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp" />

    <stroke
        android:width="2dp"
        android:color="#BDBDBD" />
</shape>

 

 

 

[참고] https://www.youtube.com/watch?v=3UiODzi8-0U

[참고] 투명도 - 헥사코드 값, https://pimi.tistory.com/5