4

I have a problem with correct display of ImageView. I want to display ImageView inside ConstraintLayout. On preview it looks exactly as i need, but when i'm starting it on device it looks completly dirrerent. This layout is places inside recycle view. What is wrong with this code?

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/promotionRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:background="#fff"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<android.support.constraint.ConstraintLayout
    android:id="@+id/promotionImageLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintHeight_default="spread"
    android:background="@color/colorPrimary">
    <ImageView
        android:id="@+id/promotionImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_start_promotion"
        android:background="@mipmap/ic_start_promotion"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHeight_min="150dp" />
    <ImageView
        android:id="@+id/fadeGradientImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@drawable/fade_image_background" />
    <TextView
        android:text="Sample title"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="6dp"
        android:textColor="#ffffff"
        android:id="@+id/promotionNameTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:paddingBottom="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<TextView
    android:id="@+id/promotionDescriptionTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp"
    android:layout_marginTop="12dp"
    android:layout_marginStart="12dp"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:layout_marginEnd="12dp"
    android:layout_marginBottom="12dp"
    android:text="Sampe description" />
</LinearLayout>

EDIT: Deep explanation:

I want to create row for RecycleView. Each row have to contains image, title and description. Title have to be in the left bottom corner of the image. Description have to be below the image. After that i have to put gradient (black in the bottom) into the image. Screen with "Preview" is exactly what i need.

EDIT2: Everything with this layout is ok. It is working as expected, i forget that i made some changes in kotlin code... Sory for problem.

2
  • 1
    why used linear layout inside ConstraintLayout because ConstraintLayout is provide linear and relative layout both features.
    – user4571931
    Aug 9, 2018 at 13:22
  • I think you have to use framelayout for this kind of scenario Aug 9, 2018 at 16:04

2 Answers 2

5

First things first, every view should apply the attribute rules of its parent ViewGroup. ConstraintLayout doesn't support match_parent. It supports the 0dp value which means "match constraint". This way the view will expand to fill the constraint bounded space.

Next, ConstraintLayout was created to achieve a flat view hierarchy for better layout performance. So, never nest it inside a LinearLayout as it has the chains feature to get the same behavior in a more flexible way. Plus, you can achieve the structure with a ConstraintLayout at the top level .

Another thing, If you are going to define the same margin in all directions, you can just use layout_margin.

Finally, you have overdraw problems. ConstraintLayout is flexible enough to allow us to position views as backgrounds and help us avoid overlapped backgrounds.

Here's a solution:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/promotionRow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@+id/promotion_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/promotion_image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_start_promotion"
        app:layout_constraintHeight_min="150dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/shadow"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:adjustViewBounds="true"
        android:background="@drawable/fade_image_background"
        app:layout_constraintBottom_toBottomOf="@+id/promotion_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/promotion_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Sample title"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/promotion_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/description"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:padding="12dp"
        android:text="Sampe description"
        android:textSize="13sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/promotion_image" />

</android.support.constraint.ConstraintLayout>

Try it. Hope this helps!

1
  • This answer really helped me. Thanks! Nov 18, 2021 at 23:43
0

First of all, trying to write more presicely what do you want? Display image view inside layout it's somthing common words. As for your code, beside you don't have any constraints. You have strange view height, for second ImageView:

android:layout_height="match_parent"

It may overlay all other children view, it's very strange parameter.

3
  • I places this parameter because i want to display first ImageView (this image should determine layout height) and then put on it another ImageView with gradient mask. Aug 9, 2018 at 13:23
  • Ok, then as I say describe more precicely what do you want? And what a problem? I can't understand it from your post, sorry Aug 9, 2018 at 13:55
  • Edited first post, is it enough or i should write more? Aug 9, 2018 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.