kotlin: 레이아웃 실전

이번엔 직접 디자인을 보고 레이아웃을 만들어보자

디자인은 freefigma에서 구했고 figma.com에서 디자인의 세부정보를 추출해서 사용하면 될 것 같다.

 

 

freefigma에서 구한 샘플이다 figma.com에서 이녀석의 정보를 추출하고 똑같이한번 만들어보자

우선 배경부터! 사자배경은 

배경클릭 -> 우측 하단에 Export 클릭 -> 'Export 배경이름' 누르고 다운받기

이러면 원하는 디장인의 배경을 png파일로 얻을 수 있다.

 

음 일단 우리가 만들 화면은 배경위에 텍스트와 버튼이 위에서 아래로 일렬로 이루어져 있기 때문에 리니어 레이아웃을 한번 사용해보자.

 

다운받은 배경화면을 drawable에 넣어주자

음 배경png 이름을 bg로 바꿔주고 layout에 적용해 보았다

음 적용이 잘 됐다. 이제 레이아웃을 리니어로 바꿔주고 실행해보자

 

잘 되긴 하는데 이거 저 위에 상태바가 너무 거슬린다

상태바를 투명하게 만들려면? 응 구글링~

음 태마에다가 저 코드를 써보라는군요... 고마워요 스오플! (태마는 res -> values -> themes에 xml파일로 있다.)

 

적용이 잘 됐구만!!

 

사자머리쪽에 택스트도 써보자

굿! 이제 밑에 버튼 2개도 같이 넣어주자 

 

버튼이 직각이 아니라 모서리가 둥글둥글하다.. 모서리는 어떻게 깍지?

android xml corner radius 검색 후 스오플의 힘을 빌려서...

으음  저기 보이는 코드로 버튼 모양을 둥글게 깎을 수 있다.

 

버튼 모양 틀을 만들자 테두리 굵기, 모서리 깎임정도를 설정할 수 있다. 음 그리고 버튼 색을 넣어야 되는데..

음? 첫번째 버튼 자세히 보니 그냥 녹색이 아니라 약간 그라데이션이 들어갔다... 그러면 이 버튼은 솔리드가 아니라 gradient로 표현해야겠다.

좌 우측 색을 확인하고! 그라데이션이 대각선으로 이루어졌으니 각도는 45!

좋다 이제 이 백그라운드를 버튼에 적용하자 

버튼과 처음에 만든 텍스트 사이에 빈 뷰를 집어넣고 가중치를 설정하여 공간을 띄어준다.

 

자 했던거 반복이다 버튼 두개 만들고 패딩이랑 띄기 살짝 해주고! 텍스트 다시 쓰고 로그인 버튼도 xml파일 추가해서 만들어주면!

똑같이 만들기 성공! 작동도 잘된다 ㅎㅎ

소스코드는 여기

 

레이아웃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=".MainActivity"
    android:orientation="vertical"
    android:background="@drawable/bg"
    android:weightSum="1"
    android:paddingHorizontal="20dp"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dp"
        android:text="Get the lift you want! \n Save more money."
        android:textColor="@color/white"
        android:textSize="20dp"
        android:textStyle="bold"
        android:textAlignment="center"
        />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="0.85"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="Create free account"
        android:textAllCaps="false"
        android:textColor="#fff"
        android:textSize="20dp"
        android:textStyle="bold"
        android:background="@drawable/rounded_corner"
        />

    <Button
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="Continue with facebook"
        android:textAllCaps="false"
        android:textColor="#fff"
        android:textSize="20dp"
        android:textStyle="bold"
        android:background="@drawable/rounded_corner_bule"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Alreay have an account?"
        android:textColor="#fff"
        android:textSize="20dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="Login"
        android:textAllCaps="false"
        android:textColor="#fff"
        android:textSize="20dp"
        android:textStyle="bold"
        android:background="@drawable/rounded_corner_while_transparent"
        />
</LinearLayout>

 

그라데이션 버튼 xml:

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

    <gradient
        android:angle="45"
        android:endColor="#2DC897"
        android:startColor="#7EF192"
        android:type="linear"
        />

<!--    <solid android:color="#ffffffff"/>-->

<!--    <stroke android:width="0dp"-->
<!--        android:color="#ff000000" />-->

<!--    <padding android:left="1dp"-->
<!--        android:top="1dp"-->
<!--        android:right="1dp"-->
<!--        android:bottom="1dp" />-->

    <corners android:radius="30dp" />
</shape>

나머지는 생략! ㅋㅋㅋㅋ

다음엔 클릭이벤트 해봅시다