BMI 계산기 - 레이아웃

layout 그리기

res -> layout -> activity_main.xml 파일 수정

androidx.constraintlayout.widget.ConstraintLayout을 LinearLayout으로 수정

LinearLayout: 층층이 나오도록 설정하는것

android:orientation="vertical": 세로로 쌓이도록 설정

match_parent는 부모에 딱 맞춘다. wrap_content는 들어있는 내용크기에 맞춘다.

 

수정 전

수정 후

inputType을 number로 설정하여 숫자만 입력하도록 설정

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

<!-- match_parent는 부모에 딱 맞춘다. wrap_content는 들어있는 내용크기에 맞춘다.-->
    <TextView
        android:text="신장"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="체중" />

    <EditText
        android:id="@+id/editTextNumber"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="확인하기"/>

</LinearLayout>

 

padding 과 margin으로 여백주기

margin은 요소에 직접 선언하고

padding은 layout 속성에 선언한다.

<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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

  <EditText
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"/>

 

색상 설정 (res -> values -> colors.xml에서 저장하여 사용 가능하다)

적용

<TextView
        android:textColor="@color/custom_black"
        android:textStyle="bold"
        android:textSize="20sp"
        android:text="신장"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

 

text 값 설정(res -> values -> strings.xml)

적용

<TextView
        android:textColor="@color/custom_black"
        android:textStyle="bold"
        android:textSize="20sp"
        android:layout_marginTop="30dp"
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/weight" />