[Android Studio] 로그인 창 레이아웃 만들기

<디자인 더하지 않은 기본 틀만 짠 XML>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="LOGIN"/>
        <!--layout_gravity: view를 감싸는 상위 뷰(Linear Layout)를 기준으로 할때 뷰의 위치-->
        <!--gravity: view 내부의 content의 위치 설정-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@null"
        android:src="@mipmap/ic_launcher"/>
    <!--사진 넣고싶으면 되도록 src에 집어넣기-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Log in"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="or"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Facebook"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:gravity="center"
        android:weightSum="1">
        <!--자식들을 중앙정렬 하고 싶으면 부모에게 속성을 준다.-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"
            android:text="Find Password"
            android:layout_weight="0.5"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"
            android:text="Sign Up"
            android:layout_weight="0.5"/>

    </LinearLayout>
</LinearLayout>

+) 디자인 추가한 로그인 레이아웃

- 사진 추가하는 법

: res/drawable 파일에 사용할 사진 파일 복붙

- 사용자 지정 방식으로 color 추가해야 함

res/values/colors.xml 파일에서 새로 지정해서 추가해넣기

- 버튼에 디자인 추가해 넣는 방법

=> res/values/drawable 폴더에 xml 파일 하나 만들어서 디자인 추가하고,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_enabled="true">
       <shape>
           <!--solid: 색깔 설정, corners: 가장자리 둥근 정도 설정-->
           <solid android:color="@color/skyblue">

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

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

이 파일을 기존 xml 파일에다가 추가해넣는다.

android:background="@drawable/btn_blue2"

-EditText에서 작성중일때도 hint가 보이게 하는 방법

  <!--구글에서 제공하는 디자인: input field에 값을 채워도 hint가 보인다.-->
  <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>
    
    <!--기본 ver) 힌트 사라짐-->
    <EditText
        android:layout_width="match_parent"
        android:hint="Email"
        android:layout_height="50dp"/>

=> 위: 구글 제공 디자인 사용, 아래: 기본 EditText 사용

- 버튼 안에 icon 넣는 방법

        android:drawableLeft="@drawable/icon_person"

+) icon 상업적/무료 사용 png 다운받을 수 있는 사이트

- simple icon

material.io/resources/icons/?icon=person_search&style=baseline

Material Icons

Get Material Icons

material.io

- Various Designs of Icon

www.iconfinder.com

5,125,000+ free and premium vector icons - Iconfinder

Iconfinder is the world's largest marketplace for vector and raster icons in SVG and PNG formats.

www.iconfinder.com

<디자인까지 포함한 코드>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:textSize="20dp"
        android:text="LOGIN"/>
        <!--layout_gravity: view를 감싸는 상위 뷰(Linear Layout)를 기준으로 할때 뷰의 위치-->
        <!--gravity: view 내부의 content의 위치 설정-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@null"
        android:src="@drawable/christmasicon"/>
    <!--사진 넣고싶으면 되도록 src에 집어넣기-->
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="400dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"/>
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="400dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"/>
    </com.google.android.material.textfield.TextInputLayout>


    <Button
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:background="@drawable/btn_blue"
        android:layout_gravity="center"
        android:text="Log in"
        android:drawableLeft="@drawable/icon_face"
        app:backgroundTint="@color/skyblue" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="3dp"
        android:layout_marginTop="3dp"
        android:gravity="center"
        android:text="or"/>

    <Button
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:background="@drawable/btn_blue2"
        android:layout_gravity="center"
        android:text="Facebook"
        android:drawableLeft="@drawable/icon_person"
        android:layout_marginBottom="10dp"
        app:backgroundTint="@color/Darkblue" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:gravity="center"
        android:weightSum="1">
        <!--자식들을 중앙정렬 하고 싶으면 부모에게 속성을 준다.-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="15sp"
            android:text="Find Password"
            android:layout_weight="0.5"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="15sp"
            android:text="Sign Up"
            android:layout_weight="0.5"/>

    </LinearLayout>
</LinearLayout>

+) textview도 클릭가능하게 만드는 옵션: android:clicakble="true"

'App > Android' 카테고리의 다른 글

RecyclerView로 목록 만들기 (0)	2021.01.22
안드로이드 스튜디오 블루투스 프로그래밍 (0)	2021.01.19
[Android Studio] button을 LinearLayout으로 대체 (0)	2021.01.15
Relative Layout, Linear Layout (0)	2021.01.11