Currently, I have a few Android xml layouts with multiple Textviews that data can be entered into. At the bottom of the relative layout is a button with the attribute android:layout_alignParentBottom="true" with the text "Save Changes", which is expected to display above the keyboard, when the keyboard pops up.
However, when clicking on a textview towards the bottom of the list, once focused, the "Save Changes" button is overlapping with the focused Textview.
Note: it IS possible to manually scroll down a bit more yourself, to then see the Textview.
Ideally the functionality here would be to adjust the scrollTo() to effectively scroll to the focused element and place it into view just above the "Save Changes" button.
I've tried setting this value in the activitys attributes in the manifest:
android:windowSoftInputMode="adjustResize"
Along with wrapping the Relative Layout in a LinearLayout, or adding padding to the bottom of the ScrollView to no avail.
Here's my current XML excluding the Title bar:
<ScrollView
android:id="#+id/edit_info_section"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:layout_below="#id/activity_title_border_bottom">
<LinearLayout
android:id="#+id/edit_info_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/huge_padding"
android:layout_marginBottom="#dimen/huge_padding">
<TextView
android:id="#+id/account_firstname_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/label_firstname"
style="#style/label_text"/>
<EditText
android:id="#+id/account_firstname_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text"
android:maxLines="1"
style="#style/EditTextStyle" />
<TextView
android:id="#+id/account_lastname_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/label_lastname"
style="#style/label_text"/>
<EditText
android:id="#+id/account_lastname_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text"
android:maxLines="1"
style="#style/EditTextStyle" />
<TextView
android:id="#+id/account_phone_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/label_phone"
style="#style/label_text"/>
<EditText
android:id="#+id/account_phone_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="phone"
android:maxLines="1"
style="#style/EditTextStyle" />
<TextView
android:id="#+id/account_email_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/label_email"
style="#style/label_text"/>
<EditText
android:id="#+id/account_email_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress"
android:maxLines="1"
android:layout_marginBottom="#dimen/activity_vertical_margin"
style="#style/EditTextStyle" />
<TextView
android:id="#+id/account_password_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/label_password"
style="#style/label_text"/>
<EditText
android:id="#+id/account_password_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword"
android:maxLines="1"
android:layout_marginBottom="#dimen/activity_vertical_margin"
style="#style/EditTextStyle" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/save_changes"
android:background="#drawable/button_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/save_changes"
android:textColor="#color/White"
android:textStyle="bold"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
style="style/Widget.AppCompat.Button.Colored"/>
</RelativeLayout>
What would be the best way to scroll to the focused textview, while still showing the "Save changes" button above the keyboard?
Any ideas are greatly appreciated!
It looks like your layout is approximately:
<RelativeLayout>
<ScrollView>
...
</ScrollView>
<Button/>
</RelativeLayout>
The problem with this structure is that the ScrollView fills the whole screen. In other words, a portion of the ScrollView is always "behind" the Button... it's just only problematic when the keyboard comes up.
Instead, I think you should use this layout:
<LinearLayout
android:orientation="vertical"
...>
<ScrollView
android:layout_height="0dp"
android:layout_weight="1"
...>
...
</ScrollView>
<Button/>
</LinearLayout>
By doing this, you make sure that it's impossible to have content in your ScrollView go behind your button, but you still get the Button pushed all the way to the bottom of the screen.
Related
I have strange problem. When I set Text Alignment of my EditText to center the keyboard is not lifting it up. EditText stays behind the keyboard ( is hidden). Why is that? What I should do to lift the EditText above the keyboard. EditText is placed in LinearLayout and that all is placed in FrameLayout at the bottom. Thank you!
Edit (code of layout):
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProfileChooseActivity"
android:scrollIndicators="none"
android:background="#drawable/bg_run4">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<LinearLayout
android:orientation="vertical"
android:layout_width="233dp"
android:layout_height="159dp"
android:layout_gravity="start|bottom"
android:layout_margin="10dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/profileNameEditText"
android:layout_margin="10dp"
android:backgroundTint="#97f8720b"
android:hint="#string/profile_name"
android:textCursorDrawable="#null"
android:layout_marginTop="20dp"
android:textColor="#3d3131"
android:textAlignment="center"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/enter_profile"
android:id="#+id/enterProfileButton"
android:layout_gravity="center_horizontal"
android:background="#97f8720b"
android:singleLine="false"
android:clickable="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
</LinearLayout>
</FrameLayout>
I replicated the layout file as you described and everything is working. May be there is a problem with your layout.
<?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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<EditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:textAlignment="center"/>
</LinearLayout>
</FrameLayout>
Since picture is worth a thousands words:
So I want my first LinearLayout to act something like a action bar, not being pushed up by keyboard. I tried android:isScrollContainer="false" and adding in manifest "adjustPan" or "adjustResize", but i don't get what i want.
Here is my XML:
<!-- layout 1 -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/caller_info"
android:layout_alignParentTop="true"
android:isScrollContainer="false"
android:layout_marginTop="#dimen/last_message_margin">
<TextView android:text="#string/hello_world" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txt_caller_name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginLeft="#dimen/side_margins"
android:layout_marginStart="#dimen/side_margins"/>
</LinearLayout>
<!-- layout 2 -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/dialog"
android:layout_below="#+id/caller_info"
android:layout_above="#+id/write_msg_layout">
</LinearLayout>
<!-- layout 3 with edit text -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:id="#+id/write_msg_layout">
<EditText
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="#dimen/side_margins"
android:layout_marginStart="#dimen/side_margins"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text"
android:hint="Write Msg"
android:textColorHint="#color/grey_as_clouds"
android:background="#color/white_as_stone"
android:imeOptions="actionSend"
android:singleLine="true" />
</LinearLayout>
Finally got it. You must surround your view with ScrollView and use adjustResize.
And delete android:isScrollContainer="false".
I'm fiddling around with writing android apps and what I'm currently trying to do is to have a text box with a send button at the top of the page and a black button bar at the bottom.
I understand from this question that the correct way to do this would be to write something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_height="wrap_content"
<EditText android:id="#+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
android:hint="#string/edit_message"
android:layout_gravity="top|center"/>
<Button
android:layout_width="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage"/>
</LinearLayout>
<LinearLayout android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
style="#android:style/ButtonBar">
<Button android:id="#+id/saveButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/menu_done" />
<Button android:id="#+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/menu_cancel" />
</LinearLayout>
</LinearLayout>
but the black bar and the text box just end up on top of each other :(
I'm not sure if these are cut-and-past errors, but I noticed a few things in the xml. The first nested linear layout is missing a '>' before the EditText and doesn't specify a layout_height. And the first button also doesn't have a layout_height.
How can I format a header, a list, and an EditText so that the EditText is a fixed single line and always visible?
Here is my layout with only one list entry - EditText fills the rest of the screen which looks bad.
Here is the layout with several list entries - the soft keyboard hides the text being typed. I was typing in Wayne.
I have tried a various Linear and Relative layouts. Here is my current Layout:
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/select_child_header"
style="#style/headerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/start_blue"
android:text="Which child did you take a picture of?" />
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/modchild_fragment"
android:name="com.chex.control.ChildList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/select_child_header"
android:focusable="true"
android:focusableInTouchMode="true" >
</fragment>
<EditText
android:id="#+id/new_child"
style="#style/editTextStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/modchild_fragment"
android:hint="new child name"
android:inputType="text"
android:singleLine="true" />
</RelativeLayout>
I appreciate any advice on how to format this screen.
For this you have a two options one is In textview there is a tag called android:singleLine="true" if you do like this the text comes in a single line and it miss the some text and show some dots..
And another way is you have to decrease the fontsize.. by using this tag..android:textSize="3sp"
Try this way
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/select_child_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Which child did you take a picture of?" />
<fragment
android:id="#+id/modchild_fragment"
android:name="com.chex.control.ChildList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:focusable="true"
android:focusableInTouchMode="true" >
</fragment>
<EditText
android:id="#+id/new_child"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/modchild_fragment"
android:hint="new child name"
android:inputType="text"
android:singleLine="true" />
</LinearLayout>
Set
android:ellipsize=end
android:singleLine="true"
Change the order and positioning of your elements:
add first the header on top
add the bottom edittext
add the fragment in-between
Something like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/select_child_header"
style="#style/headerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/start_blue"
android:text="Which child did you take a picture of?" />
<EditText
android:id="#+id/new_child"
style="#style/editTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:hint="new child name"
android:inputType="text"
android:singleLine="true" />
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/modchild_fragment"
android:name="com.chex.control.ChildList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/new_child"
android:layout_below="#id/select_child_header"
android:focusable="true"
android:focusableInTouchMode="true" >
</fragment>
</RelativeLayout>
Add
android:maxLines="1"
to your EditText, to get desired number of lines .
You can set the static height to the Fragment. So that if your list item say for example, one or more than 5 also, your edit text constitutes the bottom layer of fragment.
Also, you can set android:singleLine="true" property to edittext.
There is a very high possibility that a question similar to this has been asked earlier, but I couldn't figure out the related keywords to find the same.
I am making an application, and the layout I designed is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".Scheduler" >
<EditText
android:id="#+id/addressee"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/addresseeHint"
android:inputType="number" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2" >
<EditText
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/scheduleDate"
android:inputType="date" />
<EditText
android:id="#+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/scheduleTime"
android:inputType="time" />
</LinearLayout>
<EditText
android:id="#+id/smsText"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top"
android:hint="#string/smsTextHint"
android:inputType="text" />
<Button
android:id="#+id/scheduleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="#string/scheduleTextButton" />
</LinearLayout>
The layout which appears is as below:
What I want will look something like this:
The problem is the Button at the bottom (id:scheduleText) disappears, reason being the layout_height parameter of the EditText set just above it is fill_parent. But I guess I can't provide any particular value to it as then the layout will look different on different devices ?
How can I fix this bug ?
Thanks
Hi your EditText has a height of fill parent which makes it fill the parent and the button won't be visible so make it like this:
<EditText
android:id="#+id/smsText"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="#string/smsTextHint"
android:inputType="text" />
UPDATE:
I updated the answer to extend the edit text and fill the screen but let space for the button as well. The trick is to use weight..