次のように、4 つの円形の進捗バーを水平に配置する必要があります。
そこで、新しいマテリアルコンポーネントの円形進捗インジケーター(https://material.io/components/progress-indicators/android)。これらの 4 つのプログレス バーを制約レイアウトでスプレッド チェーンしましたが、スケールされません。まだデフォルトの 24dp サイズになっているようです。たとえば、幅と高さを 200dp にハードコードしようとしても、出力は小さいプログレス バーのままです。
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/progressBarCalories"
style="@style/ProgressBarCircular"
android:layout_marginTop="32dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="6dp"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/progressBarProtein"
tools:progress="75"/>
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/progressBarProtein"
style="@style/ProgressBarCircular"
android:layout_marginTop="32dp"
android:layout_marginStart="6dp"
android:layout_marginEnd="6dp"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
app:layout_constraintStart_toEndOf="@id/progressBarCalories"
app:layout_constraintEnd_toStartOf="@id/progressBarCarbs"
tools:progress="75"/>
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/progressBarCarbs"
style="@style/ProgressBarCircular"
android:layout_marginTop="32dp"
android:layout_marginStart="6dp"
android:layout_marginEnd="6dp"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
app:layout_constraintStart_toEndOf="@id/progressBarProtein"
app:layout_constraintEnd_toStartOf="@id/progressBarFat"
tools:progress="75"/>
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/progressBarFat"
style="@style/ProgressBarCircular"
android:layout_marginTop="32dp"
android:layout_marginStart="6dp"
android:layout_marginEnd="16dp"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
app:layout_constraintStart_toEndOf="@id/progressBarCarbs"
app:layout_constraintEnd_toEndOf="parent"
tools:progress="75"/>
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/progressBar"
style="@style/ProgressBarCircular"
android:layout_marginTop="32dp"
app:layout_constraintWidth_min="200dp"
android:minWidth="200dp"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/progressBarFat"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:progress="75"/>