Auto-fit items in Linear layout

Viewed 1041

I have two constraint layouts in a linear layout. I want the constraint layouts to occupy 30% and 70% of the screen respectively on all devices. What attribute inside the Linear Layout do I need to set in order to achieve this?

4 Answers

This should give the desired result. Setting a weightSum attribute to the parent linear layout and then accordingly giving the weights helps

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="1" >

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.3"/>

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.7"/>
</LinearLayout>

You have to take Parent Layout as ConstraintLayout and then after you have to use GuideLine to set 30 and 70 percent of screen.

<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_green_light"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

Output

enter image description here

Use WeightSum attribute on LinearLayout to achieve the Output you are expecting, Which is more easier than other methods.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3" > 


<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3">

  //Child layouts on 30% of layout

</android.support.constraint.ConstraintLayout>


<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="7">

  //Child layouts on 70% of layout

</android.support.constraint.ConstraintLayout>

If you want make something like that use

 android:layout_weight="any number"

but you must make the same height for the both of them it doesn't matter if the height wrap_content or match_parent The layout will occupy more form screen if the number less than the other one

Related