Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CardView in ConstraintLayout Not Wrapping Height

Tags:

android

android-cardview

android-constraintlayout

CardView in ConstraintLayout Not Wrapping Height.

Facing the similar issue with stable CL library:

compile 'com.android.support.constraint:constraint-layout:1.0.2'

Android Studio: 2.3.2

Observations:

  1. Setting hardcoded cardview-height fixes the issue.
  2. Changing CardView with RelativeLayout fixes.

Is there still an issue with Cardview that it is finding hard to cope up with ConstraintLayout.

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:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="25dp">


    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="122dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        app:cardBackgroundColor="@color/io15_blue_grey_100"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_default="wrap"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="spread">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/mobLeftIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="@+id/mobInputLayout"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toLeftOf="@+id/mobInputLayout"
                app:layout_constraintTop_toTopOf="@+id/mobInputLayout"
                app:srcCompat="@drawable/ic_up" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/mobInputLayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                app:layout_constraintLeft_toRightOf="@+id/mobLeftIcon"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <EditText
                    android:id="@+id/editText4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Mobile Number"
                    android:text="123123123" />
            </android.support.design.widget.TextInputLayout>

            <ImageView
                android:id="@+id/phoneLeftIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="@+id/phoneInputLayout"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toLeftOf="@+id/phoneInputLayout"
                app:layout_constraintTop_toTopOf="@+id/phoneInputLayout"
                app:srcCompat="@drawable/ic_up" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/phoneInputLayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                app:layout_constraintLeft_toRightOf="@+id/phoneLeftIcon"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/mobInputLayout">

                <EditText
                    android:id="@+id/editText5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Telphone Number"
                    android:text="123123123" />
            </android.support.design.widget.TextInputLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Screenshot: enter image description here

like image 312
AskQ Avatar asked Jun 19 '17 07:06

AskQ

People also ask

Can we use CardView inside ConstraintLayout?

Now, for CardView itself -- there are no need for a Nested ConstraintLayout -- CardView is simply a FrameLayout, so if you want to use a ConstraintLayout inside it, everything works. In parallel, you can put a CardView inside a ConstraintLayout, that works too.

Which is better RelativeLayout or ConstraintLayout?

If you have the choice start with ConstraintLayout, but if you already have your app in RelativeLayout, stay with it. That's all I have been following. RelativeLayout is very limited in functionality and many complex layouts can't be made using it, especially when ratios are involved.

What is the difference between ConstraintLayout and Linearlayout?

ConstraintLayout has dual power of both Relative Layout as well as Linear layout: Set relative positions of views ( like Relative layout ) and also set weights for dynamic UI (which was only possible in Linear Layout). Despite the fact that it's awesome, it fails to serve the purpose with simple UI layouts.

1 Answers

To make CardView wrap content represented by ConstraintLayout, you have to add 3 chains to views inside ConstraintLayout:

  1. Horizontal spread chain between mobLeftIcon and mobInputLayout
  2. Horizontal spread chain between phoneLeftIcon and phoneInputLayout
  3. Vertical spread chain between mobInputLayout and phoneInputLayout

See this screenshot of Layout Editor:

Chains on Layout Editor

Here's the final source code for your layout:

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

    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/mobLeftIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="8dp"
                app:srcCompat="@drawable/ic_up"
                app:layout_constraintTop_toTopOf="@+id/mobInputLayout"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="@+id/mobInputLayout"
                app:layout_constraintEnd_toStartOf="@+id/mobInputLayout"
                app:layout_constraintHorizontal_chainStyle="spread" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/mobInputLayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@+id/mobLeftIcon"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toTopOf="@+id/phoneInputLayout"
                app:layout_constraintVertical_chainStyle="spread">

                <EditText
                    android:id="@+id/editText4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Mobile Number"
                    android:text="123123123" />
            </android.support.design.widget.TextInputLayout>

            <ImageView
                android:id="@+id/phoneLeftIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="8dp"
                app:srcCompat="@drawable/ic_up"
                app:layout_constraintTop_toTopOf="@+id/phoneInputLayout"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="@+id/phoneInputLayout"
                app:layout_constraintEnd_toStartOf="@+id/phoneInputLayout"
                app:layout_constraintHorizontal_chainStyle="spread" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/phoneInputLayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintTop_toBottomOf="@+id/mobInputLayout"
                app:layout_constraintStart_toEndOf="@+id/phoneLeftIcon"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent">

                <EditText
                    android:id="@+id/editText5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Telphone Number"
                    android:text="123123123" />

            </android.support.design.widget.TextInputLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

As a result, you get something like:

Simulator screenshot

like image 72
Eugene Brusov Avatar answered Sep 30 '22 06:09

Eugene Brusov
Sign in to Comment

Related questions

AdMob real ads are not showing, only test ads are displayed
Create group using wifi p2p to connect multiple device
Not able to update middle fragment in View Pager.
Android, how to test Google Map [duplicate]
How do I get "nameValuePairs" in a JSON request using Retrofit?
ACTION_GET_CONTENT Intent not showing external storage
Selection of views like a ratingbar
How to add Listener for next , previous , rewind and forward in Exoplayer
Gradle 3.0 Alpha 2 throwing exception while Alpha 1 works fine
Why is the GitHub authorization button in the OAuth flow grayed out?
Determine when Subject has no subscribers
Service stops working after sometime. Needed to work continuously
Resource merging in Instant Apps features modules
android gradle task source code
Android: Draw shape with skewed corner
Getting error "The package appears to be corrupt" in Fabric Beta on Android 6
Android: mysterious escaped single quote in Uri encoded place name
Computer Vision and AR libraries availabe for Android?
Cannot get foreground activity name in Android Lollipop 5.0 only
Uncaught exception thrown by finalizer: Google API bug Or Samsung kernel bug?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!