Xamarin C# Set View width to % percentage of screen Android

Question

I have this Button that I want to be 25% of the screen width, and square. I have seen some methods of making grids but it has not worked out well. Anyone have any input on the matter? Any more context needs to be described?

Answer 1

The Android.Support.Design packages also provides a nice new layout type called PercentRelativeLayout.

You can get it by adding the Xamarin.Android.Support.Percent NuGet package to your project.

This will enable you to add the PercentRelativeLayout to your layout like:

<android.support.percent.PercentRelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"/>
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%" />
     <!-- more views here -->
</android.support.percent.PercentRelativeLayout>

You can find more information about this layout in the Google API docs.

Answer 2

You can use a horizontal LinearLayout and set the layout_weight of the button to .25 and add an empty view with a weight of .75. Note: Set layout_width to 0.

<LinearLayout
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:text="MyButton" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".25" /> 

    <View
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".75" />
</LinearLayout>

If you want something squared, you have to create a custom layout like:

public class SquareLayout : LinearLayout
{
    protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        var width = MeasureSpec.GetSize(widthMeasureSpec);
        var height = MeasureSpec.GetSize(heightMeasureSpec);

        if (height == 0 && width == 0)
        {
            base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
            return;
        }

        if (height == 0)
        {
            height = width;
        }
        else if (width == 0)
        {
            width = height;
        }

        if (width > height)
            width = height;
        else
            height = width;

        base.OnMeasure(
            MeasureSpec.MakeMeasureSpec(width, MeasureSpecMode.Exactly),
            MeasureSpec.MakeMeasureSpec(height, MeasureSpecMode.Exactly)
        );
    }

    protected SquareLayout(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
    {
    }

    public SquareLayout(Context context) : base(context)
    {
    }

    public SquareLayout(Context context, IAttributeSet attrs) : base(context, attrs)
    {
    }

    public SquareLayout(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)
    {
    }
}

And then use your Layout in your axml

<LinearLayout
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <mynamespacelowercase.SquareLayout
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".25">
        <Button
            android:text="MyButton" 
            android:layout_width="match_parent" 
            android:layout_height="match_parent" /> 
    <mynamespacelowercase.SquareLayout>

    <View
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".75" />

</LinearLayout>

Or you can modify your custom layout to calculate the width depending on a percentage. Then you wouldn't need the empty view and layout weight.