본문 바로가기
Android Project

[Android/Kotlin] 커뮤니티앱 (1) - 스플래시, 회원가입, 로그인 디자인

juwon2 2024. 1. 28. 14:25

일단 스플래시 화면부터 만들어볼것이다

 

# 스플래시 화면

먼저 스플래시 화면을 디자인해준다

<?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"
    android:background="@color/mainColor"
    tools:context=".SplashActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_splash.xml

 

activity_splash.xml

 

 

매니페스트로 들어가서 SplahActivity엑티비티 안에 intent-filter 코드를 추가해줘서 SplahActivity엑티비티가 제일 처음 화면으로 나오도록 설정한다

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MySoloLife"
        tools:targetApi="31">
      
        <activity
            android:name=".SplashActivity"
            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">
        </activity>
    </application>

</manifest>

AndroidManifest.kt

 

 

그리고 SplashActivity다음에 나올 IntroActivity를 생성해준뒤에, 

SplashActivity로 돌아와서 3초동안 SplashActivity가 나온뒤에 종료되고 IntroActivity로 이동하는 코드를 짜준다

package com.example.mysololife

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import com.example.mysololife.auth.IntroActivity

class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)

        // 3초있다가 SplashActivity 종료되고, IntroActivity로 이동
        Handler().postDelayed({
            startActivity(Intent(this, IntroActivity::class.java))
            finish()
        }, 3000)
    }
}

SplashActivity.kt

 

 

그리고 상태바 색상을 변경해주기 위해서 themes로 가서 statusBarColor의 색상을 변경하여 색상을 바꿔준다

색상은 color.xml에 가서 mainColor라는 이름으로 노란색상을 미리 지정해두었다

<resources xmlns:tools="http://schemas.android.com/tools">
    
    <style name="Base.Theme.MySoloLife" parent="Theme.AppCompat.Light">
       
         <item name="colorPrimaryVariant">@color/mainColor</item>
        <item name="android:statusBarColor" tools:targetApi="l">@color/mainColor</item> <!--상태바 색변경-->
        <item name="windowNoTitle">true</item>              <!--엑션바 없애기-->
        
    </style>
    

    <style name="Theme.MySoloLife" parent="Base.Theme.MySoloLife" />

</resources>

themes.xml

 

이렇게하면 앱을 실행하자마자 SplashActivity가 3초동안 실행되고 바로 IntroActivity로 화면이 전환되는것을 확인할수있다 

 

이제 activity_intro.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"
    tools:context=".auth.IntroActivity">

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

        <ImageView
            android:src="@drawable/loginbg"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="500dp"/>

        <ImageView
            android:src="@drawable/upperbg"
            android:layout_alignParentBottom="true"
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="360dp"/>


        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/loginBtn"
                android:text="로그인"
                android:textSize="20sp"
                android:textStyle="bold"
                android:background="@drawable/background_radius"
                android:layout_width="match_parent"
                android:layout_margin="5dp"
                android:layout_height="60dp"/>

            <Button
                android:id="@+id/joinBtn"
                android:text="회원가입"
                android:textSize="20sp"
                android:textStyle="bold"
                android:background="@drawable/background_radius"
                android:layout_margin="5dp"
                android:layout_width="match_parent"
                android:layout_height="60dp"/>

            <Button
                android:id="@+id/noAccountBtn"
                android:text="비회원 가입"
                android:layout_margin="5dp"
                android:textStyle="bold"
                android:textSize="20sp"
                android:background="@drawable/background_radius"
                android:layout_width="match_parent"
                android:layout_height="60dp"/>


        </LinearLayout>

    </RelativeLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

activity_intro.xml

 

 

버튼색상이 적용이 안되기때문에 themes에 들어가서 버튼 색상이 적용되도록 아래 parent부분을 수정해주었다

parent="Theme.AppCompat.Light"

themes.xml

 

버튼을 동그랗게 표시해주기위해 버튼 백그라운드로 background_radius레이아웃을 적용시켜주었다

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding = "10dp">
    <solid android:color="#ffffff"></solid>

    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp">

    </corners>

</shape>

background_radius.xml

 

activity_intro.xml

 

이렇게 디자인되는것을 확인할수있다

 

 

이제 방금만든 화면에서 로그인, 회원가입,비회원 가입을 눌렀을때 각각의 엑티비티로 이동하도록 코드를 짜주겠다

데이터바인딩을 이용해서 코드를 짜줄것이기때문에 build.gradle(app)으로 들어가서 dataBinding을 할수있는 코드를 추가해준다

dataBinding {
    enable = true
}

build.gradle(app)

 

그런다음 activity_intro.xml로 가서 layout으로 코드 전체를 감싸준뒤, IntroActivity.kt 으로 가서 바인딩틀을 짜준다

package com.example.mysololife.auth


class IntroActivity : AppCompatActivity() {

    private lateinit var binding: ActivityIntroBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DataBindingUtil.setContentView(this,R.layout.activity_intro)
    }
}

