Layout: center image inside center panel. Using percent units

Question

I am trying to get a desing similar to the following in one of my Activities layout:

That is:

• A white panel with 60% width of its parent. Center horizontally.
• Inside that white panel, a image with 60% width of the panel, center horizontally too.

I have been playing with Guidelines putting them at 0.2, 0.4, 0.6 and 0.8 horizonatlly without success. How can I get it?

Answer 1

You have to use a ConstraintLayout as the root layout, then set the width of your child to 0dp and width percent to .6 (this for the first container, 60%):

        <FrameLayout
            android:id="@+id/some_id"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent
            app:layout_constraintWidth_percent=".6" >

For the ImageView, it is 60% of a viewgroup that itself is 60%, so it needs to be 36% of the parent:

        <ImageView
            android:id="@+id/some_other_id"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent
            app:layout_constraintWidth_percent=".36" />

Another option is to make the ImageView parent a ConstraintLayout and then set the width of the ImageView to 60%, but that way your layout won't be flat.