Home > Back-end >  Android constraint layout set programmatically is incorrect
Android constraint layout set programmatically is incorrect

Time:10-01

So i've been trying to set a constraint layout programmatically. Original layout is this enter image description here

The layout file

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.3">

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent="0.48"
            app:cardCornerRadius="20dp"
            app:cardElevation="10dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@ id/card1_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/up_arrow">

                <TextView
                    android:id="@ id/card1_company"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyName"
                    android:textColor="@color/black"
                    android:textSize="20sp"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card1_point"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyPoint"
                    android:textColor="@color/black"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/card1_company"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card1_des"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="SOME COMPANY DESCRIPTION"
                    android:textColor="@color/black"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_default="wrap"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5"/>

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent="1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent="0.48"
            app:cardCornerRadius="20dp"
            app:cardElevation="10dp">


            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@ id/card2_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/up_arrow">

                <TextView
                    android:id="@ id/card2_company"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyName"
                    android:textColor="@color/black"
                    android:textSize="20sp"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card2_point"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyPoint"
                    android:textColor="@color/black"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/card2_company"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card2_des"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="SOME COMPANY DESCRIPTION"
                    android:textColor="@color/black"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_default="wrap"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.01"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.3">

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent="1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent="0.48"
            app:cardCornerRadius="20dp"
            app:cardElevation="10dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@ id/card3_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/down_arrow">

                <TextView
                    android:id="@ id/card3_company"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyName"
                    android:textColor="@color/black"
                    android:textSize="20sp"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card3_point"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyPoint"
                    android:textColor="@color/black"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/card3_company"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card3_des"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="SOME COMPANY DESCRIPTION"
                    android:textColor="@color/black"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintHeight_default="wrap"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent="1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent="0.48"
            app:cardCornerRadius="20dp"
            app:cardElevation="10dp">


            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@ id/card4_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/down_arrow">

                <TextView
                    android:id="@ id/card4_company"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyName"
                    android:textColor="@color/black"
                    android:textSize="20sp"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card4_point"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyPoint"
                    android:textColor="@color/black"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/card4_company"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card4_des"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="SOME COMPANY DESCRIPTION"
                    android:textColor="@color/black"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintHeight_default="wrap"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.01"/>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.3">

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent="0.48"
            app:cardCornerRadius="20dp"
            app:cardElevation="10dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@ id/card5_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/up_arrow">

                <TextView
                    android:id="@ id/card5_company"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyName"
                    android:textColor="@color/black"
                    android:textSize="20sp"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card5_point"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyPoint"
                    android:textColor="@color/black"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/card5_company"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card5_des"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="SOME COMPANY DESCRIPTION"
                    android:textColor="@color/black"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_default="wrap"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5"/>

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent="1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent="0.48"
            app:cardCornerRadius="20dp"
            app:cardElevation="10dp">


            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@ id/card6_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/down_arrow">

                <TextView
                    android:id="@ id/card6_company"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyName"
                    android:textColor="@color/black"
                    android:textSize="20sp"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card6_point"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="CompanyPoint"
                    android:textColor="@color/black"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent="0.1"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/card6_company"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

                <TextView
                    android:id="@ id/card6_des"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="10dp"
                    android:text="SOME COMPANY DESCRIPTION"
                    android:textColor="@color/black"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintHeight_default="wrap"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent="0.5" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

So depending upon the company point, the layout is set. If the points are in negative, the company name and points text are set to the end of the parent and description to the start, as shown in picture, and if the points are positive, vice versa.

But when i set it programmatically, the text is set weirdly for some of the layout where the changes are made, for eg look at the next picture which is set programmatically

enter image description here

If the layout is changed then some text has idented their position closer to center E.g Notice the difference in identation in second pic, vertically second layout and third layout. Third layout didnt have to be changed so its position was same as the 1st pic which is not set programmatically. However the second layout is idented because it was changed programatically

Code to set layout programmatically

if(arrayList.get(0).getPoints() < 0){
        constraintLayout1.setBackgroundResource(R.drawable.down_arrow);
        company1Name.setGravity(Gravity.END);
        company1point.setGravity(Gravity.END);
        ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) company1Name.getLayoutParams();
        params.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID;
        params = (ConstraintLayout.LayoutParams) company1point.getLayoutParams();
        params.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID;
        params = (ConstraintLayout.LayoutParams) company1desc.getLayoutParams();
        params.startToStart = ConstraintLayout.LayoutParams.PARENT_ID;
    }else{
        constraintLayout1.setBackgroundResource(R.drawable.up_arrow);
        company1desc.setGravity(Gravity.END);
        ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) company1Name.getLayoutParams();
        params.startToStart = ConstraintLayout.LayoutParams.PARENT_ID;
        params = (ConstraintLayout.LayoutParams) company1point.getLayoutParams();
        params.startToStart = ConstraintLayout.LayoutParams.PARENT_ID;
        params = (ConstraintLayout.LayoutParams) company1desc.getLayoutParams();
        params.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID;
    }

How to solve this issue?

CodePudding user response:

It looks like you are setting an additional constraint to the views but not removing the original constraint. In other words, you are setting a begin and end constraint to the views which will center the views between the constraints. I don't think that gravity has any bearing.

If you need to shift a view to the right, remove the left constraint and set the right. If you are shifting a view to the left, set the left constraint and remove the right. You can also consider setting both constraints for a view and using horizontal bias to shift it to the left or right. This may be the simpler way to go.

You may be able to remove a constraint with the params by setting it to View.NO_ID, but I am not 100% sure about that. I think that it would be better to use ConstraintSet. Also, see here for an example of usage.

  • Related