Xamarin Native Android LinearLayout weight applied to a children weird problem

Question

I would like to have the following output. I am giving my code and an image which shows how it currently looks like. I am using MVVMCross with Xamarin Nativ UI for Android.

Required output The top view should take 70% of the space and the below should take 30% of the available space.

The current layout is used in a fragment. So this layout is added as a child to a the framelayout in the activity, hosting this fragment.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center|bottom"
        android:layout_weight=".7">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="Some Text"
            android:gravity="top"            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Add Entry"
            local:MvxBind="Click AddCommand"            />
    </LinearLayout>


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".3">
        <ImageView
            android:src="@drawable/waves"
            android:adjustViewBounds="true"            
            android:layout_width="match_parent"
            android:layout_height="wrap_content"            />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/MilliliterViewContainer"/> <!-- The ml is a custom view which is being inflated and added in this layout from the code behind -->

    </FrameLayout>

</LinearLayout>

Here is the current output, it somehow applied the weight on the child, which is imageview.

Current Output I don't understand why does the image is not being shown in full width? why weight is applied to the image view width? The waves is a vector image.

Answer 1

The default scale type on an ImageView in Android is fitCenter, which seems to tell the Vector Drawable to just kind of fit the height in the center.

If you switch to fitXY it will fill the width.

I also suggest that you re-work your layout to use ConstraintLayout instead to avoid using expensive weights on LinearLayout. This could look something like:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    android:layout_height="match_parent"
    tools:showIn="@layout/activity_main">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.7" />

    <ImageView
        android:id="@+id/waves_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/waves"
        android:scaleType="fitXY"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline" />

    <Button
        android:id="@+id/add"
        android:text="Add Entry"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintWidth_percent="0.6"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/overview"
        android:text="Overview Text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintWidth_percent="0.6"
        app:layout_constraintBottom_toTopOf="@+id/add"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

This flattens the layout significantly, meaning less overdraw and less calculations done to calculate the layout.