How to position a view right above the keyboard? - user-interface

Question

I'm writing a Forms app. How to position a view right at the bottom of the screen and when some entry is focused and the keyboard is visible, the view to be right above the keyboard? On android, it is possible to set Window.SetSoftInputMode(SoftInput.AdjustResize) and that will make the Content resize every time the keyboard is appearing/disappearing. However, I need the status bar to be transparent and SoftInput.AdjustResize doesn't work with WindowManagerFlags.TranslucentStatus. My question is, how do I position a view right above the keyboard without setting SoftInput.AdjustResize?
Take this example:
public Page1()
{
InitializeComponent();
var al = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var button = new BoxView {Color = Color.Red, VerticalOptions = LayoutOptions.EndAndExpand};
var entry = new Entry {HorizontalOptions = LayoutOptions.Fill};
al.Children.Add(entry);
al.Children.Add(button);
Content = al;
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
}
If you run this code, when you'll press the input, nothing will change, the "button" will remain on the bottom of the screen not visible because of the overlaying keyboard.
If we add Window.SetSoftInputMode(SoftInput.AdjustResize) in MainActivity's onCreate it works fine, the box is moved above the keyboard on entry's focus.
Also, if we change Content = al; to Content = new ScrollView {Content = al};, it works fine.
However, if we add Window.AddFlags(WindowManagerFlags.TranslucentStatus); in MainActivity's onCreate, none of those methods work anymore.
Thanks in advance.

Answer 1

I'm writing a Forms app. How to position a view right at the bottom of
the screen and when some entry is focused and the keyboard is visible,
the view to be right above the keyboard?
If you are using Xamarin Forms, then wrapping your UI elements in a ScrollView should do the trick. Something like this if you are using XAML:
<ScrollView>
<ScrollView.Content>
// Your Original XAML content here
</ScrollView.Content>
<ScrollView
EDIT:
Looking at the example you just added, I THINK I know what is happening. So, the ScrollView Trick only works for elements that require keyboard input. I.e if you instead had an entry element at the bottom of the screen, and wrapped everything in a ScrollView like I suggested, then the keyboard should push the entry element up for you. However in your case you have a boxview at the bottom of the screen, which the keyboard simply runs over.
What you have for Content.SizedChanged is a good idea, however I don't think the size of the view actually changes when the keyboard pops up (at least, Content.SizeChanged isn't called when the keyboard pops up), so that part of your code is really only called on loading of the page from the MCVE you provided.
HOWEVER, I was able to move the 'button' up when the keyboard appears by doing this:
Replace
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
With
entry.Focused += (sender, e) =>
{
button.TranslationY -= 120;
};
You may have a heck of a time getting that magic translation number for all the different devices and orientations though. When I tested it on the iPhone 6 simulator I had to push way above 120 before I could see it above the keyboard.
Hope that helps!