테마 칼라의 변경 화면에서 자주 보이는 「색이 붙은 둥근 View」의 만드는 방법입니다.

※레이아웃 이미지(텍스트와 구분선은 덤입니다)

레이아웃(xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content">

    <View
        android:id="@+id/color_icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/color_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:text="レッド"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@+id/color_icon"
        app:layout_constraintStart_toEndOf="@+id/color_icon"
        app:layout_constraintTop_toTopOf="@+id/color_icon"
        tools:text="レッド" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:background="#cfd8dc"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/color_name" />

</androidx.constraintlayout.widget.ConstraintLayout>

모양 드로우 와블 만들기

res/drawable 디렉토리에 쉐이프 드로어블(색상이나 그라데이션 등을 포함하는 도형을 정의하는 XML 파일)을 작성합니다.

파일 이름은 shape_red_icon.xml입니다.

res/drawable/shape_red_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp" />
    <solid android:color="#f44336" />
</shape>

<shape> 태그

<shape> 태그는 루트 요소여야 합니다.

<corners> 태그

도형의 모서리를 둥글게 합니다.
<corners> 태그는 사각형에만 사용할 수 있지만 위의 구현에서는 셰이프를 지정하지 않습니다.

왜냐하면, <shape> 태그로 도형을 지정하지 않는 경우는, 디폴트로 사각형의 android:shape="rectangle" 가 적용되기 때문입니다.

android:radius

모든 모서리의 반경을 지정합니다.

개별적으로 반경을 지정하려면 android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius 및 android:bottomRightRadius를 사용합니다.

<solid> 태그

도형에 사용할 단색을 지정합니다.

위의 구현에서는 android:color="#f44336"에서 빨간색을 설정합니다.

요약

이것으로 색이 붙은 둥근 View를 만들 수 있다고 생각합니다.

다음 번에는 이번 구현을 포함하여 "테마 색상을 변경하는 앱"을 만들고 싶습니다.