Need to resize my webview similar to Cordova/Phonegap when keyboard appears.
Right now as per below code, My input text fields are getting overlayed by device keyboard. I want to squeeze height of webview and make it adjust height above device keyboard.
Activity code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_home">
<include android:id="#+id/head" layout="#layout/header" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="11dp"
android:layout_marginLeft="11dp"
android:layout_marginRight="11dp"
android:layout_marginTop="2dp"
android:layout_below="#id/head"
android:background="#drawable/overlay_bg2"
android:orientation="vertical"
android:padding="9dp" >
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:isScrollContainer="true"/>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleLargeInverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="invisible" />
</FrameLayout>
</RelativeLayout>
Manifest Entries :
Theme android:theme="#android:style/Theme.DeviceDefault.NoActionBar.Fullscreen"
Activity keyboard control android:windowSoftInputMode="adjustResize"
As far as I know, If your activity (or application as a whole) is set to full screen; android:windowSoftInputMode="adjustResize" won't work.
Related
I have a Fragment with nested fragments, using a Viewpager. When the keyboard opens, the RelativeLayout covers the EditText
Is there any way to open the keyboard without the RelativeLayout go up?
Parent Fragment layout:
?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#color/colorBackground"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/vp_service_creation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/rr_semi_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-180dp"
android:layout_centerInParent="true"
android:background="#drawable/half_circle_green"
android:layout_weight="1">
<dk.ostebaronen.droid.viewpagerindicator.CirclePageIndicator
android:id="#+id/pi_circles"
android:layout_marginTop="40dp"
android:layout_centerInParent="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_width="90dp"
/>
</RelativeLayout>
</RelativeLayout>
I have tried different approach for your case.
Option 1:
You can try adjustNothing, but the keyboard will potentially cover your EditText.
<application ... >
<activity
android:windowSoftInputMode="adjustNothing" ... >
...
</activity>
...
</application>
You can refer to the tutorial here
Option 2:
If you want to keep adjustPan for auto push the view up when the EditText is covered by the keyboard, I suggest you add a listener to detect the keyboard visibility. When the keyboard is visible, hide rr_semi_circle layout. When user finish input text and keyboard is hidden, show the rr_semi_circle layout again.
Add ScrollView at the following sample like that.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#color/colorBackground"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.v4.view.ViewPager
android:id="#+id/vp_service_creation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/rr_semi_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-180dp"
android:layout_centerInParent="true"
android:background="#drawable/half_circle_green"
android:layout_weight="1">
<dk.ostebaronen.droid.viewpagerindicator.CirclePageIndicator
android:id="#+id/pi_circles"
android:layout_marginTop="40dp"
android:layout_centerInParent="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_width="90dp"
/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Try this
android:windowSoftInputMode="adjustPan"
in your androidManifest.xml, this will not make the UX to resize the components inside but pan itself and give you the same output you desire.
I am trying to create a chat application. The chat layout currently looks like this
The corresponding layout file is
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.nirmal.chatadapter.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/iconuser"
app:civ_border_width="2dp"
app:civ_border_color="#color/White"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="#dimen/marginLeftForToolbar"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="UserName Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_name"
android:textSize="#dimen/textMedium"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:text="User details Here"
android:layout_marginTop="#dimen/marginTopBottomForBubble"
android:id="#+id/user_details"
android:textSize="#dimen/textSmall"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:layout_marginTop="#dimen/recyclerViewMargin"
android:isScrollContainer="true"
android:id="#+id/chatRecycler"
android:layout_above="#+id/chatBoxAndSend">
</android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_marginBottom="5dp"
android:id="#+id/chatBoxAndSend">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="50dp"
android:maxWidth="50dp"
android:id="#+id/chatBox"
android:paddingStart="#dimen/cardViewPadding"
android:background="#drawable/rounded_chat_box"
android:layout_margin="#dimen/marginForChatBox"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#drawable/oval_button"
android:minWidth="50dp"
android:maxWidth="50dp"
android:text="Send"
android:imeOptions="flagNoExtractUi"
android:id="#+id/chatSendButton"
android:layout_margin="#dimen/marginForChatBox"
android:textColor="#color/Black"
/>
<!--<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
android:background="#drawable/oval_button"
android:layout_marginBottom="#dimen/marginForChatBox"
android:layout_marginTop="#dimen/marginForChatBox"
android:layout_marginEnd="#dimen/marginForChatBox"
/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:id="#+id/send_button"
android:src="#drawable/send"
app:civ_border_width="2dip"
android:layout_marginEnd="#dimen/marginForChatBox"
app:civ_border_color="#color/greenChatColor"/>-->
</LinearLayout>
</RelativeLayout>
</ScrollView>
When I open my soft keyboard the layout looks likes this
I have added this in my manifest file
android:windowSoftInputMode="adjustPan|stateHidden"
The output is not what I expected it to be. I want the recyclerview to dynamically resize in the center of the screen and the Toolbar and the edittext to stay fully visible.
As you can see the toolbar has been pushed up and is not visible even when scrolled. The edittext is hidden partially by the suggestions given by the keyboard. Some of the posts I saw asked me to add a scrollview which I did and still the same result. How can I solve this problem?
If you want to resize RecyclerView on SoftInput open or close then you can use below single line code
((LinearLayoutManager)myRecyclerView.getLayoutManager()).setStackFromEnd(true);
For more read this post: https://trinitytuts.com/tips/resize-recyclerview-on-android-softinput-keyboard-appear/
Hope this code helps you
The flag adjustPan is wrong. Use the adjustResize instead:
android:windowSoftInputMode="adjustResize|stateHidden"
What adjustPan does is equivalent to enlarging a picture more than the screen and then panning - i.e. moving the picture so you see different parts of it. (like a map in google map for instance).
I have a layout, code below
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--some stuff here-->
<LinearLayout
android:id="#+id/layout1"
android:layout_alignParentBottom="true"
android:layout_above="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="fitStart"
android:layout_marginLeft="5dp"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:src="#drawable/ic_menu_send"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--some stuff here-->
</LinearLayout>
</RelativeLayout>
In the above code when keyboard is show i want layout2 to stay in the bottom and layout1 to go up with keyboard. if i add android:windowSoftInputMode="adjustPan|adjustResize" both layout stay in bottom. please help
as you can say this is not work
android:windowSoftInputMode="adjustPan|adjustResize"
just change it this
android:windowSoftInputMode="stateHidden"
and one more thing in your below layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--some stuff here-->
<LinearLayout
android:id="#+id/layout1"
android:layout_alignParentBottom="true"
android:layout_above="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="fitStart"
android:layout_marginLeft="5dp"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:src="#drawable/ic_menu_send"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/colorPrimary">
<!--some stuff here-->
</LinearLayout>
</RelativeLayout>
Keep in Mind :
When you have applied this property android:layout_above="#+id/layout2" to layout1 of your LinearLayout then remove this property android:layout_alignParentBottom="true" you don't require it.
So Now that look like this
<LinearLayout
android:id="#+id/layout1"
android:layout_above="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
Note : I am giving background color and specific height to
LinearLayout 2 for your Understandment.
Output :
Normal Screen
KeyBoard Open Screen.
ImProve :
see the upper Image I make Red Mark that property create the problem otherwise every thing is work fine.
Please use this, and tell me if you find any difficulties
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--some stuff here-->
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/layout2"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<ImageButton
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:scaleType="fitStart"
android:src="#drawable/ic_menu_send" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<!--some stuff here-->
</LinearLayout>
</RelativeLayout>
Use different themes for both the layouts.
such as:
One theme refers to adjustPan for windowSoftInputMode attribute.
and another theme refers to adjustResize for windowSoftInputMode attribute.
The fastest way is hide the layouts when soft keyboard is enable and show them again when the soft keyboard is disabled (layout2 on the xml)
Remove this Line as well
android:windowSoftInputMode="adjustPan|adjustResize"
it will work , this is just a simple way , I'm still searching for you
put this line in your manifest file.
android:windowSoftInputMode="stateHidden"
Remove the android:windowSoftInputMode="adjustPan|adjustResize"
And then Hide the layout2 programmatically when soft keyboard open. When soft keyboard close, again make the layout2 visible.
This will give user an experience exactly you want.I'm not shure there is any other way. But Keep searching. good Luck
I have a difficulty with implementing scroll view while using Theme.Black.NoTitleBar.Fullscreen.
When the user opens the application and click on editText the keyboard opens but the user cannot scroll beneath the edittext.
After many attempts I figured it something to do with the theme I am using (fullscreen)
This is my code .xml:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:fillViewport="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/vieww"
android:layout_width="match_parent"
android:layout_height="1000dp"
android:background="#android:color/holo_green_dark" />
<EditText
android:id="#+id/test_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/vieww" />
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#id/test_edit"
android:background="#android:color/holo_blue_bright" />
</RelativeLayout>
When the keyboard is opened the user cannot see the lowest view beneath the edittext.
What I tried so far:
I played a lot with windowSoftInputMode of the activity I tried combination of adjustResize/adjustPan but nothing seems to work.
I tried to change the container to LinearLayout but it still not working for me
I found a solution here here
The problem with this solution I need to change the minSdk to 19, when the application starts I can see black stripe where has been the title bar.
the other issue is when the user open the keyboard by pressing on edittext the title bar returns
I think you should put the ScrollView in a Relative Layout, so you can fit the size, if the keyboard appears.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/vieww"
android:layout_width="match_parent"
android:layout_height="1000dp"
android:background="#android:color/holo_green_dark" />
<EditText
android:id="#+id/test_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/vieww" />
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#id/test_edit"
android:background="#android:color/holo_blue_bright" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
I am working on an app and have a problem.
I have an vieww like the image below with an image and an edittext field the right position. But when i click on the edittext field and it gets the focus it pushes the other view up.
I have the full screen flag and if i dont use that it works perfect and the image keeps theire position and dont pushed up. I need that with full screen flag.
Is there someone who have some example or can help me. I have used the 'windowSoftInputMode' with all the posibles values.
Here my layout code and examples how it now works and how it needs to be.
xml layout source:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:fillViewport="true"
android:orientation="vertical"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical|none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- layout for images -->
<RelativeLayout
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="top" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/image"
android:contentDescription="TODO"/>
</RelativeLayout>
<!-- layout for edit text -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:layout_alignTop="#id/imageview"
>
<EditText
android:id="#+id/tekstbox"
android:imeOptions="flagNoExtractUi"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Here is the image how i start in the activity
When i click in the edittext field i want my view to react as below:
But when the edittext gots focus it pushes everything up like below:
Does someone know how to solve this with the fullscreen flag on?
Thanks.
User this line of code in your Manifest.xml. In the activity where the problem is occuring
<activity
android:windowSoftInputMode="stateVisible|adjustNothing">
</activity>
Add the below line in your manifest file in activity tag:
android:windowSoftInputMode="adjustResize"
and add ScrollView in your layout file like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:fillViewport="true"
android:orientation="vertical"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical|none" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- layout for images -->
<RelativeLayout
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="top" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/image"
android:contentDescription="TODO"/>
</RelativeLayout>
<!-- layout for edit text -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:layout_alignTop="#id/imageview"
>
<EditText
android:id="#+id/tekstbox"
android:imeOptions="flagNoExtractUi"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Add the below line in your manifest file in activity tag:
android:windowSoftInputMode="adjustPan|stateHidden"