Skip to content Skip to sidebar Skip to footer
Home / Android / Android Constraintlayout / Android Imageview / Constraint Layout Chains / Margin

Problems With Constraintlayout - Imageview 16:9 Inappropriate Top Margin

Post a Comment
I want to build the following layout using ConstraintLayout: I use this source for layout: Copy

from your ImageView

Solution 2:

The first two answer will work. You can also add app:layout_constraintVertical_chainStyle="spread_inside" to the top ImageView if you want to maintain your vertical chain.

Here is an image after adding this statement (but not changing anything else.)

enter image description here

Here is the XML:

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.constraint.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:background="@color/colorAccent"><ImageViewandroid:id="@+id/imageView"android:layout_width="0dp"android:layout_height="0dp"android:scaleType="centerCrop"app:srcCompat="@android:color/darker_gray"app:layout_constraintDimensionRatio="h,16:9"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintVertical_chainStyle="spread_inside"app:layout_constraintBottom_toTopOf="@+id/textView1" /><TextViewandroid:id="@+id/textView1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="24dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:text="Title"android:textAppearance="@style/TextAppearance.AppCompat.Headline"app:layout_constraintTop_toBottomOf="@+id/imageView"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toTopOf="@+id/textView2" /><TextViewandroid:id="@+id/textView2"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:layout_marginBottom="24dp"android:text="Subtle"app:layout_constraintTop_toBottomOf="@+id/textView1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toBottomOf="parent" /></android.support.constraint.ConstraintLayout></FrameLayout>

Update: So the above doesn't work on API 23 with ConstraintLayout version 1.0.2. Try the following instead:

Remove android:layout_marginTop="16dp" from textView2 and add android:layout_marginBottom="16dp" to textView1. This makes a difference.

Solution 3:

The gist of it is to use a packed chain, with a vertical bias of 0, so that the content of the chain will be at the top. Also, I'm not sure why you are using a FrameLayout -- you probably don't need to.

enter image description here

With 1.1.0-beta2:

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/colorAccent"xmlns:app="http://schemas.android.com/apk/res-auto"><ImageViewandroid:id="@+id/imageView"android:layout_width="0dp"android:layout_height="0dp"android:scaleType="centerCrop"app:layout_constraintBottom_toTopOf="@+id/textView1"app:layout_constraintDimensionRatio="h,16:9"app:layout_constraintVertical_bias="0.0"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_chainStyle="packed"app:srcCompat="@android:color/darker_gray" /><TextViewandroid:id="@+id/textView1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="24dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:text="Title"android:textAppearance="@style/TextAppearance.AppCompat.Headline"app:layout_constraintTop_toBottomOf="@+id/imageView"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toTopOf="@+id/textView2" /><TextViewandroid:id="@+id/textView2"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:layout_marginBottom="24dp"android:text="Subtle"app:layout_constraintTop_toBottomOf="@+id/textView1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toBottomOf="parent" /></android.support.constraint.ConstraintLayout>

Solution 4:

Try this one -> I removed app:layout_constraintBottom_toTopOf="@+id/textView1" in the ImageView and it works fine.

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.constraint.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:background="@color/colorAccent"><ImageViewandroid:id="@+id/imageView"android:layout_width="0dp"android:layout_height="0dp"android:scaleType="centerCrop"app:srcCompat="@android:color/darker_gray"app:layout_constraintDimensionRatio="h,16:9"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent" /><TextViewandroid:id="@+id/textView1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="24dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:text="Title"android:textAppearance="@style/TextAppearance.AppCompat.Headline"app:layout_constraintTop_toBottomOf="@+id/imageView"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toTopOf="@+id/textView2" /><TextViewandroid:id="@+id/textView2"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:layout_marginBottom="24dp"android:text="Subtle"app:layout_constraintTop_toBottomOf="@+id/textView1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toBottomOf="parent" /></android.support.constraint.ConstraintLayout></FrameLayout>

Solution 5:

Based on answers and comments posted in reply to this question and considering the fact constraint-layout v1.1.0 is still in beta, the best solution at this moment would be to use app:layout_constraintVertical_chainStyle="packed":

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.constraint.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/imageView"android:layout_width="0dp"android:layout_height="0dp"android:scaleType="centerCrop"app:srcCompat="@android:color/darker_gray"app:layout_constraintDimensionRatio="h,16:9"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toTopOf="@+id/textView1"app:layout_constraintVertical_chainStyle="packed"/><TextViewandroid:id="@+id/textView1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="24dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:text="Title"android:textAppearance="@style/TextAppearance.AppCompat.Headline"app:layout_constraintTop_toBottomOf="@+id/imageView"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toTopOf="@+id/textView2" /><TextViewandroid:id="@+id/textView2"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:layout_marginBottom="24dp"android:text="Subtle"app:layout_constraintTop_toBottomOf="@+id/textView1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintBottom_toBottomOf="parent" /></android.support.constraint.ConstraintLayout></FrameLayout>

You may like these posts

Post a Comment for "Problems With Constraintlayout - Imageview 16:9 Inappropriate Top Margin"