View를 원형으로 배치하여 시계와 같은 레이아웃을 만들고 싶습니다.

▼완성형▼

1. 둥근 View 만들기

우선은 색이 붙은 둥근 View를 만듭니다.

둥근 View의 작성 방법에 대해서는, 이하의 기사가 참고가 된다고 생각합니다.

색이 있는 둥근 View 만들기

가운데에 있는 빨간색 View의 모양 드로와블만 기재합니다만, <solid android:color="" /> 를 변경하면, 다른 색에도 적용할 수 있습니다.

res/drawable/shape_red_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Viewの角を丸くする -->
    <corners android:radius="15dp" />
    <!-- Viewの色を指定する -->
    <solid android:color="#ef9a9a" />
</shape>

2. View를 원형으로 배치

뷰를 원형으로 배치할 때 루트를 ConstraintLayout로 설정하고 다음 속성을 지정합니다.

layout_constraintCircle

중심이 될 View의 ID를 지정합니다.

layout_constraintCircleAngle

layout_constraintCircle에서 지정한 View를 기점으로 원형으로 배치할 View의 "각도(0~360)"를 지정합니다.

시계에 비유하면 「0->12시, 30->1시, 60->2시」의 위치가 됩니다.

layout_constraintCircleRadius

layout_constraintCircle에 지정된 View의 반경을 지정합니다.



레이아웃은 다음과 같습니다.

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

    <View
        android:id="@+id/red_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_red_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/pink_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_pink_icon"
        app:layout_constraintBottom_toTopOf="@+id/red_circle_view"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/purple_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_purple_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="30"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/deep_purple_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_deep_purple_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/indigo_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_indigo_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/blue_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_blue_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/light_blue_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_light_blue_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="150"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/cyan_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_cyan_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="180"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/teal_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_teal_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="210"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/green_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_green_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="240"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/light_green_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_light_green_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/lime_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_lime_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="300"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/yellow_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_yellow_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="330"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

이것으로 완성입니다.