I have a layout with a graphic at the top, an EditText in the middle and a button some distance below it, like so:
When the user is typing in the EditText, I want to pan the layout so that the "Go" button is still visible, even if that means clipping the image off the top, like so:
I know about windowSoftInputMode="adjustPan" in the manifest, but that doesn't work because it only pans far enough for the EditText to be visible. Is there a way to make sure it pans until the button is visible too?
For comments with K_Anas, this is my layout. It has all the extra margins and spacing removed compared to the first screenshot, to remove any other source of problems.
<?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">
<View
android:layout_width="300dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:background="#999"/>
<EditText
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="Sample..."/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Go"/>
</RelativeLayout>
Spoke with the Android developers hangout, and it doesn't seem like there's an easy way to solve this problem. The consensus seems to be reworking the layout rather than having an API to fix the issue.
did you tried:
android:windowSoftInputMode="adjustResize"
in your activity Tag in Manifest
see these docs on android developer blog
I tried your layout with: android:windowSoftInputMode="stateVisible|adjustResize"
and give me these results:
I'm sure it isn't the BEST way, but couldn't you just change the layout attributes for your button (add/change a margin) and redraw when the edittext is clicked? Use an onClickListener & maybe invalidate your button.
Related
I just observed the following behavior on my Nexus 9 with Android 7.1.1 and Android Support Library 25.3.1.
Here is my activity's layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="false"
android:orientation="vertical"
android:paddingBottom="4dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<View
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#fffaaa" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#bbbaaa" />
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#f00" />
</LinearLayout>
</ScrollView>
This is how it looks on the screen:
When the on-screen keyboard shows up, the system resizes my activity's layout so it takes up the space from the top of the screen to the keyboard. Please consider the dashed red line in the screenshot below:
However, when I replace the ScrollView with a NestedScrollView, the system doesn't resize the layout:
Now the dashed red line is below the keyboard. The issue can easily be fixed by applying android:windowSoftInputMode="adjustResize" to the activity:
The red dashed line is above the keyboard now. My questions are:
Why do I observe such a behavior?
What's wrong with NestedScrollView?
The Android docs say:
When the input method appears on the screen, it reduces the amount of
space available for your app's UI. The system makes a decision as to
how it should adjust the visible portion of your UI, but it might not
get it right. To ensure the best behavior for your app, you should
specify how you'd like the system to display your UI in the remaining
space.
This could be an instance of the instability that is referenced.
It looks to me that this isn't an issue with NestedScrollView and ScrollView but is more of an issue with how the Activity is adjusting the UI based on the keyboard. The only difference between NestedScrollView and ScrollView is that NestedScrollView has be ability to be both parent and child. I think that this highlights why you should follow the above advice where it says:
To ensure the best behavior for your app, you should specify how you'd
like the system to display your UI in the remaining space.
ie using android:windowSoftInputMode="adjustResize" always, rather than just when it is needed.
The problem here is not Nested Scroll-view, the problem is Android's Auto adjustment of view when keyboard appears/disappears on Input method's call.
I hope you'll understand the problem in the link given below:
https://developer.android.com/training/keyboard-input/visibility.html
Why You use fix size.
<View
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#fffaaa" />
try with
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="300dp"
android:background="#fffaaa" />
before start anything just make rough paper work what kind of design you want.
try this may be work for you.
I have this layout as my list items:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:orientation="horizontal"
android:minHeight="42.3dp"
android:layout_height="wrap_content">
<TextView android:id="#+id/txtTagName"
android:textColor="#color/White"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginLeft="10dp"
android:textSize="13sp"
android:gravity="center"
android:layout_gravity="left"
android:background="#drawable/tag"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_discard"
android:layout_marginLeft="10dp"
android:layout_gravity="right"
android:gravity="center"
android:scaleType="center"
android:alpha="0.5"/>
</LinearLayout>
It looks like this:
The tag patch 9 looks like so:
I have 3 questions:
How to make the delete icon always on the right.
How to make the blurry part of the tag image scale properly? (its a patch 9)
Is it better to have a delete icon next to the tag, or use some sort of long click?
Thank you.
How to make the delete icon always on the right.
Use RelativeLayout instead of LinearLayout and use the property android:layout_alignParentRIght="true". left and right layout_gravity does nothing in a horizontal LinearLayout since that ViewGroup already lays Views out from left to right.
How to make the blurry part of the tag image scale properly? (its a patch 9)
Not sure without knowing more about the image but should be the same as the other image.
Is it better to have a delete icon next to the tag, or use some sort of long click?
This is relative to the users who will use your app, I suppose. The delete icon I think is fine and is more explicit. However, most users nowadays, especially younger ones may understand to long click depending on how your whole app works. However, since you have the room, I think the delete icon is probably good.
How to make the delete icon always on the right.
in your xml item layout, for your imageview of the delete icon, add android:layout_weight="0"
How to make the blurry part of the tag image scale properly? (its a patch 9)
sorry, no idea
Is it better to have a delete icon next to the tag, or use some sort of long click?
depends on the app, if there will be other options other than delete, then make all of them in long click, otherwise leave the icon, IMHO
I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#EAEAEA">
<ListView
android:id="#+id/xxx"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#464C59"
android:divider="#A4C539"
android:dividerHeight="1px">
</ListView>
<ImageView
android:id="#+id/home_bottom_bar"
android:src="#drawable/bottombar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"/>
</FrameLayout>
The goal is to have some sort of advertising bar at the bottom of the activity (which contains a list of items). It works ok, except for one thing! There is some sort of extra space just under the bar (it's very small but it's noticeable enough). By the way, all the paddings are set to 0 so where does this space come from?
Thanks!
EDIT
After investigating the issue, it turns out that the custom background (#EAEAEA) is causing this extra space. Still don't know how to fix this though.
When you mention that it is a small extra space, it may be the tiny gradient at the top and bottom. Created by ListView, when it is made scrollable.
You may read about ListView Backgrounds, this should give you the idea on how to fix it, if it is caused by this special gradient.
This gradient line can apparently also be removed: extra line in tab host
You may want to use the merge tag since every activitys base layout is a FrameLayout.
(This may cause the padding. Im not 100% sure on this one though)
Look here.
I'm creating an IM client/server application for the Android OS, and am currently putting together the user interface. Right now, my interface consists of a EditText element, and a Button element. When I tap on the EditText element, a keyboard pops up and allows you to type.
What I would like to have is something like the text entry area and send button in the default Android SMS app. Something like this:
The text input field and Send button would stay at the bottom of the screen, and when tapped on, the keyboard would push the text field and button up above it.
Is this possible using only EditText and Button elements?
Thank you for any suggestions or advice!
Try setting android:windowSoftInputMode=adjustResize for the activity in AndroidManifest.xml.
You can find details here.
Is this possible using only EditText and Button elements?
Answer-This type of functionality is possible in any type of view
I give just short tutorial on your question
Generally we use only linearlayout in xml file.But at view level android gives many more feature like Relative layout and much more.At this time we just discuss about the relative layout because it can solve your purpose.
In Relative layout it not use the android:orientation feature like linear layout it used another feature.In relative layout take some points in your mind...
we always give id to every view using android:id="#+id/GiveName"
for alignment of any view we used android:layout_toLeftOf="#id/givesname" same for
right,above and below where givesname=id of that view from which this view is align.
Ex. is gives example with screen shot
After this i give the sample xml file in which you get the above type of feature in your question
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llWriteCommentWall" android:layout_height="fill_parent"
android:layout_width="fill_parent" android:background="#ffffff">
<Button android:id="#+id/btButtonComments"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Comments"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>
<EditText android:id="#+id/etEdittext"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:hint="Write a comment.... "
android:layout_marginLeft="2dip" android:layout_marginRight="2dip"
android:layout_toLeftOf="#id/btButtonComments"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
ScreenShot of above example
In this Example we used android:layout_alignParentBottom="true" - this attribute is the main reason for view like this,it always align any view in bottom even softkeyboard is shown.it contain boolean value,true gives always align bottom and false nothing.
the other relative attribute is android:layout_alignParentRight="true",android:layout_alignParentLeft="true" ,android:layout_alignParentTop="true"-all attribute give feature as written.
Lastly you include this xml file at any java file through setContentView(xmlFileName)
I have a simple user interface: an EditText should be located below a SurfaceView.
I use a RelativeLayout to arrange these two views.
Now, when I tap on the EditText to open the virtual keyboard the SurfaceView slides up but the EditText is hidden and does not show the typed string.
To reproduce, use the following layout XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<SurfaceView
android:id="#+id/SurfaceView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</SurfaceView>
<EditText
android:id="#+id/EditText01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:selectAllOnFocus="true"
android:textStyle="normal"
android:singleLine="true">
</EditText>
</RelativeLayout>
The main Activity class only needs to show the layout. When I start the program and tap the EditText, the virtual keyboard appears but the EditText field is gone.
Maybe the RelativeLayout is causing the problems, but I don't know how to reproduce the same layout with another Layout class.
Any suggestions are welcome, I really appreciate your help.
Thanks.
Edit:
Here are two screenshots, one showing the EditText at the bottom without virtual keyboard, one with virtual keyboard but with no EditText. It is interesting to note that the SurfaceView and the EditText actually shift upward, the EditText just disappears. BTW this also happens to a button if it is next to the EditText.
EditText below a SurfaceView (left); EditText is gone (right)
As a commenter in the thread about this bug suggested, it is very easy to fix this problem by setting the background color of the SurfaceView or GLSurfaceView to transparent with mSurfaceView.setBackgroundColor(Color.TRANSPARENT); as well.
This problem occurred for me when pressing an EditText on Honeycomb (v13) on a Samsung Galaxy Tab 10.1. The issue was that after the GLSurfaceView was resized, in its place was still a black rectangle which was covering the EditText. This solution works by making that erroneous rectangle transparent, so the EditText can be seen.
Add the follow code for your activity in your AndroidManifest.xml
android:windowSoftInputMode="adjustPan"
Yes, it's right!
Add the follow code for your activity in your AndroidManifest.xml android:windowSoftInputMode="adjustPan"
And in your edit text, just add:
android:imeOptions="flagNoFullscreen"
i found that it has different result on different devices，then i use ScrollView as the root view and put the layout into ScrollView, when use fullScreen mode it works fine. and be sure to set android:fillViewport="true" if you still have some problem let me know liananse#163.com