[안드로이드] 앱 로그인 화면 만들기 - 기본 레이아웃 배치

참고 강의: https://youtu.be/rOc3Kdty9Z8?list=PLva6rQOdsvQXdSBN1r2mEt_tqES6NjKKj

 

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


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:src="@mipmap/ic_launcher_round"
        android:layout_gravity="center"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="비밀번호 찾기"
        android:textSize="12dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Login"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="아직 회원이 아니신가요?"
            android:textSize="12dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="회원가입"
            android:textSize="12dp"/>
    </LinearLayout>

</LinearLayout>

 

---

 

색, 디자인: 온라인 포토샵 활용

https://pixlr.com/editor/

Photo editor online - Pixlr.com

 

 

상업적으로 이용 가능한 아이콘 찾기

1. 아이콘파인더 https://www.iconfinder.com/

4,275,000+ free and premium vector icons. SVG, PNG, AI, CSH and PNG format.

 

2. 머터리얼 아이콘 https://material.io/resources/icons/?style=baseline

Material Icons

 

메인 이미지 추가 +  이메일, 패스워드 힌트 
- 이미지는 drawable 폴더에 별도로 저장

<ImageView
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:background="@null"
    android:src="@drawable/main_img"   
    android:layout_gravity="center"/>
  
<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:hint="Email"/>
  
<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:hint="Password"/>

 

 

 

 

---

버튼 색깔

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true">
        <shape>
            <solid android:color="#8BD9DF">

            </solid>
            <corners android:radius="20dp">

            </corners>
        </shape>
    </item>
</selector>

 

 

<Button
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="Login"
    android:background="@drawable/btn_green"/>
    
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="or"
    android:textSize="12dp"/>
    
<Button
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="구글로 로그인"
    android:background="@drawable/btn_pink"/>

 

 

 

 

---

textinput layout

margin

padding

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@null"
        android:src="@drawable/main_img"
        android:layout_gravity="center"/>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="Email"
            android:layout_marginBottom="16dp"/>
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="Password"/>

    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="비밀번호 찾기"
        android:textSize="12dp"
        android:layout_marginBottom="16dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Login"
        android:background="@drawable/btn_green"
        android:layout_marginBottom="10dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="or"
        android:textSize="12dp"
        android:layout_marginBottom="10dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="구글로 로그인"
        android:background="@drawable/btn_pink"
        android:layout_marginBottom="20dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="아직 회원이 아니신가요?"
            android:textSize="12dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="회원가입"
            android:textSize="12dp"/>
    </LinearLayout>

</LinearLayout>

 

---

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@null"
        android:src="@drawable/main_img"
        android:layout_gravity="center"/>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="Email"
            android:layout_marginBottom="5dp"/>
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="Password"/>

    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="비밀번호 찾기"
        android:textSize="12sp"
        android:layout_marginBottom="16dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="로그인"
        android:textColor="@color/cardview_light_background"
        android:background="@drawable/btn_green"
        android:layout_marginBottom="10dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="or"
        android:textSize="12dp"
        android:layout_marginBottom="10dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:gravity="center"
        android:background="@drawable/btn_pink"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:layout_marginBottom="16dp"
        android:clickable="true">

        <ImageView
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:background="@null"
            android:src="@drawable/google"
            android:gravity="center"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="구글로 로그인"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="아직 회원이 아니신가요?"
            android:textSize="12dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="회원가입"
            android:textSize="12dp"/>
    </LinearLayout>

</LinearLayout>