CODEWITHSUNDEEP
androidandroid-layout
Dana Robinson
Dana Robinson

Reputation: 4364

Android ConstraintLayout: Controls in ImageView mess up ImageView layout

I want to have two, side-by-side ImageViews that spread to take up 50% of the screen each. Over each, I want to arrange an array of Buttons and TextViews. I am doing this in a single ConstraintLayout.

When I set up the ImageViews by themselves, they lay out properly using these properties:

android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"

The ImageViews have constraints like this (there's also a 1dp View separator bar):

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/separator_bar"
app:layout_constraintTop_toTopOf="parent"

Here's what the split looks like:

The split looks fine

However, when I add the Buttons and TextViews and chain them together, linking them to the sides of the ImageView and each other, making them essentially "contained" in the ImageView, the ImageView shrinks horizontally so that it is the width of the widgets, almost as if wrap_content were applied. What's even weirder is that the other ImageView also shrinks, even though I haven't added its widgets yet.

When marked up, the controls look like this:

<Button
    android:id="@+id/btnKingW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♔"
    app:layout_constraintBottom_toTopOf="@id/btnQueenW"
    app:layout_constraintEnd_toStartOf="@id/tvKingW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toTopOf="@id/white_king_image"
    app:layout_constraintVertical_chainStyle="spread" />

(the constraints of the original ImageView are unchanged)

Here's what it looks like with just one ImageView anchored to the parent on all four sides. The widgets look fine.

enter image description here

And here's the hot mess when I use the two ImageViews.

enter image description here

What's going on here? Why does linking a widget inside another widget/view cause the nice layout that I had before to change? I would assume that the ImageViews were anchored to the parent and shouldn't move, but this is clearly not the case.

I've looked at a bunch of tutorials, but they all seem to show me how to perform a half dozen tricks using the Android Studio GUI and don't really get into the zen of how the layouts are evaluated. I want to actually grok what's going on and not just click some buttons in a GUI design tool. FWIW, I did try the GUI design tool and spent about as much time cleaning up the magic trash it added to my XML (no, I don't need padding, thanks) as I would have saved using the tool, so I essentially abandoned it and now just use it to experiment.

I'm new to Android development, if that isn't clear. This is a toy app for an ungraded Udacity course.

Full XML:

<?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="com.example.android.chessmaniac.MainActivity"
tools:layout_editor_absoluteY="81dp">

<ImageView
    android:id="@+id/white_king_image"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:alpha="0.3"
    android:contentDescription="@string/white_king_chesspiece"
    android:scaleType="centerCrop"
    android:src="@mipmap/white_king"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/separator_bar"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/separator_bar"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/black_king_image"
    app:layout_constraintStart_toEndOf="@id/white_king_image"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/black_king_image"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:alpha="0.3"
    android:contentDescription="@string/black_king_chesspiece"
    android:scaleType="centerCrop"
    android:src="@mipmap/black_king"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/separator_bar"
    app:layout_constraintTop_toTopOf="parent" />

<!-- WHITE BUTTONS -->

<Button
    android:id="@+id/btnKingW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♔"
    app:layout_constraintBottom_toTopOf="@id/btnQueenW"
    app:layout_constraintEnd_toStartOf="@id/tvKingW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toTopOf="@id/white_king_image"
    app:layout_constraintVertical_chainStyle="spread" />

<Button
    android:id="@+id/btnQueenW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♕"
    app:layout_constraintBottom_toTopOf="@id/btnRookW"
    app:layout_constraintEnd_toStartOf="@id/tvQueenW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnKingW" />

<Button
    android:id="@+id/btnRookW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♖"
    app:layout_constraintBottom_toTopOf="@id/btnBishopW"
    app:layout_constraintEnd_toStartOf="@id/tvRookW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnQueenW" />

<Button
    android:id="@+id/btnBishopW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♗"
    app:layout_constraintBottom_toTopOf="@id/btnKnightW"
    app:layout_constraintEnd_toStartOf="@id/tvBishopW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnRookW" />

<Button
    android:id="@+id/btnKnightW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♘"
    app:layout_constraintBottom_toTopOf="@id/btnPawnW"
    app:layout_constraintEnd_toStartOf="@id/tvKnightW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnBishopW" />

<Button
    android:id="@+id/btnPawnW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♙"
    app:layout_constraintBottom_toBottomOf="@id/white_king_image"
    app:layout_constraintEnd_toStartOf="@id/tvPawnW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnKnightW" />

<!-- WHITE TEXTVIEWS -->

<TextView
    android:id="@+id/tvKingW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WK"
    app:layout_constraintBottom_toTopOf="@id/tvQueenW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnKingW"
    app:layout_constraintTop_toTopOf="@id/white_king_image"
    app:layout_constraintVertical_chainStyle="spread" />

<TextView
    android:id="@+id/tvQueenW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WQ"
    app:layout_constraintBottom_toTopOf="@id/tvRookW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnQueenW"
    app:layout_constraintTop_toBottomOf="@id/tvKingW" />

<TextView
    android:id="@+id/tvRookW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WR"
    app:layout_constraintBottom_toTopOf="@id/tvBishopW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnRookW"
    app:layout_constraintTop_toBottomOf="@id/tvQueenW" />

<TextView
    android:id="@+id/tvBishopW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:text="WB"
    app:layout_constraintBottom_toTopOf="@id/tvKnightW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnBishopW"
    app:layout_constraintTop_toBottomOf="@id/tvRookW" />

<TextView
    android:id="@+id/tvKnightW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WN"
    app:layout_constraintBottom_toTopOf="@id/tvPawnW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnKnightW"
    app:layout_constraintTop_toBottomOf="@id/tvBishopW" />

<TextView
    android:id="@+id/tvPawnW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WP"
    app:layout_constraintBottom_toBottomOf="@id/white_king_image"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnPawnW"
    app:layout_constraintTop_toBottomOf="@id/tvKnightW" />

</android.support.constraint.ConstraintLayout>

Upvotes: 2

Views: 305

Answers (2)

AskNilesh
AskNilesh

Reputation: 69681

Try this

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

    <ImageView
        android:id="@+id/imageOne"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/imageTwo"
        app:layout_constraintHorizontal_bias="0.65"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

    <ImageView
        android:id="@+id/imageTwo"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/imageOne"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintTop_toBottomOf="@id/guideline" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toRightOf="@+id/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline"
        tools:layout_editor_absoluteY="232dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintTop_toBottomOf="@id/button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toRightOf="@+id/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button2" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="87dp" />
</android.support.constraint.ConstraintLayout>

OUTPUT

Here is the good tutorial for this

enter image description here

Upvotes: 1

Bhuvanesh BS
Bhuvanesh BS

Reputation: 13617

First you have to arrange the image views correctly. Like the LinearLayout, you can set weight in ConstraintLayout.

<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="match_parent">


    <ImageView
        android:id="@+id/imageOne"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/img_one"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/imageTwo"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageTwo"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/img_two"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/imageOne"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Then try to align button over the ImageViews. Hope it helps:)

Upvotes: 0

Related Questions