04_앱 레이아웃 따라하기 실전-2

이번에는 "앱 레이아웃 따라하기 실전편 2"에 대해 다뤄보겠다.

 

시작하기에 앞서 공부하면서 작성하는 내용이기에 잘못된 내용이 있을 수 있다.

 

---

이번에는 구체적인 레이아웃 수정인데, 먼저 살펴볼 것은 유용한 사이트 및 Gradle 값 변경을 살펴볼 것이다.

 

1. Gradle

Gradle에서 build.Gradle(Module)에서도 dependencies를 볼 것이다.

기본적으로 설정은 이런 식으로 되어있다.

dependencies {

    implementation 'androidx.appcompat:appcompat:1.4.0'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'com.android.support:design:27.1.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

하지만 최근(22.01.01) 기준으로 디자인 자원 라이브러리에 변경이 있어 이 부분만 보면

implementation 'com.android.support:design:28.0.0'

인 것에 반해 design이 material로 흡수되었기에

디자인 자원 라이브러리를 아래와 같이 입력해야 에러가 발생하지 않는다.

implementation 'com.google.android.material:material:1.0.0-rc01'

이것 또한 22년 01월 01일 기준으로 작성한 것이기에 후에 달라질 수도 있다.

 

각설하고 디자인 자원 라이브러리에 대해 좀 더 살펴보면,

안드로이드에서 제공하는 머터리얼 디자인이라고 볼 수 있다.

쉽게 말해, 좀 세련된 디자인을 적용하는 기능을 제공하는 라이브러리라고 생각하면 쉽다.

 

추가적으로, Gradle안의 내용을 바꾸면 상단의 Sync Now 버튼을 사용하여 변경사항을 바로 반영할 수 있다.

 

 

2. Icon Finder

안드로이드 디자인을 하면서 아이콘을 많이 사용할텐데 무료로 아이콘을 받을 수 있는 사이트이다.

아이콘도 이미지 규격들이 다르지만, 보통 128 X 128, 64 X 64, 48 X 48을 사용한다.

사이트 주소는 아래와 같다.

https://www.iconfinder.com/

6,025,000+ free and premium vector icons, illustrations and 3D illustrations

 

 

3. Material Design Icon

화려한 아이콘 외에도 UI전용 단순, 깔끔한 아이콘이 필요할 때도 있다.

그런 경우, Material Design Icon에서 찾아 사용하면 된다.

주소는 아래와 같다.

https://materialdesignicons.com/

Material Design Icons

 

 

4. 이미지를 앱으로 가져오기

이미지를 다운받았으면 이름을 변경한 후 안드로이드 스튜디오로 가져와야 한다.

물론, 소스코드로도 적용할 수 있지만 파일 자체로 가지고 오는 것이 편하기 때문에 그렇게 하겠다.

 

보통 이름은 영문 소문자, 언더바( _ )만 사용한다. (에러가 적게 나기 때문이다.)

좌측 상단의 Andriod를 Project로 바꾼다.

경로를 봐야하는데 경로 보는 법은 좌측 상단의 Andriod를 클릭하여 Project로 바꾸는 것이다.

이미지 또는 아이콘들은 App > src > main > res > drawable에 넣는다.

 

 

다음으로, 오늘 작성할 코드를 보며 세부적으로 하나씩 살펴보자.

 

 

---

먼저, 오늘 최종 작성된 코드를 보겠다.

<?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:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="24sp"
        android:layout_marginBottom="16dp"
        android:text="LOGIN"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@null"
        android:src="@drawable/icon_present"
        android:gravity="center"
        android:layout_marginBottom="16dp"
        />

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



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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:gravity="center"
        android:background="@drawable/btn_blue"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:clickable="true"
        android:layout_marginBottom="16dp"
        >
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@null"
            android:src="@drawable/icon_profile"
            android:gravity="center"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="Login"
            android:textColor="#ffffff"
            android:stateListAnimator="@null"
            android:layout_gravity="center"
            android:gravity="center"

            />
    </LinearLayout>




    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginBottom="16dp"
        android:text="Or"/>

    <android.widget.Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="16dp"
        android:background="@drawable/btn_darkblue"
        android:text="Login with Youtube"
        android:textColor="#ffffff"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="10"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="5"
            android:textSize="24sp"
            android:text="Find Password"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="5"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="24sp"
            android:text="Sign Up"/>
    </LinearLayout>

</LinearLayout>

 

1. ImageView

ImageView에 사진을 넣는데, 경로는 andriod:src="경로"로 사용하면 된다.

이미지를 넣었지만 사이즈가 안 맞을 시 width와 height를 dp 단위로 조절하면 된다.

이 때, 이미지가 중앙 정렬이 안 된다면 width를 match_parent로 바꾸면 된다.

ImageView의 코드는 아래와 같다.

<ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@null"
        android:src="@drawable/icon_present"
        android:gravity="center"
        android:layout_marginBottom="16dp"
        />

 

2. EditText

EditText는 그냥 글을 적을 수 있는 밑줄이라고 생각하면 쉬운데 뭘 적는지 알려주고 싶으면 중간에

andriod:hint="Email"

작성해주면 된다.

전체적인 코드는 다음과 같다.

<EditText>
	android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Email"
    >
    </EditText>

 

2-1. TextInputLayout~TextInputEditText

EditText처럼 단순히 구현하는 것 외에 힌트를 먼저 주고 클릭하여 입력할 때 자동으로 힌트가 상단으로 축소 이동하도록

구현한 것이 TextInputLayout~TextInputEditText이다.

간단하게 코드만 살펴보겠다.

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

보면 알겠지만 TextInputLayout이 입력창을 나타내고

안에 종속되어 있는 TextInputEditText는 위에서 봤던 hint의 역할을 하고 있다.

 

3. Button

원래 기능 구현을 <Button>으로 해야 하지만, 최신 안드로이드 스튜디오에서는 <andriod.widget.Button>을 사용해야 한다.

물론, 기존 <Button>도 사용할 수 있지만, 배경색을 내가 원하는데로 넣는다는 등의 기능을 적용할 수 없다.

코드는 아래와 같다.

<andriod.widgent.Button
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="Login"
            android:textColor="#ffffff"
            android:background="@drawable/btn_blue"
            android:stateListAnimator="@null"
            android:layout_gravity="center"
            android:gravity="center"

            />

여기서 더 나아가서 버튼에 아이콘을 넣고 싶으면 물론, 이 위젯에서 해결할 수도 있지만,

간단히 조정하면

LinearLayout 안에 ImageView와 Button을 가로배치하여 넣지만 Button을 넣으면 모양이 안 예쁘므로

Button 대신하여 TextView를 사용한다.

단, 클릭을 인식하기 위해서는

adroid:clickable="True"

를 넣어야 하지만 LinearLayout을 클릭되게 해야 버튼 눌리는 효과를 느끼기에 LinearLayout에 넣어준다.

그리고, ImageView와 TextView가 겹쳐서 제대로 출력이 안된다면,

weight를 줄 수도 있지만, 강제로 한 것이기에 모양이 안 예쁘므로,

ImageView의 width와 height에 정확한 dp값을 준다.

이 모든 것을 반영한 것을 아래의 코드로 살펴보자.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:gravity="center"
        android:background="@drawable/btn_blue"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:clickable="true"
        android:layout_marginBottom="16dp"
        >
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@null"
            android:src="@drawable/icon_profile"
            android:gravity="center"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="Login"
            android:textColor="#ffffff"
            android:stateListAnimator="@null"
            android:layout_gravity="center"
            android:gravity="center"

            />
    </LinearLayout>

 

4. 나만의 background만들기

res>drawable의 ic_launcherbackground.xml을 복붙하여 이름을 원하는데로 설정하고

background설정을 입력하면 된다.

먼저 작성한 코드를 보자.

<?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="#00b2ed">

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

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

    <item android:state_pressed="true"
        >
        <shape>
            <solid android:color="#ffff00">

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

            </corners>
        </shape>

    </item>




</selector>

이 부분은 거의 암기가 많기에 유의해야 한다.

1) <selector> : 기본적으로 그냥 입력하는 것으로 이해하면 된다.

2) <item> : 이 배경이 언제 일어날 지 상태를 설정하는 것이다. 위에서는 활성화와 클릭했을 때가 각각 있다.

3) <shape> : 배경을 어떤 형식으로 정할지 나타낸 것이다.

    ① <solid> : 배경색을 입력하는 곳이다.

    ② <corners> : 모서리 곡률을 얼마나 줄지 정하는 곳이다. 원처럼 반지름을 주는 것은 andriod:radius이다.

 

5. 위젯에 여유 공간 주기

여유 공간을 주고 싶은 위젯에 margin을 사용하거나 padding을 사용한다.

코드는 아래와 같다.

1) margin

android:layout_marginBottom="16dp"

2) padding

android:paddingLeft="16dp"

 

 

다음 글에서 이어서 설명하겠다.

 

▼ 이전글

2021.12.29 - [앱 개발/안드로이드] - 03_앱 레이아웃 따라하기 실전-1

03_앱 레이아웃 따라하기 실전-1

 

▼ 다음글

2022.01.03 - [앱 개발/안드로이드] - 05_앱 레이아웃 따라하기 실전-3

05_앱 레이아웃 따라하기 실전-3