저번 레이아웃에 덧붙여 화면이 좀 더 이쁘게 구성되도록 해봤습니다.
먼저 이모티콘을 구하기 위해 다음 사이트들을 이용했습니다.
혹시 필요할 분을 위해 파일도 올려봅니다.
이미지 소스들은 빨간박스부분을 Project로 바꿔서 drawable의 경로를 찾아가 넣어줍시다.
Shift 두번 탭으로 폴더를 찾을 수도 있습니다.
다음으로 저번에 EditText로 사용했던 것 대신에 커서를 올리면 다음과 같이 Email 텍스트가 입력창 위로 올라가게 하기위한 것의 셋팅을 해줘야 합니다
app에 들어가 dependencies에 implemenetation 'com.android.support:design:26.1.0'을 넣어줍니다.
이 때 중요한건 빨간박스 부분이 같아야 한다는 점입니다.
저는 버전이 26.1.0이지만 다른 버전이라면 그 버전에 맞게 입력해줍시다.
이렇게 입력하고 위쪽에 노랗게 뜨면서 sync가 나올텐데 눌러줍니다.
android support design의 기능을 이용 하는 것인가 봅니다.
필요한 준비는 끝났고 저번에 배치한 것을 토대로 위에서 부터 꾸며줍시다.
present이미지는 기존 안드로이드 기본이미지를 썼던 것을 그냥 소스만 바꿔주면 되네요
다음은 조금 귀찮게(?) 셋팅한 것의 기능을 이용해볼 차례입니다.
|
1
2
3
4
5
6
7
8
9
|
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="Email" />
|
TextInputLayout안에 TextInputEditText를 넣는다는 점 말곤 어려운 점은 없어보입니다.
이렇게하면 좀 더 신경쓴 디자인이 되겠죠?
다음은 Login버튼을 바꿔봅시다
동글동글한 네모버튼을 만들고 싶은데, 이를 위해선 xml파일을 추가로 만들어줘야 합니다.
위에 나와있는 drawable폴더에 btn_blue.xml을 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<?xml version="1.0" encoding="utf-8"?>
<item android:state_pressed="true">
<shape >
<solid android:color="#005a91"></solid>
<corners android:radius="20dp"></corners>
</shape>
</item>
<item >
<shape >
<solid android:color="#00b2ed"></solid>
<corners android:radius="20dp"></corners>
</shape>
</item>
<item android:state_enabled="false">
<shape >
<solid android:color="#858585"></solid>
<corners android:radius="20dp"></corners>
</shape>
</item>
</selector>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
xml 소스코드입니다
말을 안했지만 버튼을 누르면 색이 바뀌고, 누를수 없으면 또 다른색이 나오도록 하려고합니다.
selector를 먼저 열어주는데 selector안의 xmlns:android="http://schemas.android.com/apk/res/android"는
ic_launcher_background.xml의 vector안에 있는 것을 가져왔습니다 이유는 잘 모르겠네요
selector을 열었으면 그안에 item을 너줍니다.
item태그안에 아무것도 없으면 기본상태를 나타내고, state_pressed는 눌렸을 때, state_enable은 버튼이 사용 가능할 때를 의미합니다. enable="false"니까 사용 불가능 할때를 의미하겠네요.
item안에 shape에서 모양을 설정해줍시다.
solid는 배경색을 의미하고 corners는 둥근정도를 의미합니다. corners에서는 radius값에따라 둥근 정도가 결정됩니다.
상태별로 배경색만 다르게 해주면 끝
이제 이 xml을 이용해서 예쁜 버튼을 만들어 봅시다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/btn_blue"
android:clickable="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="35dp"
android:src="@drawable/icon_login"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Login"
android:textColor="#ffffff"
android:textSize="20dp"
android:gravity="center"
/>
</RelativeLayout>
|
저번의 Button태그를 지우고 RelativeLayout태그를 넣었습니다.
그 이유는 버튼안 왼쪽에 아이콘을 또 넣을것이기 때문입니다.
우리가 열심히 작성한 xml파일은 RelativeLayout의 background로 설정해 주면 됩니다.
그리고 clickable="true"를 해주면 버튼과 같은 기능을 하죠
이렇게 다른 버튼도 만들어주고 margin으로 간격을 조절하면 완성입니다~~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<?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="20dp">
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="LOGIN" android:gravity="center" android:textColor="@android:color/holo_blue_dark" android:textSize="24sp" android:layout_marginBottom="20dp"/> <ImageView android:layout_width="80dp" android:layout_height="80dp" android:background="@null" android:src="@drawable/icon_present" android:layout_gravity="center"/>
<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="50dp" android:hint="Email" /> </android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="15dp"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="50dp" android:hint="Password"/> </android.support.design.widget.TextInputLayout>
<RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/btn_blue" android:clickable="true">
<ImageView android:layout_width="wrap_content" android:layout_height="35dp" android:src="@drawable/icon_login" android:layout_centerVertical="true"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Login" android:textColor="#ffffff" android:textSize="20dp" android:gravity="center" />
</RelativeLayout>
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="OR" android:gravity="center" android:layout_margin="5dp"/>
<RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/btn_darkblue" android:clickable="true">
<ImageView android:layout_width="wrap_content" android:layout_height="35dp" android:src="@drawable/icon_facebook" android:layout_centerVertical="true"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Login With Facebook" android:textColor="#ffffff" android:textSize="20dp" android:gravity="center" />
</RelativeLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="10" android:layout_marginTop="10dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Find Password" android:gravity="center" android:layout_weight="5" android:textSize="24sp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sign Up" android:gravity="center" android:layout_weight="5" android:textColor="@android:color/holo_blue_dark" android:textSize="24sp"/>
</LinearLayout>
</LinearLayout> |
전체 코드입니다.
추가로 온라인 포토샵 사이트 https://pixlr.com/editor/ 색구성하는데 도움 많이 됐습니다..
틀린 부분 지적해주시면 감사하겠습니다.
이 글은 유튜브 센치한 개발자님의 안드로이드 스튜디오 기초강의를 공부한 내용입니다.
'개발 > Android' 카테고리의 다른 글
| 안드로이드 스튜디오 addTextChangedListener를 이용한 로그인 로직 (0) | 2019.11.26 |
|---|---|
| 안드로이드 스튜디오 액티비티 이동, 값 넘기기, 클릭 이벤트 (0) | 2019.11.25 |
| 안드로이드 스튜디오 앱 레이아웃 따라하기1 (0) | 2019.11.23 |
| 안드로이드 스튜디오 레이아웃 LinearLayout과 RelativeLayout (0) | 2019.11.23 |
| 안드로이드 스튜디오 Hello World! (0) | 2019.11.22 |
댓글