Viewを円形状に配置する

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を円形状に配置する

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>

これで完成です。