CODEWITHSUNDEEP
androidandroid-constraintlayout
Uday
Uday

Reputation: 61

layout weight in Constraint layout

I am new to constraint layout concepts. I want to create a layout with 3 view in a row. 2 view should display without any weight and 3rd should occupy the 2nd half of screen. basically I want to covert below code to constraint layout. Also when 3rd view visibility gone then remaining two view should take all width.

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:layout_weight="1">

        <Button
            android:id="@+id/b1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="he" />

        <Button
            android:id="@+id/b4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="he" />



    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:layout_weight="1">


        <Button
            android:id="@+id/b3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="hello2" />

    </LinearLayout>
</LinearLayout>

I have added screenshot below:

image

Upvotes: 3

Views: 6406

Answers (2)

Ben P.
Ben P.

Reputation: 54204

ConstraintLayout does support the LinearLayout concept of weights as long as you're using a "chain", but I think in your case you're better off using a Guideline to position the half-width view.

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

    <Button
        android:id="@+id/one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HE"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <Button
        android:id="@+id/two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HE"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/one"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

    <Button
        android:id="@+id/three"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="HELLO2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

enter image description here

The Guideline's app:layout_constraintGuide_percent attribute tells it to position itself halfway from either edge of the screen (you can use any value between 0 and 1 here). The android:orientation attribute tells it to draw a vertical line (as opposed to a horizontal line).

After the Guideline is in place, you can constrain other views to it just like you would with any other view type.

Upvotes: 4

Amir133
Amir133

Reputation: 2712

according to this , to set percent of width you can use app:layout_constraintWidth_percent="your percent"

so you can use this:

<?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"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center">

    <Button
        android:id="@+id/b1"
        android:layout_width="0"
        android:layout_height="wrap_content"
        android:text="he"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.25" />

    <Button
        android:id="@+id/b4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="he"
        app:layout_constraintBottom_toBottomOf="@+id/b1"
        app:layout_constraintStart_toEndOf="@+id/b1"
        app:layout_constraintTop_toTopOf="@+id/b1"
        app:layout_constraintVertical_bias="1.0"
        app:layout_constraintWidth_percent="0.25" />

    <Button
        android:id="@+id/b3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="hello2"
        app:layout_constraintBottom_toBottomOf="@+id/b4"
        app:layout_constraintStart_toEndOf="@+id/b4"
        app:layout_constraintTop_toTopOf="@+id/b4"
        app:layout_constraintWidth_percent="0.5" />

</android.support.constraint.ConstraintLayout>

also for more information you can watch these videos .

Update :

if you want to use app:layout_constraintWidth_percent for one button you can set it for one button and then set `android:layout_width="0" for another one.

also you can use chain : watch part 3 of videos

Upvotes: 5

Related Questions