How to fix layout_weight in Linear layout?

Question

In my xml file I set each small circle (ImageView) to be the size of 25% of the screen with a Linear View and layout_weights.
Here is a screen shot from my phone(how it is supposed to look):

On my tablet it does not change the size to be 25% of the screen and this is how it looks:

My code consists of three LinearLayouts each containing ImageViews with weights of 0.25 out of 1.
Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    xmlns:ads="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView12"
        android:src="@drawable/circle_big"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <LinearLayout
        android:id="@+id/wrapper"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        >

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.03125">
        </FrameLayout>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:id="@+id/imageView12"
            android:src="@drawable/circle_white"
            android:onClick="changeToScreenSelectLayout"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.09375">
        </FrameLayout>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:id="@+id/imageView12"
            android:src="@drawable/circle_white"
            android:onClick="changeToScreenSelectLayout"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.09375">
        </FrameLayout>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:id="@+id/imageView12"
            android:src="@drawable/circle_white"
            android:onClick="changeToScreenSelectLayout"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.03125">

        </FrameLayout>


    </LinearLayout>
    <LinearLayout
        android:id="@+id/wrapper"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:rotation = "120"
        >

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.03125">
        </FrameLayout>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:id="@+id/imageView12"
            android:src="@drawable/circle_white"
            android:onClick="changeToScreenSelectLayout"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.4375">
        </FrameLayout>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:id="@+id/imageView12"
            android:src="@drawable/circle_white"
            android:onClick="changeToScreenSelectLayout"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.03125">

        </FrameLayout>


    </LinearLayout>
    <LinearLayout
        android:id="@+id/wrapper"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:rotation = "60"
        >

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.03125">
        </FrameLayout>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:id="@+id/imageView12"
            android:src="@drawable/circle_white"
            android:onClick="changeToScreenSelectLayout"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.4375">
        </FrameLayout>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:id="@+id/imageView12"
            android:src="@drawable/circle_white"
            android:onClick="changeToScreenSelectLayout"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.03125">

        </FrameLayout>


    </LinearLayout>

</RelativeLayout>

@cricket_007 As defined [here](https://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#attr_android:layout_weight), weights are **float**s — Phantômaxx, Aug 04 '16 at 18:43
@Rotwang Good to know. Now I can stop finding the greatest common divisor and scaling up the numbers ;D — OneCricketeer, Aug 04 '16 at 18:45
@cricket_007 I prefer using integers, though. Mind that if you just want the items to be **equally dividing** the space (which, I guess, is the 95% of the cases), it's enough to set all the weights to **1**. — Phantômaxx, Aug 04 '16 at 18:48
Yeah.... there is a tendency for people to assume the numbers need to sum to 1. But its just weights, 1:1:1 would product the same exact result as 2.5:2.5:2.5 — w.donahue, Aug 04 '16 at 19:12

w.donahue · Accepted Answer · 2016-08-05T14:32:29.300

You cannot use a png file as your circle_white. You could technically make this work if you choose the correct android:scaleType, but it would result in horribly aliased renderings.

I would first delete your existing pngs (From each resource bucket) since they cannot be used for this. Then make a new file in drawable named "circle_white.xml". Put this in it, this will draw a circle with no intrinsic size. I.E. it will just fill whatever you render it with.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#fff"/>
</shape>

And then change from using ImageView's with a src of circle_white to a HeightMatchesWidthView with the background set to this new @drawable/circle_white. You would need to ensure the Views height matches the width which I did in a view extension below. To use this just make a new class somewhere and paste this in. In xml reference it by instead of having ImageView do com.whatever.HeightMatchesWidthView where the com.whatever is whatever package you put this in.

public class HeightMatchesWidthView extends View {
    public HeightMatchesWidthView(final Context context) {
        super(context);
    }

    public HeightMatchesWidthView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
    }

    public HeightMatchesWidthView(final Context context, final AttributeSet attrs, final int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        setMeasuredDimension(width, width);
    }

    @Override
    protected void onSizeChanged(final int w, final int h, final int oldw, final int oldh) {
        super.onSizeChanged(w, w, oldw, oldh);
    }
}

Instead of the HeightMatchesWidthView you could also use a PercentRelativeLayout instead and use that to force them to be square, and the correct size without having to extend View to add support for forcing square.

@sazzy4o Please see this post http://stackoverflow.com/a/34724737/2308683 — OneCricketeer, Aug 04 '16 at 18:34
I tested it and it seems to work good except all of the circles are stretched into ovals. Do you know how to fix that? — sazzy4o, Aug 04 '16 at 18:59
Yes they would be stretched to ovals unless you force the view's height to match its width. See the later half of my answer. You either need to extend view to make a HeightMatchesWidth view, or use PercentRelativeLayout. Actually let me just paste you over my height matches with view that I use for this sort of thing. — w.donahue, Aug 04 '16 at 19:05
I tried PercentRelativeLayout and I had problems displaying it but the HeightMatchesWidthView worked. Thanks. — sazzy4o, Aug 04 '16 at 22:38

How to fix layout_weight in Linear layout?

1 Answers1