I have tabhost layout where i load my Form Activity(10 inputs in scroll bar). When i start typing on the most bottom inputs, the keyboard shown and the focused input is not shown(the keyboard overlaps the inputs instead of scrolling as normal) and i can't see what am i my typing. When i tried to run the form activity outside tabhost, everything works as normal, i can type and see the inputs focused always. My min API level is 10, max is 17.
Any help or direction highly appreciated.
TabHost Layout:
<?xml version="1.0" encoding="UTF-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:id="#+id/layTab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:gravity="center"
android:background="#00A99D"
android:paddingLeft="0dip"
android:paddingRight="0dip" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center|bottom"
android:padding="0dip" />
</RelativeLayout>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_above="#id/layTab"/>
</RelativeLayout>
Form Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#eee"
android:padding="0dip"
android:layout_alignParentBottom="true">
<LinearLayout
android:id="#+id/body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/header"
android:orientation="vertical" >
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="1"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="2"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="3"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="4"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="5"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="6"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="7"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="8"
android:ems="10" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:imeOptions="flagNoExtractUi"
android:hint="9"
android:ems="10"/>
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="10"
android:ems="10" />
</LinearLayout>
</ScrollView>
</LinearLayout>
When a keyboard pops up, it has 'two visual modes'. FullScreen, meaning that the window in which the keyboard renders is fully overlaying your application or not fullscreen.
In the second case the window, in which your activity displays, is resized. With this resizing, I assume that a TabHost does scale up but the child layouts (in the case your form) are not scaled the same way as if they would be a stand-alone layout.
The Android documentation states that an application using an EditText should be aware of:
Properly set the inputType in your editable text views, so that the
input method will have enough context to help the user in entering
text into them.
Deal well with losing screen space when the input
method is displayed. Ideally an application should handle its window
being resized smaller, but it can rely on the system performing
panning of the window if needed. You should set the
windowSoftInputMode attribute on your activity or the corresponding
values on windows you create to help the system determine whether to
pan or resize (it will try to determine this automatically but may
get it wrong).
You can also control the preferred soft input state
(open, closed, etc) for your window using the same
windowSoftInputMode attribute.
Related
My interface looks like this:
XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/profile_fields_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_person_name_label" />
<EditText
android:id="#+id/person_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_emailId_label" />
<EditText
android:id="#+id/person_emailId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_phoneNo_label" />
<EditText
android:id="#+id/person_phoneNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="10"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_password_label" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_retypePassword_label" />
<EditText
android:id="#+id/retype_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/learner_tutor_status_label" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/learner_tutor_status_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<!--Floating Button-->
<Button
android:id="#+id/create_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/create_account_string"
style="#style/Widget.AppCompat.Button.Colored"/>
</FrameLayout>
Now, you can see at the bottom there is I am here to.... This is a dropdown and when I choose one of the options, my code dynamically adds a few views to the hierarchy but the problem is they are not visible(not all of them; just I am a... is visible.)
I checked the layout hierarchy through the Layout inspector and turns out that the hierarchy is alive but the floating button(Create Account) has overshadowed it.
Now, I know if I were to replace the root FrameLayout with a LinearLayout, it would be visible but the problem is that if then I would click on a EditText button, the keypad would cover the screen with the Create Account button as covered too. I actually want this button to be on the screen at all times.
Does anyone how can I get around this problem?
Your layout is not totally correct because your floating button hides the bottom of your ScrollView all the time. You should replace the FrameLayout with a vertical LinearLayout (just like you said) and then specify the window behavior of your activity when the soft keyboard pops up with the windowSoftInputMode attribute in your activity element on the AndroidManifest.xml file. If you use android:windowSoftInputMode="adjustResize", the window will resize accordingly and the button should be always visible.
I am trying to shift my layout up when soft keyboard will open.
I have edittext and button. I can see edittext clearly whether keyboard is open or not but problem is that i am showing drop down for edittext. When drop down open it open on top of edittext because there is no sufficient space between keyboard and dropdown.
So i am trying to shift my entire screen up (only edittext will show). So can show dropdown below of Edittext.
I try following things...
I add following attribute in my activity in AndroidManifest.xml
android:windowSoftInputMode="adjustPan"
I add following code in my .java file
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
I read somewhere i need to use relative layout. I also try this but none of them helpful.
Here is my xml code for your reference.
<?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="fill_parent"
android:background="#EFEFEF"
>
<ViewStub
android:id="#+id/vsHeader2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inflatedId="#+id/header"
android:layout="#layout/copyofheader" />
<TextView
android:id="#+id/firstPara"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dip"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:text=""
android:textSize="16sp" />
<TextView
android:id="#+id/secondPara"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/firstPara"
android:layout_marginTop="24dip"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:text=""
android:textColor="#666666"
android:textSize="16sp" />
<AutoCompleteTextView
android:id="#+id/mysecondautocomplete"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_below="#id/secondPara"
android:layout_marginLeft="12dip"
android:layout_marginRight="12dip"
android:layout_marginTop="12dip"
android:ems="10"
android:dropDownVerticalOffset="44dip"
android:windowSoftInputMode="stateHidden"
android:dropDownHeight="290dip"
android:imeOptions="actionSearch"
android:drawableLeft="#drawable/search_grey"
android:background="#drawable/borderforloginedittext"
android:drawablePadding="6dip"
android:hint="Enter Restaurant Name"
android:inputType="textPersonName"
android:dropDownWidth="match_parent"
android:textColor="#cc3333"
android:textColorHint="#999999"
android:textSize="16sp" />
I don't understand why my layout not shifting up. Please give me any hint or reference.
UPDATE:
I just re-read your question and found the mistake you are making. You are adding android:windowSoftInputMode="adjustPan" in AndroidManifestfor resizing or scaling the window for the keyboard.
You should use android:windowSoftInputMode="adjustResize" which will resize the window or adjust the window accordingly.
Try this:
<?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"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#EFEFEF"
>
<ViewStub
android:id="#+id/vsHeader2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inflatedId="#+id/header"
android:layout="#layout/copyofheader" />
<TextView
android:id="#+id/firstPara"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dip"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:text=""
android:textSize="16sp" />
<TextView
android:id="#+id/secondPara"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/firstPara"
android:layout_marginTop="24dip"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:text=""
android:textColor="#666666"
android:textSize="16sp" />
<AutoCompleteTextView
android:id="#+id/mysecondautocomplete"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_below="#id/secondPara"
android:layout_marginLeft="12dip"
android:layout_marginRight="12dip"
android:layout_marginTop="12dip"
android:ems="10"
android:dropDownVerticalOffset="44dip"
android:windowSoftInputMode="stateHidden"
android:dropDownHeight="290dip"
android:imeOptions="actionSearch"
android:drawableLeft="#drawable/search_grey"
android:background="#drawable/borderforloginedittext"
android:drawablePadding="6dip"
android:hint="Enter Restaurant Name"
android:inputType="textPersonName"
android:dropDownWidth="match_parent"
android:textColor="#cc3333"
android:textColorHint="#999999"
android:textSize="16sp" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Put your entire layout inside a Scrollview. So when the soft keyboard gets open, your view will get adjusted accordingly.
I was trying to implement a message box similar with that of Hangout. I want the edittext to expand if more content is typed into it, with the button to the right remain at the bottom right corner.
My current implement is as follows. The button to the right will move up if the edit text expands due to "alignParentTop". But if I set "alignParentBottom" as true, the entire screen will get occupied by this relative layout. Any idea how to fix it
<RelativeLayout android:id="#+id/structured_relative_interaction"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#E0E0E0">
<ImageButton android:id="#+id/structured_imagebutton_takePhoto"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:background="#drawable/save_structured_button"
android:src="#drawable/take_photo"/>
<EditText android:id="#+id/structured_edittext_answer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/structured_imagebutton_takePhoto"
android:layout_margin="5dp"
android:gravity="top"
android:maxLines="5"
android:padding="10dp"
android:hint="#string/structured_hint"
android:textColorHint="#B0B0B0"
android:inputType="textCapSentences|textMultiLine">
</EditText>
</RelativeLayout>
I was able to achieve it using the following layout (some ids for images and strings were changed to make it compileable):
<!--suppress AndroidLintUselessParent, AndroidLintContentDescription -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/structured_relative_interaction"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:background="#E0E0E0">
<EditText
android:id="#+id/structured_edittext_answer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/structured_imagebutton_takePhoto"
android:layout_margin="5dp"
android:gravity="bottom"
android:maxLines="5"
android:padding="10dp"
android:hint="hint"
android:textColorHint="#B0B0B0"
android:inputType="textCapSentences|textMultiLine" />
<ImageButton
android:id="#+id/structured_imagebutton_takePhoto"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/structured_edittext_answer"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
Will produce:
Seems it's common issue with ExitText and RelativeLayout (at least, I've seen some similar questions previously).
<EditText
android:id="#+id/write_post"
android:layout_width="match_parent"
android:layout_height="85dip"
android:ems="10"
android:gravity="top"
android:hint="#string/write_post"
android:inputType="textMultiLine"
android:textAppearance="?android:attr/textAppearanceSmall" >
</EditText>
set android:inputType to textMultiLine, android automatically expands edittext if the text exceeds from its boundry.
When I tap on a text field and the keyboard pops up, the upper few fields of my ScrollView hide behind the ActionBar.
If you look at the scrollbar, that is at the very top. That means even if I scroll up now, the elements will not come into view.
I am using ActionBarSherlock. I am not sure if it is the problem with the ABS or with the ScrollView.
Here is the code of my scrollView:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollView_MessageUpdate"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MessengerActivity"
android:scrollbarStyle="outsideOverlay"
android:background="#drawable/repeating_bg"
>
<RelativeLayout
android:id="#+id/RelativeLayout_MessageUpdate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center"
android:background="#drawable/repeating_bg"
>
<EditText
android:id="#+id/txtPostedBy"
android:hint="#string/txtPostedByHint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="12"
android:inputType="none"
android:layout_marginTop="100dip">
<requestFocus />
</EditText>
<EditText
android:id="#+id/txtPostTitle"
android:hint="#string/txtPostTitleHint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtPostedBy"
android:ems="12"
android:layout_marginTop="3dip"
android:inputType="text">
</EditText>
<EditText android:id="#+id/txtMessage"
android:hint="#string/txtMessageHint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="3"
android:gravity="top|left"
android:inputType="textMultiLine"
android:scrollHorizontally="false"
android:layout_alignLeft="#+id/txtPostTitle"
android:layout_alignRight="#+id/txtPostTitle"
android:layout_below="#+id/txtPostTitle"
/>
<EditText android:id="#+id/txtComment"
android:hint="#string/txtCommentHint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="5"
android:gravity="top|left"
android:inputType="textMultiLine"
android:scrollHorizontally="false"
android:layout_alignLeft="#+id/txtPostTitle"
android:layout_alignRight="#+id/txtPostTitle"
android:layout_below="#+id/txtMessage"
/>
<Button
android:id="#+id/btnUpdateMessage"
android:text="#string/btnUpdateText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtComment"
style="#style/styledBuutonNoIcon_text"
android:background="#drawable/styled_inner_form_button"
android:layout_alignLeft="#+id/txtPostTitle"
android:layout_alignRight="#+id/txtPostTitle"
android:layout_marginTop="3dip" />
<Button
android:id="#+id/btnCancelMessage"
android:text="#string/btnCancelText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/btnUpdateMessage"
style="#style/styledBuutonNoIcon_text"
android:background="#drawable/styled_inner_form_button"
android:layout_alignLeft="#+id/txtPostTitle"
android:layout_alignRight="#+id/txtPostTitle"
android:layout_marginTop="3dip" />
<!--
<Button
android:text="#string/btnDeleteText"
android:id="#+id/btnDeleteSchool"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/btnCancelSchool"
style="#style/styledBuutonNoIcon_text"
android:background="#drawable/styled_inner_form_button"
android:layout_alignLeft="#+id/txtSchoolWebsite"
android:layout_alignRight="#+id/txtSchoolWebsite"
android:layout_marginTop="3dip"
/>
-->
</RelativeLayout>
</ScrollView>
Set android:windowSoftInputMode of your activity in AndroidManifest.xml to "adjustPan".
According to Documentation:
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing.
I solved the same problem by removing "center" in the main layout
android:layout_gravity="center"
android:gravity="center"
I have a login screen in the first activity of my android application. When the user selects the password field after filling in the username field the virtual on screen keyboard pops up and blocks the password field. The user is unable to view what they are typing. How can I solve this problem?
Below is my main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout style="#style/LoginScreen" xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff"
>
<ListView android:id="#+id/listView1" android:layout_height="wrap_content" android:layout_width="match_parent"></ListView>
<ImageView android:id="#+id/imageView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="#drawable/logo"></ImageView>
<TextView android:textColor="#000" android:layout_width="wrap_content" android:id="#+id/textView1" android:layout_height="wrap_content" android:text="Enter your Google Account credentials:"></TextView>
<TextView style="#style/LoginLabel" android:layout_width="wrap_content" android:id="#+id/textView1" android:layout_height="wrap_content" android:text="Username:"></TextView>
<EditText android:layout_width="match_parent" android:id="#+id/login_username" android:layout_height="wrap_content"></EditText>
<TextView style="#style/LoginLabel" android:layout_width="wrap_content" android:id="#+id/textView2" android:layout_height="wrap_content" android:text="Password:"></TextView>
<EditText android:id="#+id/login_password" android:layout_height="wrap_content" android:layout_width="match_parent" android:password="true"></EditText>
<Button style="#style/LoginButton" android:id="#+id/login_button" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Login"></Button>
<LinearLayout android:id="#+id/linearLayout1" android:layout_height="wrap_content" android:layout_width="match_parent">
</LinearLayout>
In your manifest you can define how you want the soft keyboard to modify your layout, e.g:
<activity android:name=".YourActivity"
android:windowSoftInputMode="adjustResize"/>
That will resize your components to "best fit". You can also use adjustPan, in that case the visible area will move around to focus on your textbox.
See this.