[Android Studio] 화면 구성(1) - 로그인, 회원가입, 아이디 찾기, 비밀번호 찾기

피그마로 화면설계 한 것을 토대로 xml 화면을 구성함.

로그인 화면

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp">
    
    <TextView
        android:id="@+id/loginTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:textSize="32dp"
        android:text="로그인"
        android:textStyle="bold"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"></TextView>
    <LinearLayout
        android:id="@+id/login_linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/loginTextView">
        <TextView
            android:id="@+id/login_idTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="아이디"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/login_idEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="ID"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/login_linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/login_linearLayout1">
        <TextView
            android:id="@+id/login_pwTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="비밀번호"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/login_pwEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="PASSWORD"></EditText>
    </LinearLayout>
    <android.widget.Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="15dp"
        android:text="로그인"
        android:textColor="#000000"
        android:background="@drawable/button_rounded_corners"
        app:layout_constraintTop_toBottomOf="@+id/login_linearLayout2"></android.widget.Button>
    <LinearLayout
        android:id="@+id/login_linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="horizontal"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@+id/loginBtn">
        <TextView
            android:id="@+id/findIdTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:text="아이디 찾기"
            android:textColor="#aeaeae"></TextView>
        <TextView
            android:id="@+id/findPwTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:text="비밀번호 찾기"
            android:textColor="#aeaeae"></TextView>
        <TextView
            android:id="@+id/signUpTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="회원가입"
            android:textColor="#aeaeae"></TextView>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

아이디와 비밀번호를 입력하는 EditText는 둥근 테두리를 가진 네모박스로 만들주기 위해서 이를 정의하는 XML 파일(edittext_rounded_border.xml)을 res/drawable 폴더에 만들고, 해당 파일을 android:background 속성으로 지정함.

edittext_rounded_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:radius="8dp" /> 
    <stroke
        android:width="2dp"
        android:color="#aeaeae" /> 
</shape>

activity_login.xml의 EditText

<EditText
    android:id="@+id/login_pwEditText"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textSize="12dp"
    android:background="@drawable/edittext_rounded_border"
    android:hint="PASSWORD"></EditText>

버튼 또한 둥근 테두리를 만들기 위해 이를 정의하는 XML 파일(button_rounded_corners.xml)을 res/drawable 폴더에 만들고, 해당 파일을 android:background 속성으로 지정함.

button_rounded_corners.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#d9d9d9" /> <!-- 버튼의 배경색을 지정합니다. -->
    <corners android:radius="12dp" /> <!-- 테두리의 각을 조절하여 둥근 테두리를 만듭니다. -->
</shape>

activity_login.xml의 android.weight.button

<android.widget.Button
    android:id="@+id/loginBtn"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginTop="15dp"
    android:text="로그인"
    android:textColor="#000000"
    android:background="@drawable/button_rounded_corners"
    app:layout_constraintTop_toBottomOf="@+id/login_linearLayout2"></android.widget.Button>

결과 화면

다른 화면은 위의 코드를 활용하여 만듦.

회원가입 화면

activity_signup.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp">

    <TextView
        android:id="@+id/signUpTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:textSize="32dp"
        android:text="회원가입"
        android:textStyle="bold"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"></TextView>
    <LinearLayout
        android:id="@+id/signUp_linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/signUpTextView">
        <TextView
            android:id="@+id/signUp_idTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="아이디 *"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/signUp_idEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="예) apple"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/signUp_linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/signUp_linearLayout1">
        <TextView
            android:id="@+id/signUp_pwTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="비밀번호 *"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/signUp_pwEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="영문, 숫자 조합 8~16자"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/signUp_linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/signUp_linearLayout2">
        <TextView
            android:id="@+id/signUp_pwChkTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="비밀번호 확인 *"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/signUp_pwChkEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="비밀번호를 한 번 더 입력해주세요."></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/signUp_linearLayout4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/signUp_linearLayout3">
        <TextView
            android:id="@+id/signUp_nameTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="이름 *"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/signUp_nameEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="예) 홍길동"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/signUp_linearLayout5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/signUp_linearLayout4">
        <TextView
            android:id="@+id/signUp_emailTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="이메일 *"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/signUp_emailEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="예) apple@gmail.com"></EditText>
    </LinearLayout>
    <android.widget.Button
        android:id="@+id/signUpBtn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="15dp"
        android:text="회원가입"
        android:textColor="#000000"
        android:background="@drawable/button_rounded_corners"
        app:layout_constraintTop_toBottomOf="@+id/signUp_linearLayout5"></android.widget.Button>

