Resize Image to fit Parent layout height and width

Question

I want to fit an Imageview according to Height and width of my RelativeLayout without disturbing its ratio. I am using a LinearLayout with a weightSum and adding two other layouts ie RelativeLayout with weight 20 and LinearLayout with weight 80. I am adding the imageview to the RelativeLayout to take up weight 20 but currently, my image takes up the width to its content and does not follow the width of the parent, thus resulting in pushing the other layout.

My Layout is as below:

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/order_detail_container"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="16dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="1dp">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:weightSum="100"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20">
            <Droid.CenterFitImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:adjustViewBounds="true"
                android:id="@+id/imgArticleThumb"
                android:src="@drawable/Icon" />
        </RelativeLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="80"
            android:padding="5dp"
            android:orientation="vertical">
            <Droid.CustomTextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/txtCategory"
                card_view:customFont="Fonts/Roboto-Bold.ttf"
                android:textColor="@color/CatTitle"
                android:textSize="12sp"
                android:text="Category" />
            <Droid.CustomTextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/txtTitle"
                   android:ellipsize="end"
                android:singleLine="true"
                card_view:customFont="Fonts/Roboto-Bold.ttf"
                android:textColor="#000000"
                android:textSize="16sp"
                android:text="Title" />

        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

CenterFitImageView.cs

protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
{    
    try
    {    
        if (Drawable != null)
        {
            int w = MeasureSpec.GetSize(widthMeasureSpec);
            int h = (int)Math.Ceiling((float)w * (float)Drawable.IntrinsicHeight / (float)Drawable.IntrinsicWidth);

            SetMeasuredDimension(w, h);
        }
        else
            base.OnMeasure(widthMeasureSpec, heightMeasureSpec);

    }
    catch (Exception e)
    {
        base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
    }    
}

Expected output:

My output:

Answer 1

layout_width="wrap_content" on your root LinaerLayout, is where you have gone wrong. You have to use match_parent if you need your views to be aligned properly according to their weights.

Just remember that if you are using layout_weights and weightSum, then you have to give the root layout and specific width or height depending upon the arrangement. wrap_content, means display your layout, according to whatever size the child is.

So the resulting code will be

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="100"
    android:orientation="horizontal">
    ....
    ....
</LinearLayout>

And this is the output that I got

The first RelativeLayout with the ImageView is taking 20, and the other one with a TextView is taking 80.