CODEWITHSUNDEEP
androidlayoutandroid-constraintlayout
SMBiggs
SMBiggs

Reputation: 11688

ImageView Always Centered in ConstraintLayout

Still learning ConstraintView, so I hope I'm missing something obvious. Here's the problem:

I want an ImageView that expands or contracts to as large a view as possible while maintaining its aspect ratio. It's important that the image is not clipped.

And another essential is that it is bumped up to the top of the ConstraintLayout and centered the width is smaller than the height.

Here's the layout code:

<?xml version="1.0" encoding="utf-8"?>


<ImageView
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:adjustViewBounds="true"
    app:srcCompat="@drawable/evil_kitten" />

<Button
    android:id="@+id/go_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:text="Go Kitty!"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

But what I get is an image that is always centered both vertically and horizontally, which creates an unwanted padding at the top. (The boundary of the ConstraintLayout is in yellow):

The image expands and contracts correctly to be as big as possible while still maintaining its aspect ratio. But how can I pin this to the top?

Upvotes: 2

Views: 1770

Answers (3)

Charan M
Charan M

Reputation: 489

Use this layout. app:layout_constraintVertical_bias will keep the ImageView pinned to the top and android:adjustViewBounds will adjust the dimensions of the ImageView according to the image size.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:src="@drawable/image"
        android:adjustViewBounds="true"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintBottom_toTopOf="@id/button"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_marginBottom="8dp"
        android:text="Go Kitty!"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

Upvotes: 4

uDevel
uDevel

Reputation: 1891

Don't set your layout_height to match_parent and then use layout_constrainedHeight to restrict the height to not go outside of the constraint layout.

The idea is play with the image view layout relative to the parent instead of thinking to modify the scaling inside of the ImageView.

<?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"
   tools:context=".MainActivity">

   <ImageView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:src="@drawable/test2"
      app:layout_constrainedHeight="true" />
</android.support.constraint.ConstraintLayout>

Upvotes: 1

J&#233;r&#233;my Schaefer
J&#233;r&#233;my Schaefer

Reputation: 63

I just tried to do the same thing as you and I couldn't reproduce the error, but i'll share the layout's code anyway, so you can compare:

<?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"
    tools:context=".MainActivity">

<ImageView android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/cat"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom">

    <Button android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_marginStart="100dp"
        android:layout_marginEnd="100dp"
        android:text="Button"/>

</LinearLayout>


</android.support.constraint.ConstraintLayout>

There's the result on Android 8.0: result building in release mode on android 8.0

Upvotes: 0

Related Questions