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:
(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:
(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>
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.
More complex layout but results are the same, flat Constraint Layout is slower than nested Linear Layout.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With