Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

goneMargin is not respected in a wrap_content ConstraintLayout?

Tags:

I have a ConstraintLayout where its height is wrap_content.

I want its height to be able to collapse or expanding, according to its Child's height. Simple and common enough, right?

Now I have a layout which looks like this: enter image description here
(First of all, please ignore the abnormal super large margin at the bottom. As you can see, the margin is just 16dp but the preview renders a very large margin.)

My problem is, if the big rectangle's visibility is set to gone,
According to the documentation of ConstraintLayout, if I set its goneMarginTop to a certainValue, it will retain that margin even when its visibility is gone. So that my Request Date will have some space to the bottom of parent.

However, this does not work as expected. Request Date sticked to the bottom of its parent: enter image description here
(This is again a broken preview. In my real app, I am able to see a complete Request Date)

Have I done something wrong? Here is my complete code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/colorBasicGrey"
    android:layout_marginBottom="2dp">

    <View
        android:id="@+id/item_indicator"
        android:layout_width="8dp"
        android:layout_height="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/white"
        android:layout_marginTop="24dp"
        android:layout_marginLeft="24dp"/>

    <TextView
        android:id="@+id/group_member_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/group_member_join_group_request"
        app:layout_constraintTop_toBottomOf="@id/item_indicator"
        app:layout_constraintBottom_toTopOf="@id/item_indicator"
        app:layout_constraintLeft_toRightOf="@id/item_indicator"
        android:layout_marginLeft="8dp"
        style="@style/general45"/>

    <TextView
        android:id="@+id/group_member_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/general45"
        android:textAllCaps="true"
        app:layout_constraintBaseline_toBaselineOf="@id/group_member_label"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="180dp"
        tools:text="ABCDEFGHIJK"/>

    <TextView
        android:id="@+id/group_request_date_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/group_member_request_date_label"
        app:layout_constraintTop_toBottomOf="@id/group_member_label"
        app:layout_constraintLeft_toLeftOf="@id/group_member_label"
        android:layout_marginTop="8dp"
        style="@style/general45"/>

    <TextView
        android:id="@+id/group_request_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/general45"
        android:textAllCaps="true"
        app:layout_constraintBaseline_toBaselineOf="@id/group_request_date_label"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="180dp"
        tools:text="28/10/2017"/>

    <LinearLayout
        android:id="@+id/admin_button_container"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="12dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/group_request_date_label"
        app:layout_constraintVertical_bias="0.0"
        app:layout_goneMarginTop="16dp"
        app:layout_goneMarginLeft="24dp"
        app:layout_goneMarginRight="24dp"
        app:layout_goneMarginBottom="0dp"
        android:visibility="gone">

        <!--To simplify the question, I hided elements inside this LinearLayout-->

    </LinearLayout>

</android.support.constraint.ConstraintLayout>
like image 281
Sira Lam Avatar asked Nov 06 '17 09:11

Sira Lam


People also ask

Can we use LinearLayout in ConstraintLayout?

Most of what can be achieved in LinearLayout and RelativeLayout can be done in ConstraintLayout. However, learning the basics of LinearLayout and RelativeLayout is important before trying to understand how to use it with ConstraintLayout.

Is ConstraintLayout faster than LinearLayout?

More complex layout but results are the same, flat Constraint Layout is slower than nested Linear Layout.

Should you use ConstraintLayout?

Advantages of using ConstraintLayout in AndroidIt helps to improve the UI performance over other layouts. With the help of ConstraintLayout, we can control the group of widgets through a single line of code. With the help of ConstraintLayout, we can easily add animations to the UI components which we used in our app.

What is the difference between ConstraintLayout and RelativeLayout?

Unlike RelativeLayout , ConstraintLayout offers a bias value that is used to position a view in terms of 0% and 100% horizontal and vertical offset relative to the handles (marked with a red circle). These percentages (and fractions) offer seamless positioning of the view across different screen densities and sizes.


1 Answers

Figured it out.

goneMargin is used to indicate the margin to a GONE target, instead of itself being GONE.

Therefore in fact I should put the goneMargin attributes in the Request Date instead of the large rectangle.

like image 147
Sira Lam Avatar answered Sep 18 '22 16:09

Sira Lam