Search code examples
androidandroid-layoutheightandroid-linearlayout

Android LinearLayout height is not proportional to element's width

I want to make layout where my 5 buttons would be placed evenly in a row on any screen size. To accomplish this I've made the following layout:

<FrameLayout 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="@drawable/main_background_v3"
    tools:context="com.magnifi.pennantrace.training.TrainingSelectFragment">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="5"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent">
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_stretch"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_mechanics"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_cardio"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_weights"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_batfield"
                android:layout_weight="1"/>
        </LinearLayout>
    </android.support.constraint.ConstraintLayout>
</FrameLayout>

It did what I wanted, but height is not correct now. All button images a square sized. Here is what I've got:

How do I set height to be appropriate (proportional fitting to button widths)? enter image description here

Solution 
  • <FrameLayout 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="@drawable/main_background_v3"
    tools:context="com.magnifi.pennantrace.training.TrainingSelectFragment">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="5"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent">
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_stretch"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_mechanics"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_cardio"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_weights"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_batfield"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
        </LinearLayout>
    </android.support.constraint.ConstraintLayout>

    </FrameLayout>