안드로이드 인스타스램 자바(JAVA) #1 로그인 화면 만들기

안녕하세요

오늘부터 안드로이드 인스타그램 관련 코드를 업로드하려 합니다.

 

유튜브 하울의 코딩 채널을 참고해서 만들었습니다. 

코틀린은 많은 정보가 있는데, 자바는 정보가 많이 부족하더라고요.

그래서 자바로 인스타그램을 만들어 보았습니다.

 

천천히 업로드 예정입니다.

자바를 공부하시거나 자바 인스타그램 클론코딩을 찾는 분들에게 도움이 됐으면 좋겠습니다.

필요하신 분들은 유튜브 하울의 코딩 채널을 참고하면서 저의 코드도 같이 보시면서 진행해 주세요.

 

이번 내용은 로그인 화면 만들기입니다.

제가 참고한 사이트는 RelativeLayout을 사용했는데 저는 LinearLayout을 좋아하기 때문에 LinearLayout을 사용했습니다.

우선 Login.java와 login.xml 파일을 만들어 줍니다.

 

login.xml 입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/loginImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/pswoo1"/>
    </LinearLayout>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="8dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <EditText
                android:id="@+id/edtEmail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:hint="Email"
                android:inputType="textEmailAddress">

            </EditText>

            <EditText
                android:id="@+id/edtPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:hint="Password"
                android:inputType="textPassword">

            </EditText>

            <Button
                android:id="@+id/btnLogin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="로그인하기" />

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

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="아이디찾기" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="│" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="비밀번호찾기" />

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="│" />

                <TextView
                    android:id="@+id/textJoin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="회원가입" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="8dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="SNS계정으로 간편하게 로그인/회원가입하기" />

            <Button
                android:id="@+id/btnFaceLogin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="페이스북 로그인" />

            <com.google.android.gms.common.SignInButton
                android:id="@+id/btnGoogleLogin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="구글 로그인"
                android:layout_centerHorizontal="true" />

        </LinearLayout>

    </LinearLayout>
</LinearLayout>

나와있는 그대로 코드를 입력하시면

마지막 구글버튼에서 오류가 나옵니다.

그러면 build.gradle(Module)의 dependencies 부분에 

implementation 'com.google.android.gms:play-services-base:18.1.0'

이와 같이 입력을 해주고 Sync Now를 눌러줍니다.

이 버튼은 나중에 구글아이디로 로그인을 할때 필요합니다.

 

실행 화면입니다.

 

 

이제 시작이기 때문에 비교적 아주 쉬운 내용이었습니다.

혹시나 에러가 생기면 댓글로 알려주세요. 최대한 빠르게 답변해 드리겠습니다.

다음은 파이어베이스를 연동해서 로그인하는 내용을 업로드 하겠습니다.