[Android Kotlin] 안드로이드 로그인 화면 만들기

중고거래 앱을 제작할 예정입니다.

언어는 코틀린을 사용할 것이고 파이어베이스를 사용할 예정입니다.

 

첫번째로 로그인 화면 제작입니다.

 

1. 로그인 xml 파일 추가 및 이미지뷰 추가

일단 layout에 activity_login.xml 파일을 만들어 주고 ImageView를 추가해주었습니다. 아이콘은 하고 싶은 것으로 아무거나 다운받은 후에 drawable폴더에 넣어주고 사용해주세요.

ConstraintLayout은 View 또는 View Group 간의 상대적인 위치 지정을 하여 View를 배치하는 Layout 입니다. 다른 레이아웃에 비해 편리하고 성능 또한 좋아서 앞으로도 레이아웃 사용시에 ConstrainLayout 위주로 사용할 것입니다.

 

ConstraintLayout의 layout_width 는 match_parent로 쓰지 않습니다. 0dp(match_constraint)로 표기합니다. 

 

2. editText 추가

email과 password를 입력해줄 editText 두개와  어플 이름을 기입해줄 textview를 하나 추가했습니다.

일단 세가지를 추가해주신 후에 오른편 상단의 Design탭이나 위처럼 코드와 앱 화면이 둘 다 나오는 split탭에서 view들의 위치를 조정해줍니다. 

 

위 사진에 TextView와 EditText에 빨간 및줄이 쳐져있는 것을 볼 수 있는데 This view is not constrained vertically: at runtime it will jump to the top unless you add a vertical constraint 라는 오류가 뜹니다. 

콘텐츠들 간의 연결이 있어야 하는데 그것이 없어서 생기는 문제인데요.

 

view의 사면에 하나씩 배치되어 있는 동그라미를 다른 view나 벽에 연결하게 되면 해결 됩니다.

다른 방법으로는 위에 표시된 마법봉을 클릭하면 해결 됩니다.

 

그리고 패스워드를 입력하는 editText에는 비밀보장을 위해

android:inputType="textPassword"로 텍스트 입력시 *로 표시 되게끔 해줍니다.

 

3.로그인, 회원가입 버튼과 카카오,구글 로그인 버튼 추가

로그인 버튼과 회원가입 버튼도 위와 같이 추가해줍니다.

 

이미지 적용은 background명령어를 사용

카카오로그인과 구글 로그인 또한 구현할 예정이여서 로그인 버튼 두개 더 추가해줄게요.

버튼 이미지 같은 경우는 카카오와 구글 두 곳 다 자사 홈페이지에서 지원해주고 있습니다.

 

developers.kakao.com/docs/latest/ko/reference/design-guide

Kakao Developers

developers.google.com/identity/branding-guidelines?hl=ko

로그인 브랜드 가이드라인  |  Google ID 플랫폼  |  Google Developers

 

4. 폰트 추가 및 적용 / 버튼 커스텀 추가 및 적용

 

이대로는 너무 심심하니 폰트를 추가해볼게요.

 

제일 먼저 폰트를 다운 받아 줍니다. 네이버에서 무료 폰트를 제공해줘요.

 

hangeul.naver.com/2017/nanum

 

 

res 폴더에 font 폴더가 없으면 추가해줍니다. Resource type 을 font 로 변경해줍니다.

font 폴더에 다운 받은 폰트파일을 넣어줍니다.

fontFamily를 사용하여 font를 적용 시킬 수 있습니다. TextView 뿐만 아니라 버튼 등에도 적용 가능합니다.

 

 

컬러도 추가해 줍니다.  res -> values -> colors.xml 파일에 들어가줍니다.

주로 사용하는 색들을 미리 추가해 주면 좋아요. 

textColor를 사용하여 적용시켜줍니다. 

 

버튼 커스텀을 해보겠습니다. res -> drawable 폴더에 xml파일을 하나 만들어줍니다.

저는 buttoncustom1 이라고 이름 붙혔어요. 

<conrners> 는 테두리의 각도를 정해준다고 생각하시면 됩니다.

<solid> 는 테두리 내의 색상 , <stroke> 는 테두리를 설정해줍니다. 

<stroke>안의 width는 테두리의 두깨를, color는 테두리의 색상을 설정 해줍니다.

 

버튼에서 background 설정으로 적용시켜 줍니다. 

 

 

5.로그인 액티비티 추가와 처음화면 변경

MainActivity 가 있는 폴더에 LoginActivity도 만들어 넣어줍니다. 그리고 activity_login를 적용시켜줍니다.

 

그리고 mainifests -> AndroidMainifest.xml 파일에 들어가서 <activity android:name=".LoginActivity"></activity>

를 추가해주고 위 코드 처럼 메인 액티비티의 <intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

를 LoginActivity로 옮겨줍니다. 

이렇게 변경해주게 되면 앱을 처음 켰을 때 로그인 화면이 먼저 뜨게 됩니다.

 

6.액션바 제거

 

그리고 마지막으로 액션바를 제거해주겠습니다.

red -> values -> styles.xml 파일에 들어가서

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">로 변경해줍니다.

 

 

완성된 화면

activity_login.xml 코드

 

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="20dp"
        android:src="@drawable/basket"
        app:layout_constraintBottom_toTopOf="@+id/textView7"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
         />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:fontFamily="@font/nanumsquareroundeb"
        android:text="중고마켓"
        android:textColor="@color/colorOrange"
        android:textSize="40dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/editText_email"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />

    <EditText
        android:id="@+id/editText_email"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_margin="20dp"
        android:hint="email"
        app:layout_constraintBottom_toTopOf="@+id/editText_password"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

    <EditText
        android:id="@+id/editText_password"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_margin="20dp"
        android:inputType="textPassword"
        android:hint="password"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:background="@drawable/buttoncustom1"
        android:fontFamily="@font/nanumsquareroundb"
        android:id="@+id/btn_login"
        android:layout_width="155dp"
        android:layout_height="50dp"
        android:layout_marginLeft="35dp"
        android:layout_marginTop="35dp"
        android:text="로그인"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText_password" />

    <Button
        android:background="@drawable/buttoncustom1"
        android:fontFamily="@font/nanumsquareroundb"
        android:id="@+id/btn_sign_up"
        android:layout_width="155dp"
        android:layout_height="50dp"
        android:layout_marginRight="35dp"
        android:layout_marginTop="35dp"
        android:text="회원가입"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText_password" />

    <Button
        android:id="@+id/btn_login_kakao"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="40dp"
        android:background="@drawable/kakao_login_medium_wide"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_login" />

    <Button
        android:id="@+id/btn_login_google"
        android:fontFamily="@font/nanumsquareroundb"
        android:layout_width="305dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="구글 로그인        "
        android:textSize="16dp"
        android:background="@drawable/btn_google_signin_light_focus_tvdpi"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_login_kakao" />

</androidx.constraintlayout.widget.ConstraintLayout>