Constrain to 50% from top of ImageView

user_10496607 0
Viewed 567

I have a layout like so:

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="@+id/textView5"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintTop_toTopOf="parent"
            tools:srcCompat="@tools:sample/backgrounds/scenic[1]" />

        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="@+id/imageView4"
            app:layout_constraintEnd_toEndOf="@+id/imageView4"
            app:layout_constraintStart_toStartOf="@+id/imageView4"
            app:layout_constraintTop_toTopOf="@+id/imageView4" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Hello"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </android.support.constraint.ConstraintLayout>

Basically, the View is overlaying on top of the ImageView. However, I need the top of the View to start at the middle point of the ImageView, i.e. 50% from the top of the ImageView. How do I do this?

android-constraintlayout android
2 Answers

Percentage constraints in ConstraintLayout only work in relationship to the parent of a view. See the documentation. There is, however, the concept of "weighted chains" for widgets that have match_constraints. See here.

Weighted chains

The default behavior of a chain is to spread the elements equally in the available space. If one or more elements are using MATCH_CONSTRAINT, they will use the available empty space (equally divided among themselves). The attribute layout_constraintHorizontal_weight and layout_constraintVertical_weight will control how the space will be distributed among the elements using MATCH_CONSTRAINT. For exemple, on a chain containing two elements using MATCH_CONSTRAINT, with the first element using a weight of 2 and the second a weight of 1, the space occupied by the first element will be twice that of the second element.

So, your XML should look something like below for this result. (I have colored the background of the View so it can be seen.

enter image description here

<android.support.constraint.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">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/backgrounds/scenic[1]" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toTopOf="@id/view"
        app:layout_constraintEnd_toEndOf="@id/imageView4"
        app:layout_constraintStart_toStartOf="@id/imageView4"
        app:layout_constraintTop_toTopOf="@id/imageView4"
        app:layout_constraintVertical_weight="1" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintBottom_toBottomOf="@+id/imageView4"
        app:layout_constraintEnd_toEndOf="@+id/imageView4"
        app:layout_constraintStart_toStartOf="@+id/imageView4"
        app:layout_constraintTop_toBottomOf="@+id/space"
        app:layout_constraintVertical_weight="1" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>
user_62879100

Since the ImageView is a square, you can use the dimension ratio attribute here too. Remove the top constraint of the View to make it align to the bottom and set the width:height ratio to H,2:1 to constrain height based on width.

<View
    android:id="@+id/view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,2:1"
    app:layout_constraintBottom_toBottomOf="@id/imageView4"
    app:layout_constraintEnd_toEndOf="@id/imageView4"
    app:layout_constraintStart_toStartOf="@id/imageView4" />
user_44995760
Related