Background
I have an Android view that is created with a custom renderer of a Xamarin.Forms page. Particularly, the page is a stack layout with this custom renderer and some buttons below that. This custom renderer is necessary due to some platform specific code.
For Android, the custom renderer is a RelativeLayout
with another RelativeLayout
nested inside of it. The reason for this is that the library that I'm using takes in a ViewGroup
(which a RelativeLayout
is) and uses it for its purposes. For whatever reason, this library requires that I remove the ViewGroup
when the app is paused and add it back in when the app is resumed. Strange, but it's necessary and works.
The problem
The problem I'm having is that I cannot seem to get this inner RelativeLayout
to fit the size of its parent (the outer RelativeLayout
). I know that the outer RelativeLayout
has the right size, as is visually seen when setting its background or if I pass it to the previously mentioned library (which causes the app to break when backgrounded, which is why the inner RelativeLayout
must be removed and re-added).
What I've tried
I've tried inner.LayoutParameters = new LayoutParams(LayoutParams.FillParent, LayoutParams.Fillparent)
, but then the view takes up the entire screen, covering the buttons that should be at the bottom of the page. The documentation says that this is depreciated, anyway (but fails to mention what I should use instead).
I've also tried inner.LayoutParameters = new Android.Widget.RelativeLayout.LayoutParams(outer.Width, outer.Height)
, which fails because outer.Width
and outer.Height
are zero (even though the component should already be initialized -- maybe because we haven't exited the Xamarin.Forms page's constructor, yet?).
It seems that it's not actually covering the button or anything, but rather that it takes up the entire screen and ends up pushing the button off the screen.
Images to show the problem
Purple is the outer container, green is the inner container.
This is without the inner container. This shows the outer container taking up the expected amount of space:
This is with the inner container using LayoutParams(-1, -1)
. Notice the button at the bottom has now been obscured.
And this is setting a custom size by using LayoutParams(800, 600)
. The purpose is to demonstrate that I can specify arbitrary sizes. However, this is phone resolution dependent and since I don't know the button size, I can't identify a way to pick the appropriate values to use. I also don't have an good way to know what the resolution should be. If I pick a resolution too large, I'll get the same results as the previous picture:
Relevant code
// Outer is static because it's what the custom renderer inserts
public static RelativeLayout Outer { get; private set; } = new RelativeLayout(Forms.Context);
private static RelativeLayout Inner = new RelativeLayout(Forms.Context);
// This method is called by dependency injection after calling InitializeComponent()
// in the Xamarin.Forms page
public void PageStarted()
{
Outer.AddView(Inner);
// For the screenshots
Outer.SetBackgroundColor(Color.Purple);
Inner.SetBackgroundColor(Color.Green);
Inner.LayoutParameters = new LayoutParams(LayoutParams.FillParent, LayoutParams.FillParent);
}
The XAML file looks like:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MobileClient;assembly=MobileClient"
x:Class="MobileClient.VideoPage"
Title="Videochat client">
<StackLayout>
<local:VideoLayoutManager HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<Button x:Name="LeaveButton"
Text="Controls and stuff" />
</StackLayout>
</ContentPage>
Where VideoLayoutManager
is the custom renderer.