How to set size of layouts in Android as a percentage of the sceen size

Question

I have a ConstraintLayout with an inner ConstraintLayout and a inner linear layout in Android. Here you can see my code:

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

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_marginTop="@dimen/_5sdp"
        android:layout_marginBottom="@dimen/_8sdp"
        android:layout_width="@dimen/_235sdp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:background="@drawable/rim"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.93"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.75">

    </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/innerConstraintLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/linearLayout"
        app:layout_constraintEnd_toStartOf="@+id/linearLayout"
        android:layout_marginLeft="@dimen/_10sdp"
        android:layout_marginRight="@dimen/_30sdp"
        android:background="@drawable/rim"
        android:padding="12dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/linearLayout"
        >

        <TextView
            android:id="@+id/textView_Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Inner Constrained Layout"
            android:textColor="#000000"
            android:textSize="@dimen/_10ssp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button_okay"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:background="@color/colorGreen"
            android:text="Okay"
            android:textAllCaps="false"
            android:textColor="#121212"
            android:textSize="@dimen/_8ssp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.553"
            app:layout_constraintStart_toStartOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

The problem is that the two layouts have different proportions when being displayed on different screens (see screenshot):

This does not look good as depending on the used device the layouts look quite different regarding their proportions (width and height). Now my question is whether there is a way of just setting the layouts' width and height generally as a percentage of the screen size and thus make the proportions of the width and height of layouts independent of the screen size? Or how else would you design layouts sucht that their proportions between width and height is more or less independant of the screen size?

I'd appreciate every comment and will be happy if you share your experience on that issue?

Answer 1

Now my question is whether there is a way of just setting the layouts' width and height generally as a percentage of the screen size

It can be done using constarintLayout like this:

• Take any view, give it android:layout_height="0dp" - now it will respect your constraints, in additions add to it app:layout_constraintHeight_percent="0.15"

Now the view got the height of 15% of the parent size.

• the same can be done for the width android:layout_width="0dp" together with app:layout_constraintWidth_percent="0.5" and now your view will take 50% of your parent size.

You can combine those 2 like this:

 android:layout_width="0dp"
 android:layout_height="0dp"
 app:layout_constraintWidth_percent="0.5"
 app:layout_constraintHeight_percent="0.15"

Now your view is both 15% of the parent Width and 50% the parent height, change those numbers and you can control your view size according to your needs.