안드로이드 Button 디자인(shape, corners, stroke, gradient)

오늘은 스탠다드 반의 1주차 과제였던 디자인을 적용한 과정을 리뷰해보려 한다.

디자인을 해본 기억이 없어서 추후 기억을 위해 post를 남긴다.

 

 

이 메인 View에서 다룰 부분은 Sign in과 Register 버튼의 디자인이다.

 

첫 번째로 컴포넌트는 디자인 적용을 위해 AppCompatButton을 사용했다.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="65dp"
    android:layout_marginTop="40dp"
    android:paddingHorizontal="8dp"
    app:layout_constraintTop_toBottomOf="@+id/tv3">
    
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_signIn"
        android:layout_width="0dp"                          // 요구사항 1 반영
        android:layout_height="match_parent"
        android:background="@drawable/button_radius_left"
        android:text="Sign in"
        android:textColor="@color/white"
        android:textSize="22dp"
        android:textAllCaps="false"                         // 문제점 1 해결
        app:layout_constraintHorizontal_weight="1"/>        // 요구사항 1 반영
        // app:layout_constraint 생략

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_signUp"
        android:layout_width="0dp"                          // 요구사항 1 반영
        android:layout_height="match_parent"
        android:background="@drawable/button_radius_right"
        android:text="Register"
        android:textColor="#545151"
        android:textSize="22dp"
        android:textAllCaps="false"                         // 문제점 1 해결
        app:layout_constraintHorizontal_weight="1"/>        // 요구사항 1 반영
        // app:layout_constraint 생략
        
</androidx.constraintlayout.widget.ConstraintLayout>

 

문제점 1. AppCompatButton을 사용해서 text를 출력하니 텍스트가 전부 대문자(SIGN IN, REGISTER)로 나왔었다.

원인 : AppCompatButton컴포넌트는 textAllCaps 속성의 디폴트 값이 true여서 대문자로 출력됨

해결 : textAllCaps값을 false로 적용

 

 

요구사항 1. 두 버튼을 좌우로 반반씩 꽉차게 구현해야 했다.

해결 : (두 버튼 다) android:layout_width 값을 "0dp"로 줘서 weight 값에 따라 일정 비율로 꽉차게 설정

           * weight 값 -> app:layout_constraintHorizontal_weight 값인데 width를 0dp로 준다면 default weight 값은 1인 듯
             별도의 비율을 맞춰야 하는 게 아니라면 app:layout_constraintHorizontal_weight 값을 명시하지 않아도 될 듯?

 

 

문제점 2. 버튼 2개에 따로 외각선(stroke-width="2dp") 부여 시, 가운데가 중첩되어 굵게(4dp) 표시됐다.

해결 : 왼쪽 디자인 xml에서 android:right="-1dp"와, 오른쪽 디자인 xml에서 android:left="-1dp"를 적용하여 가운데에는 1dp 씩만 외각선 처리가 되도록 수정함

 

full code(접은글)

// button_radius_left.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:right="-1dp">  // 문제점 2 해결
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid
            android:color="#F89AEE"/>
        <corners
            android:topLeftRadius="15dp"
            android:bottomLeftRadius="15dp"/>
        <stroke
            android:width="2dp"
            android:color="#000000"/>
    </shape>
</item>
</layer-list>

// button_radius_right.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:left="-1dp">   // 문제점 2 해결
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid
            android:color="#F3F3F3"/>
        <corners
            android:topRightRadius="15dp"
            android:bottomRightRadius="15dp"/>
        <stroke
            android:width="2dp"
            android:color="#000000"/>
    </shape>
</item>
</layer-list>

 

 

이 View에서는 아래와 같이 처음 구현해보는 gradient가 있었다.

gradient + Text +  gradient

// gradient_left.xml
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <gradient
    	// 색이 반대로(오른 쪽에서 왼쪽으로) 가야하기에 180도 설정함
        // 아니면 angle 0주고 start, end Color를 서로 바꿔도 된다.
        android:angle="180"             
        android:startColor="#F89AEE"
        android:endColor="#00C6C3C5" // 제일 앞의 00은 투명도를 100%로 만들기
        android:type="linear" />
</shape>

// gradient_right.xml
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <gradient
        android:angle="0"
        android:startColor="#F89AEE"
        android:endColor="#00C4C4C4"
        android:type="linear" />
</shape>

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginTop="20dp"
    app:layout_constraintTop_toBottomOf="@+id/btn_signIn">

    <TextView   // <- 컴포넌트를 뭐로 해야할지 의문이였다.
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="3dp"
        android:background="@drawable/gradient_left"/>
        // app:layout_constraint 생략

    <TextView
        android:id="@+id/tv_sns_login"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Or Sign up With"
        android:textColor="@color/black"
        android:textSize="12sp"/>
        // app:layout_constraint 생략

    <TextView   // <- 컴포넌트를 뭐로 해야할지 의문이였다.
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="3dp"
        android:background="@drawable/gradient_right"/>
        // app:layout_constraint 생략

</androidx.constraintlayout.widget.ConstraintLayout>

 

이렇게 적용을 하니 제대로 gradient가 나왔지만, 상단에 위치하고 있어 중앙으로 내려줘야 했음

해결법은 간단했다. 좌우 제약조건을 추가하여 가운데 정렬을 하던 것 처럼 Top-Bottom 제약조건을 추가하여 정렬함.

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

 

 

이상 리뷰를 마치고, 다음에는 이 프로젝트에서 SNS(우선 Google부터) Login 기능을 구현한 뒤, 리뷰할 예정이다.