ConstraintLayout make View Height x % of Sibling

Question

I was wondering if it's possible with Constraintlayout to achieve the following:

I have an Image with a fixed Ratio (2:1) and want it to overlay with a gradient, which should start from the bottom of the Image and top align it to 50% of the Image height. As far as I could see it is not possible. Using a Guideline does not work, as it can only be placed with Percentage to the Parent/Layout Using weight is only possible in Chains, but as I need to overlay both views chains cannot be used, right?

Answer 1

you can achieved this like below:

<?xml version="1.0" encoding="utf-8"?>
<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"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="2:1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/darker_gray" />

    <View
        android:id="@+id/View_Top"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="4:1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/transparent" />

    <View
        android:id="@+id/View_Bottom"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="4:1"
        app:layout_constraintTop_toBottomOf="@id/View_Top"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_orange_dark" />



    </android.support.constraint.ConstraintLayout>

here imageView is set in 2:1 ratio and 2 extra view set in above Imageview where View_Top is transparent and View_Bottom is bottom half of imageview so you can set your gradient in View_Bottom.

In below image background color is gray and your color can replace in View_Bottom color

hope it will help you..!

Answer 2

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <android.support.v7.widget.CardView
        android:id="@+id/sibling"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        >
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/view_to_move"
        app:layout_constraintBottom_toBottomOf="@id/sibling"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/sibling"
        /></android.support.constraint.ConstraintLayout>

Rest of properties necessary for layout... Important both properties app:layout_constraintBottom_toBottomOf="@id/sibling" and app:layout_constraintTop_toTopOf="@id/sibling" Both must be inside of constraint.

Answer 3

As far as I understand you want to have a gradient layer over your image. You can do that by setting a foreground drawable to your image:

android:foreground="@drawable/gradient-layer"

and then have your gradient-layer.xml something like

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
        android:angle="90"
        android:endColor="@color/transparent"
        android:startColor="@color/color1"
        android:type="linear" />
    <corners android:radius="0dp"/>
</shape>

Additionally you can add a middle color to the gradient if you need it to be more specific

android:centerColor="@color/color2"