[안드로이드] 사각형(Rectangle), 원형(Oval), 선(Line) 모양 쉽게 만드는 방법 - Drawable.xml

이번 시간에는 사각형, 원형, 선 모양을 파일에

설정해놓고 갖다 쓰는 방법에 대하여 알아보겠습니다.

---

목차

1. 실행 화면

2. 사각형 파일 만들기

3. 원형 파일 만들기

4. 선 파일 만들기

5. 메인 화면 구성 activity_main.xml

6. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

2. 사각형 파일 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: rectangle_style

- 속성 -

[1] corners: 모서리 설정

- radius: 모서리 얼마나 둥글게 할 것인지?

[2] solid: 내부 바탕 색상 설정

[3] size: 가로, 세로 길이 설정

[4] stroke: 외곽선 설정

 - width: 외곽선 두께

 - color: 외곽선 색상

 - dashGap: 점선 간의 간격

 - dashWidth: 점선 길이

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

    <corners android:radius="10dp" />

    <solid android:color="@color/blue_200" />

    <size
        android:width="100dp"
        android:height="100dp" />

    <stroke
        android:width="3dp"
        android:color="@color/pink_500"
        android:dashWidth="10dp"
        android:dashGap="5dp" />
</shape>

 

3. 원형 파일 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: oval_style

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    
    <corners android:radius="10dp" />

    <solid android:color="@color/blue_200" />

    <size
        android:width="100dp"
        android:height="100dp" />

    <stroke
        android:width="2dp"
        android:color="@color/pink_500"
        android:dashWidth="10dp"
        android:dashGap="5dp" />
</shape>

 

 

4. 선 파일 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: line_style

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

    <size
        android:width="100dp"
        android:height="100dp" />

    <stroke
        android:width="2dp"
        android:color="@color/pink_500"
        android:dashWidth="10dp"
        android:dashGap="7dp" />
</shape>

 - 색상 - 

res -> values -> colors.xml

<color name="blue_200">#90CAF9</color>
<color name="pink_500">#E91E63</color>

 

5. 메인 화면 구성 activity_main.xml

 - 설명 - 

1. 3개의 텍스트뷰

2. 각 텍스트뷰는 사각형, 원형, 선으로 되어있으며,

 drawable폴더에 만들어 놓은 xml파일을

 background속성에 적용했습니다.

3. 2개의 버튼

4. 사각형 버튼은 클릭 시 사각형으로 변경

 원형 버튼은 클릭 시 원형으로 변경됩니다.

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/rectangle_style"
            android:gravity="center"
            android:text="사각형"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/oval_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="@drawable/oval_style"
            android:gravity="center"
            android:text="원형"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/line_style"
            android:gravity="center" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:gravity="center"
        android:orientation="horizontal">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/rect_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="사각형" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/oval_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="원형" />
    </LinearLayout>

</LinearLayout>

 

6. 메인 코드 구현 MainActivity.java

 - 속성 -

 setBackground: 바탕색상을 변경

 getDrawable: drawable폴더에 있는 파일 적용할 수 있음

public class MainActivity extends AppCompatActivity {

    Button rectBtn, ovalBtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rectBtn = findViewById(R.id.rect_btn);
        ovalBtn = findViewById(R.id.oval_btn);

        //사각형스타일 적용
        rectBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                rectBtn.setBackground(getDrawable(R.drawable.rectangle_style));
            }
        });

        //원형스타일 적용
        ovalBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ovalBtn.setBackground(getDrawable(R.drawable.oval_style));
            }
        });
    }
}

2022.02.17 - [안드로이드] - [안드로이드] 뷰(View) 거리두는 방법 Margin 사용법

[안드로이드] 뷰(View) 거리두는 방법 Margin 사용법

2022.02.15 - [안드로이드] - [안드로이드] 색상(Color) 공통 관리하는 방법

[안드로이드] 색상(Color) 공통 관리하는 방법

2022.02.15 - [안드로이드] - [안드로이드] 크기(Size) 간격(Margin,Padding) 공통관리 하는방법

[안드로이드] 크기(Size) 간격(Margin,Padding) 공통관리 하는방법