[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

이번 시간에는 채팅앱 만들기 첫 번째 시간 로그인 액티비티 만드는 방법을 알아보겠습니다.

---

목차

1. 실행 화면
2. 뷰 바인딩 
3. 백그라운드 drawable
4. 로그인 화면 LogInActivity
5. 홈 화면 변경

---

1. 실행 화면

2. 뷰 바인딩 

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 백그라운드 drawable

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

edit_background.xml

 - 설명 -

1. <corners android:radius="20dp" />

   외곽선 둥글게

2. stroke android:width="4dp"

   외곽선 굵기

3. stroke android:color="@color/greren"

   외곽선 색상

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp" />
    <stroke
        android:width="4dp"
        android:color="@color/green" />
</shape>

 

btn_background.xml

 - 설명 -

 1. <solid android:color="@color/greren"/>

   내부 색상

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp"/>
    <solid android:color="@color/green"/>
</shape>

res -> value -> colors.xml

<color name="green">#4CAF50</color>

 

4. 로그인 화면 LogInActivity

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: LoginActivity

activity_log_in.xml

 - 설명 -

 1. 앱 로고 ImageView

 2. 이메일 입력 EditText

 3. 패스워드 입력 EditText

 4. 로그인 Button

 5. 회원가입 Button

 6. 이미지

 res -> drawable

chat.png

0.01MB

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".LogInActivity">

    <ImageView
        android:id="@+id/logo_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:src="@drawable/chat" />

    <EditText
        android:id="@+id/email_edit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/logo_image"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/edit_background"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:paddingStart="15dp" />

    <EditText
        android:id="@+id/password_edit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/email_edit"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/edit_background"
        android:hint="password"
        android:inputType="numberPassword"
        android:paddingStart="15dp" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/login_btn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_edit"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_background"
        android:text="로그인"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/signUp_btn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_btn"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_background"
        android:text="회원 가입"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</RelativeLayout>

 

5. 홈 화면 변경

AndroidManifest.xml

 - 설명 -

 MainActivity에 있는 intent-filter를 LogInActivity로 옮겨준다.

 앱 실행 시 LogInActivity가 홈 화면으로 보인다. 

        <activity
            android:name=".LogInActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MainActivity"
            android:exported="true"/>

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정