IntroActivity.kt (데이터바인딩 틀)

 

틀을 만들어놓고 여기다가 로그인 버튼 클릭시 LoginActivity로 이동하고, 회원가입 버튼 클릭시 JoinActivity로 이동하는 코드를 추가한다

package com.example.mysololife.auth

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.example.mysololife.R
import com.example.mysololife.databinding.ActivityIntroBinding

class IntroActivity : AppCompatActivity() {

    private lateinit var binding: ActivityIntroBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DataBindingUtil.setContentView(this,R.layout.activity_intro)

        //로그인 버튼 클릭시 LoginActivity로 이동
        binding.loginBtn.setOnClickListener {
            val intent = Intent(this, LoginActivity::class.java)
            startActivity(intent)
        }

        //회원가입 버튼 클릭시 JoinActivity로 이동
        binding.joinBtn.setOnClickListener {
            val intent = Intent(this, JoinActivity::class.java)
            startActivity(intent)
        }
    }
}

IntroActivity.kt

 

 

 

아직화면디자인이 안되어있어서 화면디자인을 해야한다

먼저 로그인화면부터 디자인해보겠다

 

<?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"
    tools:context=".auth.LoginActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:background="@color/mainColor"
        android:layout_height="150dp">

        <TextView
            android:text="로그인"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="#000000"
            android:textSize="20sp"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:orientation="vertical">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="email"
            style="@style/AuthEditText"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:background="#999999"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_height="0.5dp"/>


        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:inputType="textPassword"
            android:hint="password"
            style="@style/AuthEditText" />

        <LinearLayout
            android:layout_width="match_parent"
            android:background="#999999"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_height="0.5dp"/>

        <Button
            android:layout_margin="20dp"
            android:background="@drawable/background_radius_yellow"
            android:text="로그인하기"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>


    </LinearLayout>

</LinearLayout>

activity_login.xml

 

여기서 이메일과 패스워드를 입력하는 EditText의 값은 같은값이 많기때문에 만들때마다 하나하나 입력하는게 번거로울수있다. 그래서 themes.xml로 가서 공통된 부분의 스타일을 만들어준다

background, textSize, margin값들을 적어놓았다

<!--스타일 설정-->
<style name="AuthEditText" parent="android:Widget.EditText">

    <item name="android:background">@android:color/transparent</item>
    <item name="android:textSize">15sp</item>
    <item name="android:layout_margin">10dp</item>
    
</style>

themes.xml

이렇게 적어놓으면 activity_login.xml 레이아웃파일에서 EditText에  style = "@style/AuthEditText" 이 한줄만 적어주면되서 편리하다

 

그리고 로그인하기 버튼 테두리를 둥글게하고 색상도 노란색으로 변경해준뒤 activity_login.xml로 가서 버튼에 백그라운드로 적용해주면된다 

아까만들었던 background_radius.xml에서 색상만 노란색으로 변경해준것이다

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding = "10dp">
    <solid android:color="#ffd400"></solid>

    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp">
    </corners>

</shape>

background_radius_yellow.xml

 

 

activity_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"
    tools:context=".auth.JoinActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:background="@color/mainColor"
        android:layout_height="150dp">

        <TextView
            android:text="회원가입"
            android:gravity="center"
            android:textStyle="bold"
            android:textColor="#000000"
            android:textSize="20sp"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:orientation="vertical">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="email"
            style="@style/AuthEditText"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:background="#999999"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_height="0.5dp"/>


        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:inputType="textPassword"
            android:hint="password"
            style="@style/AuthEditText"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:background="#999999"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_height="0.5dp"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:inputType="textPassword"
            android:hint="password check"
            style="@style/AuthEditText"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:background="#999999"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_height="0.5dp"/>

        <Button
            android:layout_margin="20dp"
            android:background="@drawable/background_radius_yellow"
            android:text="회원가입하기"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>


    </LinearLayout>

</LinearLayout>

activity_join.xml

 

 

activity_join.xml

 

이렇게하면 스플래시 화면이 나오고, 인트로 화면이 나와서 로그인버튼과 회원가입버튼을 누르면 방금 디자인한 화면이 보이는 것을 확인할수있다

'Android Project' 카테고리의 다른 글

[Android/Kotlin] 커뮤니티앱(3) - 로그인유무에 따른 엑티비티 전환 ,하단네비게이션바 설정  (0) 2024.01.28
[Android/Kotlin] 커뮤니티앱(2) - 회원가입, 로그인, 비회원 가입 기능 구현  (0) 2024.01.28
[Android/Kotlin] FLO앱 클론코딩(4) - 생명주기  (0) 2024.01.05
[Android/Kotlin] FLO앱 클론코딩(3) - Splash화면  (0) 2024.01.05
[Android/Kotlin] FLO앱 클론코딩(2)  (0) 2024.01.05

'Android Project' Related Articles

티스토리툴바