In my Fragment I have a ConstraintLayout with layout_height="wrap_content"
and I would like to have a margin between my two buttons at the bottom of the view.
When I add this margin as layout_marginBottom
to the upper button (button_welcome_signup) it seems to work fine. However, if I try to add it to the bottom button (button_welcome_signin) as layout_marginTop
it doesn't work.
Does anybody know what the issues here is / if am doing something wrong?
(Please note there is a reason why I am using wrap_content and also that I would seriously like to use the margin on the bottom button, so I can add some margin to its style for better UI consistency within my project).
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:MyAppApp="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@color/white"
android:minHeight="@dimen/min_height_welcome_frame"
android:padding="@dimen/margin_all_frame_inner">
<ImageView
android:id="@+id/imageview_welcome_logo"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/logo_header"
MyAppApp:layout_constraintTop_toTopOf="parent"
MyAppApp:layout_constraintLeft_toLeftOf="parent"
MyAppApp:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/textiew_welcome_title"
style="@style/MyAppTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_all_component_l"
android:text="@string/welcome_title"
MyAppApp:layout_constraintTop_toBottomOf="@id/imageview_welcome_logo" />
<TextView
android:id="@+id/textview_welcome_text"
style="@style/MyAppTextViewText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/welcome_message"
MyAppApp:layout_constraintTop_toBottomOf="@id/textiew_welcome_title" />
<Button
android:id="@+id/button_welcome_signin"
style="@style/MyAppSubButton"
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_marginTop="@dimen/margin_all_component_s"
android:text="@string/welcome_sign_in"
MyAppApp:layout_constraintBottom_toBottomOf="parent" />
<Button
android:id="@+id/button_welcome_signup"
style="@style/MyAppButton"
android:layout_width="match_parent"
android:layout_height="46dp"
android:layout_marginTop="@dimen/margin_all_component_l"
android:text="@string/welcome_sign_up"
MyAppApp:layout_constraintBottom_toTopOf="@id/button_welcome_signin"
MyAppApp:layout_constraintTop_toBottomOf="@id/textview_welcome_text"
MyAppApp:layout_constraintVertical_bias="1" />
</android.support.constraint.ConstraintLayout>
styles.xml:
<style name="MyAppButton" parent="Widget.AppCompat.Button">
<item name="android:background">@drawable/button_selector_blue</item>
<item name="android:textSize">@dimen/textsize_all_l</item>
<item name="android:textColor">@color/white</item>
<item name="fontFamily">@font/my_sans_serif_regular</item>
</style>
<style name="MyAppSubButton" parent="Widget.AppCompat.Button">
<item name="android:background">@drawable/button_selector_transparent</item>
<item name="android:textSize">@dimen/textsize_all_l</item>
<item name="android:textColor">@color/turquoise_blue</item>
<item name="fontFamily">@font/my_sans_serif_regular</item>
</style>
Within a ConstraintLayout
, side margins for a child view will only take effect if that side is constrained to another view. In your original example, bottom margin on the top button works because the top button has a bottom constraint:
MyAppApp:layout_constraintBottom_toTopOf="@id/button_welcome_signin"
However, top margin on the bottom button doesn't work because the bottom button has no constraint for its top.
If you would like to use top margin on the bottom button, add this constraint:
MyAppApp:layout_constraintTop_toBottomOf="@+id/button_welcome_signup"
Note that you will also have to update the chain style (since this new constraint creates a chain) by adding this attribute to the top button:
MyAppApp:layout_constraintVertical_chainStyle="packed"