CODEWITHSUNDEEP
androiduser-interfacelayoutdesign-guidelines
Alfonso_MA
Alfonso_MA

Reputation: 555

Layout: center image inside center panel. Using percent units

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

enter image description here

That is:

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?

Upvotes: 0

Views: 35

Answers (1)

Francesc
Francesc

Reputation: 29330

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.

Upvotes: 0

Related Questions