search

android / codelab-constraint-layout

Constraint Layout Codelab
https://codelabs.developers.google.com/codelabs/constraint-layout/
Apache License 2.0
471 stars 242 forks source link

[ 2.0.0-beta2 ] wrap height bug #72

Closed tperraut closed 4 years ago

tperraut commented 4 years ago

In the example below putting the height of the ConstraintLayout to wrap_content or with a specific size cuts the @+id/helpButton (see here) while putting the height to match_parent has the expected behavior.

With ConstraintLayout 1.1.3 there is absolutely no issue.

Note : I know that this code could be way more flat with the ConstraintLayout and you know, updating others old layouts takes time ;)

Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
    android:background="@drawable/bg_rounded_top_white"
    android:paddingBottom="@dimen/default_padding_and_quarter">

    <FrameLayout
        android:id="@+id/riding_info_banner_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_rounded_top_blue"
        android:padding="@dimen/default_padding"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/title_bike"
            style="@style/DefaultText.Regular.Small.DarkBlue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/ic_lock"
            android:drawablePadding="@dimen/default_padding"
            android:gravity="center_vertical"
            android:text="@string/riding_close_lock"
            android:visibility="gone"
            tools:visibility="gone" />

        <TextView
            android:id="@+id/title_scooter"
            style="@style/DefaultText.Regular.Small.DarkBlue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/ic_scooter_blue"
            android:drawablePadding="@dimen/default_padding"
            android:gravity="center_vertical"
            android:text="@string/riding_scooter"
            android:visibility="gone"
            tools:visibility="visible" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/riding_info_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/default_padding_and_quarter"
        android:layout_marginTop="@dimen/default_padding"
        android:layout_marginEnd="@dimen/default_padding_and_quarter"
        app:layout_constraintTop_toBottomOf="@id/riding_info_banner_container">

        <LinearLayout
            android:id="@+id/tripTimeContainer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/riding_time"
                android:textColor="@color/pony_dark_blue" />

            <TextView
                android:id="@+id/tripTime"
                style="@style/DefaultText.Heavy.Medium.DarkBlue"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/default_padding_quarter"
                android:text="@string/riding_time"
                android:textColor="@color/pony_dark_blue"
                tools:text="15:44" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/tripSpeedContainer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/speedUnits"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/kmh"
                android:textColor="@color/pony_dark_blue" />

            <TextView
                android:id="@+id/tripSpeed"
                style="@style/DefaultText.Heavy.Medium.DarkBlue"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/number_0"
                android:textColor="@color/pony_dark_blue" />
        </LinearLayout>

        <ImageView
            android:id="@+id/flashlight"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="end"
            android:layout_marginTop="@dimen/default_padding_small"
            android:background="@drawable/button_rounded_pink"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/flashlight_white_off"
            tools:ignore="ContentDescription" />
    </FrameLayout>

    <View
        android:id="@+id/separator"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_margin="@dimen/default_padding"
        android:background="@color/grey_300"
        app:layout_constraintTop_toBottomOf="@id/riding_info_container" />

    <!-- Also tried to add start and end constraints there but still the same -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/default_padding"
        android:layout_marginTop="@dimen/default_padding"
        android:layout_marginEnd="@dimen/default_padding"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/separator">

        <Button
            android:id="@+id/parkingButton"
            style="@style/PonyPinkBorderButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/default_padding_half"
            android:layout_weight="0.5"
            android:text="@string/parking"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/helpButton"
            style="@style/PonyPinkBorderButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_marginStart="@dimen/default_padding_half"
            android:layout_weight="0.5"
            android:text="@string/help"
            android:textAllCaps="false" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Button Style

    <style name="PonyPinkBorderButton" parent="@style/Base.Widget.AppCompat.Button.Colored">
        <item name="android:background">@drawable/button_rounded_border_coral</item>
        <item name="android:textAppearance">@style/DefaultText.Heavy.Small.Coral</item>
        <item name="android:includeFontPadding">false</item>
    </style>
tperraut commented 4 years ago

I create an issue there https://issuetracker.google.com/issues/142490674