CODEWITHSUNDEEP
androidxml
testingsah
testingsah

Reputation: 81

Constraint layout as 50% height of screen?

I have a ConstraintLayout in Android Studio, I want this to have the height be 60% of the screen size for whatever device it is running on, I am wondering how I can do this in xml?

Currently, I have:

<androidx.constraintlayout.widget.ConstraintLayout
     android:id="@+id/recycler_view_container"
     android:layout_width="match_parent"
     android:layout_height="372dp" // BAD!! HARDCODED
     android:background="@color/white">

     ...

</androidx.constraintlayout.widget.ConstraintLayout>

How could I do this? As you see, the layout_height is hardcoded right now.

Upvotes: 4

Views: 6524

Answers (3)

Geek Tanmoy
Geek Tanmoy

Reputation: 880

Here is my answer. I think it should clear your requirements.

<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"
android:background="@color/colorWhite">

<androidx.constraintlayout.widget.ConstraintLayout 
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/colorRed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHeight_percent="0.50">

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

You can change height percentage according to your needs. Thanks.

Upvotes: 7

Shawn
Shawn

Reputation: 1392

You're going to want to use an unequal LayoutWeight.

LinearLayout supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. Set the child view layout_height to 0 and assign the screen proportion as desired to each child view.

This is how I would set up the XML for your specifications, notes included in the code.

<?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"
    android:orientation="vertical"> // Note: set orientation to vertical 

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" // Note: Set the layout_height to 0
        android:layout_weight="6" // Note: Set weight to 6
        android:background="@color/colorAccent"/>

     // Framelayout need to fill remain space
    <FrameLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp" // Set the layout_height to 0
        android:layout_weight="4"/> // set the weight to 4
</LinearLayout>

The constraint layout has a weight of 6 and FrameLayout has a weight of 4, the LinearLayout has a total weight of 10. 6/10 is 60%, the constraint layout will fill 60% of the screen.

The question has changed after I posted this answer, you can also equal distribution, which is the same as unequal assign the same weight value to each child view, and the screen will be split equally among the child views.

<?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"
    android:orientation="vertical">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorAccent"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

ConstraintLayout has a weight of 1 and FrameLayout has a weight of 1, total layout weight is 2. 1/2 is 50%, the ConstraintLayout will take up 50 of the screen.

Upvotes: 0

Nicolas
Nicolas

Reputation: 7121

You can't do that directly, however you can put a guideline within your ConstraintLayout fixed at a percentage of the height. Children views can then use that constraint to set their height.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    >

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rcv"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_constraintBottom_toTopOf="@id/guide"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

I'm guessing your ConstraintLayout is meant to contain a RecyclerView?

Upvotes: 3

Related Questions