How to set fixed aspect ratio for a layout in Android

Question

I am trying to set the width of the layout to "fill_parent" while having the height of the view just the same length, to make the layout a square.

Any suggestions will be appreciated.

Answer 1

With introduction of ConstraintLayout you don't have to write either a single line of code or use third-parties or rely on PercentFrameLayout which were deprecated in 26.0.0.

Here's the example of how to keep 1:1 aspect ratio for your layout using ConstraintLayout:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:background="@android:color/black"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

Or instead of editing your XML file, you can edit your layout directly in Layout Editor:

Answer 2

In your build.gradle add:

compile 'com.android.support:percent:23.1.1'

and in your layout.xml wrap whatever view or viewgroup you want to to follow a ratio inside a PercentFrameLayout where:

android:layout_width="match_parent"
android:layout_height="wrap_content"

and then for the view or viewgroup you want to to follow a ratio replace android:layout_width and android:layout_height:

    app:layout_aspectRatio="178%"
    app:layout_widthPercent="100%"

and you have a view or viewgroup where the aspect ratio is 16:9 (1.78:1) with the width matching the parent and the height adjusted accordingly.

Note: It's important you remove the normal width and height properties. Lint will complain, but it'll work.

Answer 3

You might try initially setting the layout_height to wrap_content. But from there I think you have to go into code. Just to experiment, in your activity try something like:

@Override
public void onResume(){
    super.onResume();
    findViewById(R.id.squareView).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @Override public void onGlobalLayout() {
            View squareView = findViewById(R.id.squareView);
            LayoutParams layout = squareView.getLayoutParams();
            layout.height = squareView.getWidth();
            squareView.setLayoutParams(layout);
            squareView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        }
    });
}

Where R.id.squareView is the id of the view in question. And note, this code is wrapped in the onGlobalLayout call to ensure that squareView.getWidth() has a meaningful value.

Answer 4

I created a layout library for similiar use case. Feel free to use it.

RatioLayouts

Installation

Add this to the top of the file

repositories {
    maven {
        url  "http://dl.bintray.com/riteshakya037/maven" 
    }
}


dependencies {
    compile 'com.ritesh:ratiolayout:1.0.0'
}

Usage

Define 'app' namespace on root view in your layout

xmlns:app="http://schemas.android.com/apk/res-auto"

Include this library in your layout

<com.ritesh.ratiolayout.RatioRelativeLayout
        android:id="@+id/activity_main_ratio_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fixed_attribute="WIDTH" // Fix one side of the layout 
        app:horizontal_ratio="2" // ratio of 2:3
        app:vertical_ratio="3">

Answer 5

If you want to preserve aspect ratio and parent layout must be "wrap_content" (useful for text views with variable text), you can add a fake view, which keeps aspect ratio and other elements must be constrained to this view:

    <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="wrap_content"
        android:layout_height="wrap_content">

    <View
        android:id="@+id/ratio_constraint"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="122:246"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="@id/ratio_constraint"
        app:layout_constraintStart_toStartOf="@id/ratio_constraint"
        app:layout_constraintTop_toTopOf="@id/ratio_constraint"
        tools:text="The TextView which can extend the layout" />

  </androidx.constraintlayout.widget.ConstraintLayout>

Answer 6

LinearLayout ll = (LinearLayout)findViewById(R.id.LL);


int width = ll.getWidth();
LinearLayout.LayoutParams ll_params = new LinearLayout.LayoutParams(width, width);
ll.setLayoutParams(ll_params);

Answer 7

 final RelativeLayout rlMyList = findViewById(R.id.rlMyList);
 rlMyList.postDelayed(new Runnable() {
     @Override
     public void run() {
          int width = rlMyList.getWidth();
          LayoutParams lp = (LayoutParams) rlMyList.getLayoutParams();
          lp.width = width;
          lp.height = (int) (width * 0.67);// in my case ratio 3:2
          rlMyList.setLayoutParams(lp);
     }
 },500);

Answer 8

set height as fill_parent, the width as wrap_content

and you fix the aspect ratio with android:adjustViewBounds="true"