[Android studio | Java] 로그인, 회원가입 구현예제 (1)

안드로이드 스튜디오(자바)로 처음 구현하는 개발자 분들을 위한 도움이 되기를 바라며 첫 글을 남겨 본다.

안드로이드 스튜디오로 여러 프로젝트들을 도전하며 가장 먼저 해내야 했던 로그인, 회원가입 기능 구현. 처음에는 오류도 나고 어려웠지만, 계속 하다 보니 쉽게 구현할 수 있다는 걸 알게 되었다.

① 로그인 페이지를 위한 액티비티 생성

• [app] 파일을 누르면 [manifests], [java], [res] 파일이 나온다. 그 중 [java]파일에서 첫번째 com파일에 오른쪽 마우스를 클릭한다.-마우스를 클릭하면 사진처럼 New->Activity->Fullscreen Activity를 누른다.

② 로그인 페이지 만들기

• 방금 만든 로그인 액티비티의 xml은 [res] -> [layout] 파일에 있다.

activity_login.xml 디자인

activity_login.xml 코드

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:theme="@style/ThemeOverlay.Vellog_login.FullscreenContainer"
    tools:context=".Login">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="30dp"
        android:layout_marginBottom="30dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/logintext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:text="회원 로그인"
            android:textColor="@color/purple_200"
            android:textStyle="bold"
            android:textSize="25dp"
            android:textAlignment="center"
            android:gravity="center_horizontal" />

        <EditText
            android:id="@+id/editID"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginBottom="10dp"
            android:layout_gravity="center"
            android:background="@drawable/box_id"
            android:ems="10"
            android:hint="아이디"
            android:inputType="textPersonName"
            android:text="" />

        <EditText
            android:id="@+id/ediPassword"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:background="@drawable/box_id"
            android:ems="10"
            android:hint="비밀번호"
            android:inputType="textPassword" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/loginbutton"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:layout_marginTop="20dp"
            android:layout_gravity="center"
            android:background="@drawable/box_login"
            android:text="로그인"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/signin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:text="회원가입"
            android:textColor="@color/black"
            android:textSize="13dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="240dp"
            android:textAlignment="center"
            android:gravity="center_horizontal"
            android:text=" @yuulee112"
            android:textColor="@color/purple_200"
            android:textSize="18dp"
            android:textStyle="bold" />

    </LinearLayout>
</FrameLayout>

activity_login.java 코드

package com.example.vellog_login;


import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;


public class Login extends AppCompatActivity {
    TextView sign;

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        //회원가입 버튼
        sign = findViewById(R.id.signin);

        //회원가입 버튼 클릭시, 회원가입 페이지로 이동
        sign.setOnClickListener(v -> {
            Intent intent = new Intent(this, Signup.class);
            startActivity(intent);
        });
    }
}

일단 회원가입 페이지 연결만 해둔 상태이다.
(retrofit2 POST/GET 연결은 다음 글에서)

③ 회원가입 페이지 만들기

• 로그인과 같은 방식으로 액티비티를 생성해준다.

activity_signup.xml 디자인