</androidx.constraintlayout.widget.ConstraintLayout>

결과 화면

아이디 찾기 화면

activity_findid.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp">

    <TextView
        android:id="@+id/findIdTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:textSize="32dp"
        android:text="아이디 찾기"
        android:textStyle="bold"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"></TextView>
    <LinearLayout
        android:id="@+id/findId_linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/findIdTextView">
        <TextView
            android:id="@+id/findId_nameTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="이름"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/findId_nameEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="예) 홍길동"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/findId_linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/findId_linearLayout1">
        <TextView
            android:id="@+id/findId_emailTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="이메일"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/findId_emailEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="예) apple@gmail.com"></EditText>
    </LinearLayout>
    <android.widget.Button
        android:id="@+id/findIdBtn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="15dp"
        android:text="찾기"
        android:textColor="#000000"
        android:background="@drawable/button_rounded_corners"
        app:layout_constraintTop_toBottomOf="@+id/findId_linearLayout2"></android.widget.Button>
    <android.widget.Button
        android:id="@+id/cancelBtn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="15dp"
        android:text="취소"
        android:textColor="#000000"
        android:background="@drawable/button_rounded_corners"
        app:layout_constraintTop_toBottomOf="@+id/findIdBtn"></android.widget.Button>

</androidx.constraintlayout.widget.ConstraintLayout>

결과 화면

비밀번호 찾기 화면

activity_findpw.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp">

    <TextView
        android:id="@+id/findPwTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:textSize="32dp"
        android:text="비밀번호 찾기"
        android:textStyle="bold"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"></TextView>
    <LinearLayout
        android:id="@+id/findPw_linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/findPwTextView">
        <TextView
            android:id="@+id/findPw_nameTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="이름"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/findPw_nameEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="예) 홍길동"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/findPw_linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/findPw_linearLayout1">
        <TextView
            android:id="@+id/findPw_emailTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="이메일"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/findPw_emailEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="예) apple@gmail.com"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/findPw_linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/findPw_linearLayout2">
        <TextView
            android:id="@+id/findPw_PwTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="새 비밀번호"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/findPw_PwEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="영문, 숫자 조합 8~16자"></EditText>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/findPw_linearLayout4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/findPw_linearLayout3">
        <TextView
            android:id="@+id/findPw_PwChkTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:text="새 비밀번호 확인"
            android:textColor="#000000"></TextView>
        <EditText
            android:id="@+id/findPw_PwChkEditText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:textSize="12dp"
            android:background="@drawable/edittext_rounded_border"
            android:hint="비밀번호를 한 번 더 입력해주세요."></EditText>
    </LinearLayout>
    <android.widget.Button
        android:id="@+id/findPwBtn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="15dp"
        android:text="새 비밀번호 설정"
        android:textColor="#000000"
        android:background="@drawable/button_rounded_corners"
        app:layout_constraintTop_toBottomOf="@+id/findPw_linearLayout4"></android.widget.Button>
    <android.widget.Button
        android:id="@+id/cancelBtn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="15dp"
        android:text="취소"
        android:textColor="#000000"
        android:background="@drawable/button_rounded_corners"
        app:layout_constraintTop_toBottomOf="@+id/findPwBtn"></android.widget.Button>

</androidx.constraintlayout.widget.ConstraintLayout>

결과 화면