Android : Portrait layout of my app is drawing Views larger on app

I have 2 layouts for the primary screen of a small app I built. One layout is for portrait and one layout is for landscape.

The landscape version looks just how I want it.



Here is the XML code for this layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient"
    android:gravity="center_horizontal|top"
    tools:context=".Main">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">

        <ProgressBar
            android:id="@+id/consumption_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/progressbar"
            android:secondaryProgress="100" />

        <ProgressBar
            android:id="@+id/time_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/progressbar2"
            android:secondaryProgress="100" />

        <TextView
            android:id="@+id/water_consumed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:layout_centerInParent="true"
            android:textColor="@color/white"
            android:fontFamily="sans-serif-light"
            android:textSize="40sp" />

        <TextView
            android:id="@+id/unit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:textColor="@color/white"
            android:layout_centerInParent="true"
            android:layout_below="@id/water_consumed"
            android:fontFamily="sans-serif-light"
            android:text="@string/milliliters_abbrev"
            android:textSize="16sp" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/glass"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/glass"
                android:fontFamily="sans-serif-light" />

            <View
                android:layout_width="@dimen/spacer"
                android:layout_height="@dimen/spacer" />

            <TextView
                android:id="@+id/custom"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/custom"
                android:fontFamily="sans-serif-light" />
        </LinearLayout>

        <View
            android:layout_width="@dimen/spacer"
            android:layout_height="@dimen/spacer" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/small_bottle"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/small_bottle"
                android:fontFamily="sans-serif-light" />

            <View
                android:layout_width="@dimen/spacer"
                android:layout_height="@dimen/spacer" />

            <TextView
                android:id="@+id/large_bottle"
                style="@style/ButtonSmall"
                android:layout_width="80dip"
                android:layout_height="80dip"
                android:gravity="center"
                android:background="@drawable/whitebutton_small"
                android:text="@string/large_bottle"
                android:fontFamily="sans-serif-light" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

The portrait XML is the exact same XML except the top-most LinearLayout has android:orientation="vertical" added to it.

However, when in portrait mode, the progress bars size themselves bigger than the view that contains them.



I suspect this is because half of the screen is not a perfect square, and the View containing the ProgressBar should be a square. Does anyone know how to accomplish my goal here?