I'm trying leave a bit of space under the input field when the soft keyboard is open so it does not overlap the submit button.
The lib I'm using to achieve this: https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view
windowSoftInputMode is set to "adjustPan".
It works flawlesly on iOS. On Android the scroll offset gets reset as soon as the user starts typing.
Rough app structure:
<KeyboardAvoidingScrollView
enableOnAndroid
extraScrollHeight={100}
contentContainerStyle={{flex: 1}}>
<Layout>
<Content />
<TextArea />
<SubmitButton />
<Comments />
</Layout>
</KeyboardAvoidingScrollView>
Is it possible to disable this autoscoll behaviour? Or maybe there's a better way to implement this?
Relevant issue:
https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/333
Android has two modes for the keyboard. Mode one is pan. It scrolls the screen such that the cursor is always on screen. In this mode, the keyboard opens on top of your app. The other is resize. In this mode, your app is resized above the keyboard and things are laid out again. This can keep a button at the bottom of your screen, if your app is designed in a very Android specific way
You need resize. That said, I don't know if resize will work well with react native, or think its possible to lay it out correctly in that tech stack. You pretty much have to be doing an Android style layout to make that work.
Related
I would like to use adjustpan in my activity instead of adjustresize, currently the way adjustpan works is if you focus on a keyboard the content pushes upwards, how can set by how much the content is being pushed?
This is how the content looks with adjustpan for example, how can I push it a bit more so the button is not covered by the keyboard without using adjustresize?
You can try out using this:
android:windowSoftInputMode="stateAlwaysHidden|adjustResize"
There isn't any way to do that. The system takes care of it, and there's no input by the app. The only promise is that after the keyboard comes up that the cursor will be visible onscreen.
In practice you probably wouldn't want to do this anyway- different keyboards are different heights, and what you'd want for one won't be right for others.
(You actually probably could do this as the keyboard, since the amount scrolled is controlled by the height of the keyboard, which is determined by the onComputeInsets of the InputMethodService. But its not controlled by the app).
I'm using PhoneGap and JQueryMobile to create a mobile app that I want to deploy to both iOS and Android. The app is simple, and just consists of 3 bars: A header/search bar, a second bar (displays the results of the search), and the remaining screen is a that the user can write in.
Because I want to code my layout to look the same for the greatest # of devices, I've written my CSS for the layout of the app in %'s. Header is 6%, Second bar is 14%, ect. This appears to work decently for the devices I've tested for so far. I ran into an issue where the Android keyboard would squish the viewport height and therefore my layout. So I set the keyboard to resizePan and that solved the squishing issue. However now the bottom of the is not visible until the user closes the keyboard.
In the questions I've seen about that issue, the solution is to swap to "adjustResize" so that the user can scroll when the keyboard is active. I can't do this, because I want to avoid the layout-squish issue.
Is there a way to fix this without having to re-write the CSS? If I HAVE to re-write the CSS, how should I code the layout to look consistent on multiple devices? Do I have to use an extensive list of media queries for all possible devices?
Note: This isn't an issue for ios, because the soft-input keyobard overlays the textarea (like adjustPan) but still allows the user to scroll down and up to parts of the document outside of the view or covered by the keyboard.
Of course there were many similar questions to my problem but none of them worked for me. So,it forced me to open a new question.
So, I am developing an Hybrid mobile app where the main screen contains two independent section with their own input labels. So,when ever the input field got focused the native Android SoftKeyboard pushing the contents of lower section towards up, which eventually decreases the screen size.
Here, I don't want the keyboard to push the content up. The keyboard should be shown but it should be over lay on the section.
I've tried these things already:
android:windowSoftInputMode="adjustNothing", android:windowSoftInputMode="adjustPan" and some jquery code but in vain.
I am not sure it is possible.
However you can work around this, by specifying your element's height with viewport width vw measures.
For example:
div {
height: 40vw;
}
This won't work on landscape however.
You can also hide elements when the keyboard is opened (so instead of them being pushed up, they are just not seen) by assigning the class hide-on-keyboard-open
Like so:
<div class="button hide-on-keyboard-open"></div>
My problem is following.
Application uses theme android:Theme.NoTitleBar.Fullscreen and there is only one Activity, all other views are Fragment
I have WebView inside ViewPager Fragment which is inside ScrollView
HTML content has input fields
I click input field which is on bottom of WebView
Soft input opens, but the Window is not resized/panned
I've tried setting android:windowSoftInputMode="adjustResize" or android:windowSoftInputMode="adjustPan" in my manifest for the Activity. Also tried setting one of those in java.
Normal EditText inside a ScrollView in my application does adjust pan properly so user can see where he/she is typing.
UPDATE:
If there is no working solution to get window adjust, is there a way to get WebView think it's content is like half screen height more bigger so user could at least scroll the input visible.
Okay so this has been an issue from the very beginning and Google hasn't fixed it yet, maybe never. But from the the issue: http://code.google.com/p/android/issues/detail?id=5497 I found potential workaround for this: https://stackoverflow.com/a/19494006/1241783
I have overridden WebView and I simply added the code for it and it is working well enough to get the window adjusted. It is possible though the code doesn't always work because of various screen heights and might need some adjustments, but in many cases it is working okay and I go with that, since it's the only working solution I have seen.
Try this android:isScrollContainer="false" in the ScrollView. According to the Android docx.
Set this if the view will serve as a scrolling container, meaning that
it can be resized to shrink its overall window so that there will be
space for an input method
Hope this will solve your problem
Here is what we have done to make it work.
As it is by design, FLAG_FULLSCREEN activity won't allow adjusting the views when a keyboard is visible, we took an approach with custom Keyboard Notification Listener and OnTouch listener of Webview.
KeyboardHelper.java - to find out the keyboard visibility
Webview Full-Screen Activity Adjustment - To adjust the webview based on the notification and touch point.
Hope it helps!
my code was also not able to resize when keyboard opens.
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/simple_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
/>
i removed (android:scrollbars="none") statement, and it worked ! So that means the app resizes itself only when the container is scrollable. so by default webview containers scrollable area internally.
I have a problem with the animation of the soft-keyboard since ICS. I got an activity for data entry using the soft-keyboard. The window is set to "adjustResize" in order to fit all Views into the screen above the soft-keyboard.
Since Android 4 the fancy animation of opening the keyboard, let's the views on my screen "bounce".
It seems, as if the view is layouted, then the keyboard opens and after this the screen is relayouted, leading to kind of a jumpy UX.
There was a similar question:
( How to show/hide the soft keyboard without any animation (e.g. fade) in Java? )
However, the solution over there does not work for me. (tested on 4.2.1)
I would be glad, if anyone has some clues on achieving one of the following solutions:
Disable the animation of the soft-keyboard for an activity
Retrieve the size of the soft-keyboard in order to set the size of the screen manually
Cheers,
Florian
You can't get the height of soft-keyboard. I don't think there is a need to do so, you can achieve the same use-case by trying different approach.
If you don't want to re-layout screen, you can use android:windowSoftInputMode attribute in-order to have some more control over the screen rendering when soft-keyboard appears.
For Example : If you don't want to resize the view, you can put the following line in manifest file. This will simply display the keyboard on top of the activity.
<activity android:windowSoftInputMode="adjustPan">
You can check other options for desired functionality.
For better understanding and more controls, you can refer this tutorial.
Hope, this will give you some hint about implementing your use-case.