1

I created two rows of ImageButtons through chains and used the packed style to close the gap between the two rows. However there is a lot of extra space surrounding the overall ImageButtons rows on the top and bottom.

enter image description here

When I try to use layout_constraintVertical_bias="0.1" on the top row buttons and layout_constraintVertical_bias="0.9" on the bottom row buttons to remove the gap it only shifts the rows up to the top of the layout. I know chain constraint details should be in the parent view but is there anyway to get the children of the chain to adapt a bias as well? I know this can be done by changing the width to 0dp but when I do that the images on the bottom become wider than the images at the top due to an uneven number of buttons.

enter image description here

<?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">

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/button4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/button2"
        app:layout_constraintVertical_chainStyle="packed"/>

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/button4"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintRight_toLeftOf="@id/button3"
        app:layout_constraintVertical_bias="1"/>

    <ImageButton
        android:id="@+id/button3"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/button5"
        app:layout_constraintLeft_toRightOf="@id/button2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_chainStyle="packed"/>

    <ImageButton
        android:id="@+id/button4"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/button5"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <ImageButton
        android:id="@+id/button5"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/button3"
        app:layout_constraintLeft_toRightOf="@id/button4"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

Edit:

This is what I'm trying to accomplish below. I basically want the arrows to push up to the red line while the ImageButtons stay in the place they are at right now so there is a gap between the buttons and the top and bottom edge of the layout. I attempted to shrink the gap in the second image using vertical bias but as you can see it only worked for the top row of buttons and not the buttons on the bottom row.

enter image description here

  • It is not clear what you want to accomplish. Do you want to separate the two rows or move everything to the top with a little margin? A picture of the desired result (doesn't have to be fancy) would help. – Cheticamp Dec 04 '17 at 02:06
  • Thank you for the advice. I was going to include a picture but I wasn't sure. I updated my post with an image. –  Dec 04 '17 at 02:45

1 Answers1

1

So, the question is really "why is my ConstraintLayout so tall?" If you can use a later release of ConstraintLayout (1.1.0-beta3 is the latest), this problem will go away. If you can't use a beta release, there is a work-around but upgrading is the best solution. Ping back if you can't use a beta release.

Cheticamp
  • 61,413
  • 10
  • 78
  • 131
  • Sorry I thought maybe the default bias of the packed chain style was created such a huge gap. I found the dependency on https://androidstudio.googleblog.com/2017/10/constraintlayout-110-beta-3-is-now.html and found how to add it thank you! –  Dec 04 '17 at 03:48