[안드로이드 스튜디오 프로젝트] 간단한 계산기 만들기 (xml)

안드로이드 스튜디오를 사용하여 어느정도 레이아웃을 디자인하게 되면

학교 중간고사나 과제로 간단한 계산기를 구현하여 만드는 일이 생길지도 모른다.

 

실제로 우리 학교 모바일 프로그래밍 강좌에서는 중간고사로 계산기를 만들어 제출해야했다.

그때는 미숙하고 시간에 쫓겨 제대로 못 만들었던 계산기를 이번 기회에 제대로 만들어보려한다!

 

계산기

 

 

학교에서 만들어 제출하라고 한 계산기의 디자인이다.

간단하게 사칙연산만 하면 되는 계산기를 만들어내는것이었는데, 그것도 그땐 제대로 구현 못한듯..

 

---

 

 

LinearLayout 구성

 

위 계산기 사진을 보고 생각해본 LinearLayout 구성이다!

사실 LinearLayout3_6은 결과값 부분이라 따로 빼도 됐는데 코드 짜다보니 그냥 들어가서...

귀찮음이 이겨버렸다 ㅎㅎ. 그래도 큰 지장 없어서 그대로 진행!

 

 

• xml의 기본 LinearLayout
  • LinearLayout 2_1
    
    • EditText 1
    • EditText 2
  • LinearLayout 2_2
    • LinearLayout 3_1 : 버튼 1, 2, 3, +
    • LinearLayout 3_2 : 버튼 4, 5, 6, -
    • LinearLayout 3_3 : 버튼 7, 8, 9, *
    • LinearLayout 3_4 : 버튼 . , 0, %, /
    • LinearLayout 3_5 : 초기화 버튼
    • LinearLayout 3_6 : EditText 결과값

위 구조로 EditText와 버튼들을 배치시키기로 했다!

 

 

---

 

[ activity_main.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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <EditText
            android:id="@+id/et_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:layout_marginTop="15dp"
            android:background="#FFF0DD"
            android:padding="12dp"
            android:hint="값을 입력하세요"
            android:textSize="23sp"
            />

        <EditText
            android:id="@+id/et_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="25dp"
            android:background="#FFF0DD"
            android:padding="12dp"
            android:hint="값을 입력하세요"
            android:textSize="23sp"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="16dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginBottom="8dp"
            android:orientation="horizontal"
            >

            <Button
                android:id="@+id/btn_1"
                android:text="1"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_2"
                android:text="2"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_3"
                android:text="3"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="15dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_plus"
                android:text="+"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#C5831F"
                android:layout_weight="1"/>

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginBottom="8dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_4"
                android:text="4"
                android:layout_width="0dp"
                android:textSize="28sp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_weight="1"
                android:layout_marginEnd="8dp"
                 />

            <Button
                android:id="@+id/btn_5"
                android:text="5"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_6"
                android:text="6"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="15dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_minus"
                android:text="-"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#C5831F"
                android:layout_weight="1"/>

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginBottom="8dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_7"
                android:layout_width="0dp"
                android:textSize="28sp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_weight="1"
                android:layout_marginEnd="8dp"
                android:text="7" />

            <Button
                android:id="@+id/btn_8"
                android:text="8"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_9"
                android:text="9"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="15dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_multiply"
                android:text="*"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#C5831F"
                android:layout_weight="1"/>

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginBottom="8dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_dot"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#C5831F"
                android:layout_weight="1"
                android:layout_marginEnd="8dp"
                android:text="." />

            <Button
                android:id="@+id/btn_0"
                android:text="0"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#F4C174"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_percent"
                android:text="%"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#C5831F"
                android:layout_marginEnd="15dp"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn_slash"
                android:text="/"
                android:textSize="28sp"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:backgroundTint="#C5831F"
                android:layout_weight="1"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginBottom="8dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_reset"
                android:text="초기화"
                android:backgroundTint="#76542F"
                android:textSize="28sp"
                android:layout_width="match_parent"
                android:layout_height="80dp"/>


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/et_result"
                android:textSize="23sp"
                android:text="  결과값 : "
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#F4DECD"/>


        </LinearLayout>



    </LinearLayout>




</LinearLayout>

 

 

LinearLayout 3의 경우에는 우선 layout_height를 모두 0dp로 주었다.

그리고 layout_weight를 1로 주어서 각자 균등한 세로 크기를 가지도록 했다.

 

그리고 LinearLayout 3 내부의 Button들의 layout_width를 모두 0dp로 주고

layout_weight를 1로 주어서 각자 균등한 가로 크기를 가지도록 했다.

 

너무 화면 모서리에 붙지도 않게 marginEnd, marginBottom 등 자유롭게 추가해주기!

나의 경우 EditText 뒤에 색을 주니 갑자기 세로 크기가 확 작아져버려서 여기에도 padding을 추가해줬다.

 

android:orientation 속성도 vertical, horizontal 속성은 때에 맞춰서 변경해주기~

 

---

 

 

 

 

그러면 완성된 실행 화면은 다음과 같다!

버튼 색깔도 원하는대로 바꾸면 될 것 같다 ㅎㅎ

이제 MainActivity.java 파일을 건드려서 제 기능을 수행하도록 해봐야지...

 

 

 

 

+

 

 

 

버튼의 색깔을 바꾸고 버튼의 textSize를 수정해서 노란 계열의 계산기를 디자인했다!

우선 버튼의 색깔을 바꾸는데, 내가 처음 background를 써서 바꾸니까 색도 안바뀌고 버튼 모양만 사각형으로 변했다.

그래서 기본 모양은 그대로 두되 색만 바꾸는 다른 방법을 찾아보니까

 

android:backgroundTint="#F4C174"

 

 

이렇게 background가 아니라 backgroundTint 속성을 사용해주면

버튼의 기본 모양을 가진 속성은 바뀌지 않고, 버튼의 배경색만 바뀌는것을 확인할 수 있었다!

 

참고로 textSize 바꾸는 코드는 아주 간단!

android:textSize="28sp"

 

 

이렇게 버튼마다의 색을 바꿔주고 textSize까지 손봐준 결과

 

 

 

키패드 크기도 더 커지고 더 가독성 좋은 계산기 디자인 완성! >,<