CODEWITHSUNDEEP
androidandroid-constraintlayout
HelloCW
HelloCW

Reputation: 2255

How can make the two buttons to be center when I use ConstraintLayout?

I hope to make two buttons on the center of screen just like Image A when I use Code A, but in fact the two button located on the left screen just like Image B, what error code do I made in my Code A? I know that I can do it by adding a Guideline control, but why can't the Code A do it? Thanks!

Image A

enter image description here

Image B

enter image description here

Code A

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

    <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_unit_id"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="8dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/btnAddEdit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView">

        <TextView
            android:id="@+id/tvName"
            style="@style/myTextMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Backup Name" />

    </LinearLayout>


    <Button
        android:id="@+id/btnAddEdit"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="2dp"
        android:text="One"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLefttOf="@+id/btnCancel"
        app:layout_constraintBottom_toBottomOf="parent"
         />

    <Button
        android:id="@+id/btnCancel"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="7dp"
        android:layout_marginTop="2dp"
        android:text="Two"
        app:layout_constraintLeft_toRightOf="@+id/btnAddEdit"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />


</android.support.constraint.ConstraintLayout>

To Cheticamp:

Thanks!

Code AA works well, why can I delete the app:layout_constraintRight_toLefttOf="@+id/btnCancel" ?

Code AA

<Button
        android:id="@+id/btnAddEdit"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="2dp"
        android:text="One"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnCancel"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        />

Code BB works well , why can I replace app:layout_constraintEnd_toEndOf="parent" with app:layout_constraintRight_toRightOf="parent"

Code BB

  <Button
        android:id="@+id/btnCancel"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="7dp"
        android:layout_marginTop="2dp"
        android:text="Two"
        app:layout_constraintStart_toEndOf="@+id/btnAddEdit"
        app:layout_constraintRight_toRightOf="parent"   
        app:layout_constraintBottom_toBottomOf="parent"
  />

And more, could you tell me what are different between app:layout_constraintEnd_toEndOf="parent" and app:layout_constraintRight_toRightOf="parent"

Upvotes: 4

Views: 3169

Answers (3)

Cheticamp
Cheticamp

Reputation: 62831

Here is the corrected XML that will lay out like "Image A" without any hard coding or margins:

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

    <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_unit_id"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/btnAddEdit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Backup Name" />

    </LinearLayout>

    <Button
        android:id="@+id/btnAddEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnCancel"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintRight_toLefttOf="@+id/btnCancel"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:text="Two"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btnAddEdit" />

</android.support.constraint.ConstraintLayout>

enter image description here

The key thing to do is to constrain button "one" to the left side of the parent and button two to the right side. A packed chain is create between the two buttons. See Chains in the documentation.

You can set a start/end margin on the buttons to separate them while maintaining the centering.

CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

Upvotes: 5

Edu Salgado
Edu Salgado

Reputation: 1

I've updated your code, it should be working now!

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

    <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_unit_id"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="8dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/btnAddEdit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Backup Name" />

    </LinearLayout>


    <Button
        android:id="@+id/btnAddEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:text="One"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLefttOf="@+id/btnCancel" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginEnd="80dp"
        android:text="Two"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</android.support.constraint.ConstraintLayout>

Upvotes: 0

Ashuthosh Patoa
Ashuthosh Patoa

Reputation: 314

For your button try using this attribute for button one

app:layout_constraintHorizontal_bias="0.4"

and for button two use

app:layout_constraintHorizontal_bias="0.6"

Upvotes: 0

Related Questions