activity_signup.xml 코드

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:theme="@style/ThemeOverlay.Vellog_login.FullscreenContainer"
    tools:context=".Signup">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1.7"
                android:text="back"
                android:textColor="@color/purple_200"
                android:textSize="20dp" />

            <TextView
                android:id="@+id/signup"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:layout_weight="2"
                android:text="회원 가입"
                android:textColor="@color/purple_200"
                android:textSize="25dp" />
        </LinearLayout>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/signNametext"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:text="이름"
                    android:textColor="@color/purple_200"
                    android:textSize="20dp"
                    android:textStyle="bold"
                   />

                <EditText
                    android:id="@+id/signName"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_marginBottom="20dp"
                    android:background="@drawable/box_id"
                    android:ems="10"
                    android:hint=" 이름"
                    android:inputType="textPersonName"
                    android:text="" />

                <TextView
                    android:id="@+id/signIDtext"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:text="아이디"
                    android:textColor="@color/purple_200"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <EditText
                    android:id="@+id/signID"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_marginBottom="20dp"
                    android:background="@drawable/box_id"
                    android:ems="10"
                    android:hint=" 아이디"
                    android:inputType="textPersonName"
                    android:text="" />

                <TextView
                    android:id="@+id/signBirthtext"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:text="생년월일"
                    android:textColor="@color/purple_200"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <EditText
                        android:id="@+id/signBirth"
                        android:layout_width="100dp"
                        android:layout_height="40dp"
                        android:layout_marginBottom="20dp"
                        android:layout_marginRight="10dp"
                        android:background="@drawable/box_id"
                        android:ems="10"
                        android:hint=" 년(4자)"
                        android:inputType="textPersonName"
                        android:text="" />
                    <EditText
                        android:id="@+id/signBirth2"
                        android:layout_width="100dp"
                        android:layout_height="40dp"
                        android:layout_marginBottom="20dp"
                        android:layout_marginRight="10dp"
                        android:background="@drawable/box_id"
                        android:ems="10"
                        android:hint=" 월"
                        android:inputType="textPersonName"
                        android:text="" />
                    <EditText
                        android:id="@+id/signBirth3"
                        android:layout_width="100dp"
                        android:layout_height="40dp"
                        android:layout_marginBottom="20dp"
                        android:background="@drawable/box_id"
                        android:ems="10"
                        android:hint=" 일"
                        android:inputType="textPersonName"
                        android:text="" />
                </LinearLayout>

                <TextView
                    android:id="@+id/signPWtext"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:text="비밀번호"
                    android:textColor="@color/purple_200"
                    android:textSize="20dp"
                    android:textStyle="bold" />


                <EditText
                    android:id="@+id/signPW"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_marginBottom="20dp"
                    android:background="@drawable/box_id"
                    android:ems="10"
                    android:hint=" 비밀번호"
                    android:inputType="textPassword"
                    android:text="" />

                <TextView
                    android:id="@+id/signPW2text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:text="비밀번호 확인"
                    android:textColor="@color/purple_200"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <EditText
                        android:id="@+id/signPW2"
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:layout_marginBottom="20dp"
                        android:background="@drawable/box_id"
                        android:ems="10"
                        android:hint=" 비밀번호 다시 입력"
                        android:inputType="textPassword"
                        android:text="" />

                    <androidx.appcompat.widget.AppCompatButton
                        android:id="@+id/pwcheckbutton"
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:layout_marginLeft="10dp"
                        android:background="@drawable/box_login"
                        android:text="확인"
                        android:textColor="@color/white"
                        android:textSize="16sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <TextView
                    android:id="@+id/signmailtext"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:text="이메일"
                    android:textColor="@color/purple_200"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                    <EditText
                        android:id="@+id/signmail"
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:layout_marginBottom="20dp"
                        android:background="@drawable/box_id"
                        android:ems="10"
                        android:hint=" 이메일"
                        android:inputType="textPersonName"
                        android:text="" />

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/signupbutton"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_marginTop="20dp"
                    android:layout_gravity="center"
                    android:background="@drawable/box_login"
                    android:text="회원가입"
                    android:textColor="@color/white"
                    android:textSize="16sp"
                    android:textStyle="bold" />

            </LinearLayout>
        </ScrollView>

    </LinearLayout>
</FrameLayout>

activity_signup.java 코드

package com.example.vellog_login;


import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;


public class Signup extends AppCompatActivity {
    TextView back;
    EditText name,id,pw,pw2,email,birthyear,birthdate,birthday;
    Button pwcheck, submit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_signup);

        //뒤로 가기 버튼
        back = findViewById(R.id.back);
        back.setOnClickListener(v -> onBackPressed() );

        //기입 항목
        name = findViewById(R.id.signName);
        id=findViewById(R.id.signID);
        pw=findViewById(R.id.signPW);
        pw2=findViewById(R.id.signPW2);
        email=findViewById(R.id.signmail);
        birthyear=findViewById(R.id.signBirth);
        birthdate=findViewById(R.id.signBirth2);
        birthday=findViewById(R.id.signBirth3);

        //비밀번호 확인 버튼
        pwcheck = findViewById(R.id.pwcheckbutton);
        pwcheck.setOnClickListener(v -> {
            if(pw.getText().toString().equals(pw2.getText().toString())){
                pwcheck.setText("일치");
            }else{
                Toast.makeText(Signup.this, "비밀번호가 다릅니다.", Toast.LENGTH_LONG).show();
            }
        });

        //회원가입 완료 버튼
        submit = findViewById(R.id.signupbutton);
        submit.setOnClickListener(v -> {
            Intent intent = new Intent(this, Login.class);
            startActivity(intent);
        });



    }
}

마찬가지로 회원가입 정보의 retrofit2 POST는 다음 글에서 설명한다!