Placing UI elements "on top of each other" using FlexLayout in Xamarin.Forms

Question

My goals:

1. Place an Editor inside of a Frame, and the editor never expand outside of the frame, no matter how much text is supplied.
2. Place an ActivityIndicator 'inside' a Button (and make the Button text not visible when IsBusy).
3. Make it relative for different sized devices.

My questions

1. Is there a way to make these controls appear 'on top' of each other using FlexLayout?
2. Could there be another, more appropriate, layout for my problem?

---

Current setup:

---

What I'd like it to look like:

---

The current XAML

<!--  This is where the main content on the slide up menu starts  -->
        <Frame
            Grid.Row="1"
            BorderColor="white"
            CornerRadius="0"
            HasShadow="True"
            OutlineColor="White">

            <FlexLayout
                AlignItems="Center"
                Direction="Column"
                JustifyContent="SpaceEvenly">

                <!--  Title  -->
                <Label
                    Grid.Row="0"
                    FontAttributes="Bold"
                    FontSize="Medium"
                    HorizontalOptions="Center"
                    HorizontalTextAlignment="Center"
                    Text="{util:Translate Viewtitle}" />

                <!--  Scrollable text  -->
                <ScrollView
                    x:Name="ActionViewScroller"
                    Grid.Row="1"
                    Margin="10"
                    HorizontalOptions="Fill"
                    VerticalOptions="Center"
                    VerticalScrollBarVisibility="Always">
                    <Label Text="{Binding ActionText}" />
                </ScrollView>

                <!--  Text box for optional notes  -->
                <Frame
                    Grid.Row="2"
                    Margin="10"
                    BackgroundColor="White"
                    BorderColor="LightGray"
                    CornerRadius="0"
                    FlexLayout.Gorw="1"
                    HasShadow="False"
                    WidthRequest="280" />
                <Editor
                    x:Name="ActionViewNotes"
                    Grid.Row="2"
                    Margin="15"
                    AutoSize="TextChanges"
                    FlexLayout.Grow="1"
                    HorizontalOptions="FillAndExpand"
                    IsSpellCheckEnabled="True"
                    Keyboard="Default"
                    MaxLength="150"
                    Placeholder="{util:Translate PlaceholderText}"
                    Text="{Binding ConsentNotes, Mode=OneWayToSource}"
                    VerticalOptions="Center"
                    WidthRequest="280" />


                <!--  Submit Button  -->
                <Button
                    Grid.Row="3"
                    AlignSelf="Stretch"                      
                    Command="{Binding DoSomething}"
                    CommandParameter="{Binding Source={Reference TheNotes}, Path=Text}"
                    HeightRequest="70"
                    HorizontalOptions="FillAndExpand"
                    IsVisible="{Binding IsBusy, Converter={StaticResource NegateBooleanConverter}}"
                    Style="{StaticResource TertiaryButtonStyle}"
                    Text="{util:Translate DoSomethingText}"
                    WidthRequest="350" />
                <ActivityIndicator
                    Grid.Row="3"
                    Margin="5"
                    HorizontalOptions="Center"
                    IsRunning="{Binding IsBusy}"
                    IsVisible="{Binding IsBusy}"
                    Style="{DynamicResource BaseActivityIndicatorStyle}" />

            </FlexLayout>
        </Frame>

---

Answer 1

1.Is there a way to make these controls appear 'on top' of each other using FlexLayout?

Yes, you can put the editor on top of Frame in your case. It is the same as you put a Frame inside a Flexlayout. I added some backgroundColor to the controls to make it clear.

Here is a example of put the editor inside Frame:

 <StackLayout>
        <!-- Place new controls here -->
        <Frame
            Grid.Row="1"
            BorderColor="white"
            CornerRadius="0"
            HasShadow="True"
            OutlineColor="White">

            <FlexLayout
                AlignItems="Center"
                Direction="Column"
                JustifyContent="SpaceEvenly">

                <!--  Title  -->
                <Label
                    Grid.Row="0"
                    FontAttributes="Bold"
                    FontSize="Medium"
                    HorizontalOptions="Center"
                    HorizontalTextAlignment="Center"
                    BackgroundColor="Green"
                    Text=" Viewtitle" />

                <!--  Scrollable text  -->
                <ScrollView
                    x:Name="ActionViewScroller"
                    Grid.Row="1"
                    Margin="10"
                    HorizontalOptions="Fill"
                    VerticalOptions="Center"
                    VerticalScrollBarVisibility="Always">
                    <Label Text="123" />
                </ScrollView>

                <!--  Text box for optional notes  -->
                <Frame
                    Grid.Row="2"
                    Margin="10"
                    BorderColor="LightGray"
                    CornerRadius="0"
                    FlexLayout.Grow="1"
                    HasShadow="False"
                    WidthRequest="280"
                    BackgroundColor="Red">

                    <!--  Put your Editor inside Frame here  -->          
                    <Editor
                    x:Name="ActionViewNotes"
                    Grid.Row="2"
                    Margin="15"
                    AutoSize="TextChanges"
                    FlexLayout.Grow="1"
                    HorizontalOptions="FillAndExpand"
                    IsSpellCheckEnabled="True"
                    Keyboard="Default"
                    MaxLength="150"
                    Placeholder="PlaceholderText"
                    VerticalOptions="Center"
                    WidthRequest="280"
                    BackgroundColor="AliceBlue"/>

                </Frame>
            </FlexLayout>
        </Frame>
    </StackLayout>

2.Could there be another, more appropriate, layout for my problem?

There are several ways to achieve the layout for your problem. You can use StackLayout,AbsoluteLayout,RelativeLayout,Grid and so on. In my opinion, which to choose depending on yourself. Each way has its own advantages. Flexlayout is more conveniently to arrange its children horizontally and vertically in a stack.

You can refer to the official documents about layout.There are several demos similar with your layout and you can get the advantages of each layout option from there.

Layouts