Dynamic circleRadius in ConstraintLayout

Question

In my application I have following layout which uses the new circular positioning property of its inner ConstraintLayout. I think it is pretty good because it does

Answer 1

I suggest that you abandon circular positioning for this particular layout but stick with ConstraintLayout. Here is a way to make it work for you by constraining the views that are positioned in a circle around the center icon to the edges of the icon's ImageView and using bias. As the device scales, so will the layout and the icons will keep their relative placement.

Here is how the two layouts look on two different devices:

I have simplified the layout for this demo by removing the RelativeLayout and ViewPager. The concept will still work with these reintroduced.

XML Layout

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/dividor"
    android:layout_alignParentEnd="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:background="#d7d1d1"
    android:paddingEnd="@dimen/spacing_normal"
    android:paddingStart="@dimen/spacing_normal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:cropToPadding="true"
        android:paddingBottom="72dp"
        android:paddingLeft="72dp"
        android:paddingRight="72dp"
        android:paddingTop="60dp"
        android:tint="@color/colorPrimaryDark"
        android:visibility="visible"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.12"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="ContentDescription"
        tools:src="@drawable/ic_launcher_foreground" />

    <ImageView
        android:id="@+id/icon_left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:adjustViewBounds="true"
        android:padding="@dimen/spacing_normal"
        app:layout_constraintBottom_toTopOf="@+id/icon_bottom_left"
        app:layout_constraintEnd_toEndOf="@+id/icon"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/icon"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.20"
        tools:src="@drawable/ic_launcher_foreground"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/icon_bottom_left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:adjustViewBounds="true"
        android:padding="@dimen/spacing_normal"
        app:layout_constraintBottom_toBottomOf="@id/icon"
        app:layout_constraintEnd_toEndOf="@id/icon"
        app:layout_constraintHorizontal_bias="0.28"
        app:layout_constraintStart_toStartOf="@id/icon"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.20"
        tools:src="@drawable/ic_launcher_foreground"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/icon_bottom_right"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:adjustViewBounds="true"
        android:padding="@dimen/spacing_normal"
        app:layout_constraintBottom_toBottomOf="@+id/icon_bottom_left"
        app:layout_constraintEnd_toEndOf="@+id/icon"
        app:layout_constraintHorizontal_bias="0.73"
        app:layout_constraintStart_toStartOf="@id/icon"
        app:layout_constraintWidth_percent="0.20"
        tools:src="@drawable/ic_launcher_foreground"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/icon_right"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:adjustViewBounds="true"
        android:padding="@dimen/spacing_normal"
        app:layout_constraintBottom_toBottomOf="@+id/icon_left"
        app:layout_constraintEnd_toEndOf="@+id/icon"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/icon"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.20"
        tools:src="@drawable/ic_launcher_foreground"
        tools:ignore="ContentDescription" />

</android.support.constraint.ConstraintLayout>