CODEWITHSUNDEEP
androidandroid-layout
alwaysday1
alwaysday1

Reputation: 1783

Bottom align not working in ConstraintLayout with different ImageView sizes

I want some different sized ImageViews in ConstraintLayout to have the same bottom line.

The smaller picture has the size: 100x140: enter image description here

The larger picture has the size: 206x316: enter image description here

With the xml layout:

<?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"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#8E8392">


    <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/jbean"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/p2"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p1"/>

    <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/jellybig"
            app:layout_constraintStart_toEndOf="@id/p1"
            app:layout_constraintEnd_toStartOf="@+id/p3"
            app:layout_constraintBottom_toBottomOf="@id/p1"
            android:id="@+id/p2"
    />

    <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/jellybig"
            app:layout_constraintStart_toEndOf="@id/p2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="@id/p2"
            android:id="@+id/p3"
    />

</android.support.constraint.ConstraintLayout>

However it looks weird, as follows:

enter image description here

Update: According to Tamir Abutbul's answer, I've updated the layout to:

<?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"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#8E8392">


    <ImageView
            android:layout_width="0dp"
            app:layout_constraintWidth_percent="0.3"
            app:layout_constraintHeight_percent="0.99"
            android:layout_height="0dp"
            android:src="@drawable/jbean"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/p2"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p1"/>

    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintWidth_percent="0.3"
            app:layout_constraintHeight_percent="0.99"
            android:src="@drawable/jellybig"
            app:layout_constraintStart_toEndOf="@id/p1"
            app:layout_constraintEnd_toStartOf="@+id/p3"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p2"
    />

    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintWidth_percent="0.3"
            app:layout_constraintHeight_percent="0.99"
            android:src="@drawable/jellybig"
            app:layout_constraintStart_toEndOf="@id/p2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p3"
    />

</android.support.constraint.ConstraintLayout>

Which I think it couldn't work as expected.

enter image description here

Upvotes: 0

Views: 1297

Answers (5)

HDW
HDW

Reputation: 307

I had a similar problem with an imageview that was constrained to the parents bottom but still showed some kind of margin. The solution was to add android:adjustViewBounds="true"

Upvotes: 1

Neha Rathore
Neha Rathore

Reputation: 427

hey unable to add this xml as comment, this is the xml for above image

<?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"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#ffffff">


        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/small"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/p2"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p1"
            app:layout_constraintHorizontal_bias="1"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/big"
            app:layout_constraintStart_toEndOf="@id/p1"
            app:layout_constraintEnd_toStartOf="@+id/p3"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p2"
            app:layout_constraintHorizontal_bias="1"
            />

        <ImageView
            android:id="@+id/p3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/big"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toEndOf="@id/p2" />

    </android.support.constraint.ConstraintLayout>

Upvotes: 1

Neha Rathore
Neha Rathore

Reputation: 427

output

do you want something like this??

Upvotes: 1

Tamir Abutbul
Tamir Abutbul

Reputation: 7651

Your code will work for images with the same height and look like this:

enter image description here

But Different phones got different screen size, your images have fixed size and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

In ConstraintLayout you can work with percent on your views like this:

 <Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.6" //line 1
    app:layout_constraintWidth_percent="0.5"  //line 2 
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

So what I did - I told my button to be equal to 60% of its parent in height (see line 1) and also I told my button to be equal to 50% of its parent Width(see line 2).

You can implement this logic into your imageView to show different image size and keep a responsive layout.

Upvotes: 1

Hardik Bambhania
Hardik Bambhania

Reputation: 1792

Try below code

<?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"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#8E8392">


    <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/jbean"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/p2"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p1"/>

    <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/jellybig"
            app:layout_constraintStart_toEndOf="@id/p1"
            app:layout_constraintEnd_toStartOf="@+id/p3"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p2"
    />

    <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/jellybig"
            app:layout_constraintStart_toEndOf="@id/p2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/p3"
    />

</android.support.constraint.ConstraintLayout>

Let me know if not working

Upvotes: 1

Related Questions