Content of View not shown completely when using a ConstraintLayout - Android

Question

I am using this color picker above a guideline and want to align a Text View (and other views) below the guideline and bind them to the width of the color picker by using a ConstraintLayout with these options:

app:layout_constraintRight_toRightOf="@+id/colorPicker"
app:layout_constraintLeft_toLeftOf="@+id/colorPicker"

(The width of the color picker depends on the available height.)

The problem I am facing is that the view seems to be placed exactly below the color picker, however, the content of the view is not adjusted and therefore not shown completely as shown in this picture.

Similar behavior can be reproduced with an ImageView instead of TextView. A RecyclerView seems to be working, however, the 'list end animation' when reaching the start or end of the list is misplaced.

When using other views instead of this color picker I do not face this issue.

Can anyone explain this behavior and how to fix it?

The complete xml code I am using for this:

<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="xxx.xxx.xxx.MainActivity">

    <com.rarepebble.colorpicker.ColorPickerView
        android:id="@+id/colorPicker"
        android:layout_width="wrap_content"
        android:layout_height="0dp"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/guideline"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintGuide_percent="0.60"
        android:orientation="horizontal"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello World! Some chars in this TextView are cut on the right side."

        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintRight_toRightOf="@+id/colorPicker"
        app:layout_constraintLeft_toLeftOf="@+id/colorPicker"
        />

</android.support.constraint.ConstraintLayout>

Ajil O. · Answer 1 · 2017-08-28T14:32:15.870

Did you try using LinearLayout? With problems like these, where one view needs to occupy a percentage of the screen, using layout_weight

Solution using LinearLayout

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:orientation="vertical">
        <com.rarepebble.colorpicker.ColorPickerView
            android:id="@+id/colorPicker"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="6"
            />
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4">
            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Hello World! Some chars in this TextView are cut on the right side." />
        </FrameLayout>
</LinearLayout>

Edit based on comments

Something like this should work. You can change the View's visibility to GONE or VISIBLE depending on whether the FloatingActionButton has been tapped or not.

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/linearContainer"
        app:layout_constraintTop_toTopOf="@+id/linearContainer"
        android:layout_marginTop="16dp" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <LinearLayout
        android:id="@+id/linearContainer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent">

        <com.rarepebble.colorpicker.ColorPickerView
            android:id="@+id/colorPicker"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="6" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4">

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Hello World! Some chars in this TextView are cut on the right side." />
        </FrameLayout>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

Yes, I am using a LinarLayout in the latest releases but it was not possible to continue using the LinarLayout for new features. — Julian Eggers, Aug 28 '17 at 10:50
@JulianEggers I agree that getting these to work can be tricky. But what *new features* are you talking about here? Can you elaborate? — Ajil O., Aug 28 '17 at 11:10
Sure. Basically, I have a color picker with a dynamic size in the upper part and I want to show a FAB in the top left corner of the color picker. The FAB can be expanded and should _close_ after touching the screen anywhere (Like the FAB of Inbox or explained [here](https://stackoverflow.com/a/40647621/5799699)). I tried to use a `View`on a top layer that listens for touch events and closes the FAB. Obviously, the FAB and its child FABs were not clickable anymore since they had to stay in the LinearLayout for positioning them in the corner of the color picker. — Julian Eggers, Aug 28 '17 at 11:55
I want the FAB to be located in the top left corner of the color picker but using your code this can be easily done by `app:layout_constraintLeft_toLeftOf="@+id/linearLayout"` and `app:layout_constraintTop_toTopOf="@+id/linearLayout"`. Let me check whether everything works as needed. — Julian Eggers, Aug 28 '17 at 14:31
Thanks for your help. The app works as needed now. However, the FAB and the View should be moved to the end of the constraint layout, since they have to be on the top layer for receiving all touch events. — Julian Eggers, Aug 28 '17 at 16:33
In my opinion, there is a bug in the `ConstraintLayout` or in the color picker, which is why my initial question cannot be answered, yet. That is why I do not accept your answer, but vote it up (as soon as I got enough reputation). (Hope this is the right why to go?) — Julian Eggers, Aug 28 '17 at 16:34
@JulianEggers Sure. [This](https://meta.stackoverflow.com/a/320165/6891637) post will give you an idea about when to hit that *Upvote* button. My inputs might have solved your problem, but I am pretty sure it has failed to address the core issue your question raised. I hope someone more knowledgeable comes along and gives a more comprehensive solution. So let's wait for a few days before hitting the *Accept* button. :) — Ajil O., Aug 28 '17 at 18:26
Maybe you did not notice my first message because I wrote 2 replies in a row: Can you move the Fab and the View to the bottom of the `ConstraintLayout`? It is required to be on the top layer otherwise it does not work. — Julian Eggers, Aug 30 '17 at 11:34

Content of View not shown completely when using a ConstraintLayout - Android

1 Answers1