i am developing an application which has a general text entry form. So
while testing on my moto droid, i am facing a strange issue-- when i
touch an input field ( which is at lower end of the screen) -- the on
screen keyboard pops up and hides the input field. So user have to
enter blindly. So is this a sdk issue OR it is particular for droids
OR am i doing something wrong???
I have tested this same form on G1, Hero..i see no issues at all.
Please help...
Layout xml file -- `
<TextView android:id="#+id/textmsg" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Some text"
android:layout_marginTop="10px" android:textColor="#ffffff"
android:textSize="15px" android:layout_marginLeft="10px"
android:layout_marginRight="10px" />
<EditText android:id="#+id/textstreet1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginTop="15px"
android:layout_below="#+id/textmsg" android:textColor="#000000"
android:textSize="20px" android:gravity="center_vertical"
android:layout_marginLeft="10px" android:paddingLeft="5px"
android:layout_marginRight="10px" />
<EditText android:id="#+id/textstreet2" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginTop="2px"
android:layout_below="#+id/textstreet1" android:textColor="#000000"
android:textSize="20px" android:gravity="center_vertical"
android:layout_marginLeft="10px" android:paddingLeft="5px"
android:layout_marginRight="10px" />
<EditText android:id="#+id/textcity" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginTop="2px"
android:layout_below="#+id/textstreet2" android:textColor="#000000"
android:textSize="20px" android:gravity="center_vertical"
android:layout_marginLeft="10px" android:paddingLeft="5px"
android:layout_marginRight="10px" />
<EditText android:id="#+id/textstate" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginTop="2px"
android:layout_below="#+id/textcity" android:textColor="#000000"
android:textSize="20px" android:gravity="center_vertical"
android:layout_marginLeft="10px" android:paddingLeft="5px"
android:layout_marginRight="10px" />
<EditText android:id="#+id/textzip" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginTop="2px"
android:layout_below="#+id/textstate" android:textColor="#000000"
android:textSize="20px" android:gravity="center_vertical"
android:layout_marginLeft="10px" android:paddingLeft="5px"
android:layout_marginRight="10px" />
<EditText android:id="#+id/textcrossstreet"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="2px" android:layout_below="#+id/textzip"
android:textColor="#000000" android:textSize="20px" android:gravity="center_vertical"
android:layout_marginLeft="10px" android:paddingLeft="5px"
android:layout_marginRight="10px" />
<EditText android:id="#+id/textdi" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginTop="2px"
android:layout_below="#+id/textcrossstreet" android:textColor="#000000"
android:textSize="20px" android:gravity="center_vertical"
android:layout_marginLeft="10px" android:paddingLeft="5px"
android:layout_marginRight="10px" />
</RelativeLayout>
`
I just want to say that I had the EXACT SAME problem and the solution "for me" was given by synic. I had to update my manifest with the following:
<activity android:name=".MyActName" android:softInputMode="adjustResize" ... />
Prior to this, I had a EditText field anchored to the bottom, but when focus is entered, the keyboard would launch and cover my field. Also, the available view that is scrollable didn't allow me to see either the absolute TOP or absolute BOTTOM of my scrollable view. It just seemed like the view wasn't resizing correctly.
Thanks to synic
Try enclosing your RelativeLayout inside a ScrollView. THen you just scroll up and down to the fields you want to edit. I do have a problem with right now that I'm looking for an answer, the top item is half hidden under the Screen title, but I don't think it's an issue with what I suggested.
The behaviour you're getting is sort of necessary. There may be a phone without a keyboard. I did notice that if you go to landscape, the keyboard goes away. Guess they assume that in Landscape mode, the physical keyboard will be there.
I'm new to this environment, so maybe thre are better ways, but this is working for me.
Have you tried putting adding below to the #+id/textmsg
android:layout_gravity="top"
or
try using a linearlayout instead of a relativelayout. It doesn't seem like you need a relative layout since all of the items are being stacked vertically.
I think you want: https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft
You can specify which softinput method your activity uses in your manifest.
Something like <activity android:softInputMode="adjustPan" android:name... /> will make Android try to pan the currently focused input field into view, or you can use adjustResize to have it try to resize the entire layout to fit the keyboard (this requires that your layout has a ListView or a ScrollView that can be resized.
Related
I am having an activity in android where there is an editbox and 3 buttons below the editbox. Please see attachment. When this activity is launched, the default state is STATE1.(Please see image). The keyboard is visible by default. Now when I press the back button or dispose the keyboard, I wish to have the edittext resized and occupy the whole screen as shown in STATE2.
I am not sure how to accomplish this. I have the height of the edittext hardcoded to some dp based on the target device. I believe this has to be changed. Can anyone help me in how to accomplish this.
The XML of the layout file is below as well as the screencap
<?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:background="#FFFFFF" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/EditMessage"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#drawable/newback"
android:gravity="top"
android:imeOptions="actionDone"
android:inputType="textMultiLine|textFilter|textVisiblePassword|textNoSuggestions"
android:maxLength="200"
android:padding="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/PostMessage"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_weight="1"
android:layout_marginRight="0.2dp"
android:background="#drawable/newbutton_corner"
android:text="#string/SubmitMessage"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<Button
android:id="#+id/CancelMessage"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_weight="1"
android:layout_marginRight="0.2dp"
android:background="#drawable/newbutton_corner"
android:text="#string/CancelMessage"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<Button
android:id="#+id/DeleteMessage"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_weight="1"
android:background="#drawable/newbutton_corner"
android:text="#string/DeleteMessage"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Change your EditText as follows:
<EditText
android:id="#+id/EditMessage"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:imeOptions="actionDone"
android:inputType="textMultiLine|textFilter|textVisiblePassword|textNoSuggestions"
android:maxLength="200"
android:padding="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
/>
Add layout_weight = 1
In my opinion you do not need adjustPan. I will leave it upon you to decide. The behaviour will be different and you can try it out. Here is what the documentation says about adjustPan:
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. This is generally less desirable
than resizing, because the user may need to close the soft keyboard to
get at and interact with obscured parts of the window.
Your buttons at the bottom may get hidden if using this. Instead use adjustResize:
Put this line in the activity inside AndroidManifest
android:windowSoftInputMode="stateVisible|adjustResize"
Try this.. in your manifest.
<activity
android:name="Activity"
android:windowSoftInputMode="adjustPan"/>
and your edittext use <requestFocus /> for from that start itself it'll focus
and android:layout_weight="1" it will automatically fill the screen.
<EditText
android:id="#+id/EditMessage"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#696969"
android:gravity="top"
android:imeOptions="actionDone"
android:inputType="textMultiLine|textFilter|textVisiblePassword|textNoSuggestions"
android:maxLength="200"
android:padding="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
>
<requestFocus />
</EditText>
Yes you can do that, its simple.
android:windowSoftInputMode="adjustResize" ,, add this attribute to you manifiest under required activity
Set width and height of your text view to match_parent
Done.
add android:windowSoftInputMode="adjustPan" and change android:layout_height="150dp" to android:layout_height="fill_parent"
I know there are a few questions about this on SO but I haven't found one to solve my exact issue, nor have I been able to figure it out from other answers.
I have a layout with a few EditText boxes, and the bottom of which is fairly big and stretches from about halfway down the page to the bottom. When I activate the keyboard, this EditText is then shrunk to reach just above where the keyboard stops. This isn't an issue on devices with larger screens, but on some of the older devices I can see that the box is barely visible.
Is there a way that I can wrap my layout into a ScrollView to allow the box to stay the same size, and let the user just scroll the page to see any items hidden by the keyboard (i.e. making the area above the keyboard the "window" but keeping the same sized views inside)?
A good example of what I mean is in the HTC's Mail setup screen where when creating a new account, you can scroll the screen to see the content hidden behind the keyboard when it's active. There are probably others, but that came to mind.
Here is the XML for my page, as you can see it's quite simple (my Strings are placeholders, so nobody point that out :P).
<?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:fillViewport="true" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Contact Us"
android:textAppearance="?android:attr/textAppearanceLarge" />
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_alignLeft="#+id/title"
android:layout_alignRight="#+id/title"
android:layout_below="#+id/title"
android:background="#000000" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/title"
android:layout_marginLeft="20dp"
android:layout_marginTop="6dp"
android:text="Your Email:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editTextFrom"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignLeft="#+id/email"
android:layout_below="#+id/email"
android:layout_marginRight="20dp"
android:layout_marginTop="6dp"
android:background="#drawable/bordered"
android:ems="10"
android:inputType="textPersonName"
android:paddingLeft="3dp"
android:paddingRight="3dp" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/subject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editTextFrom"
android:layout_below="#+id/editTextFrom"
android:layout_marginTop="6dp"
android:text="Your Subject:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editTextSubject"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignLeft="#+id/subject"
android:layout_below="#+id/subject"
android:layout_marginRight="20dp"
android:layout_marginTop="6dp"
android:background="#drawable/bordered"
android:ems="10"
android:inputType="textCapSentences"
android:paddingLeft="3dp"
android:paddingRight="3dp" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/editTextSubject"
android:layout_marginLeft="20dp"
android:layout_marginTop="6dp"
android:text="Your Message:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editTextMessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/message"
android:layout_below="#+id/message"
android:layout_marginRight="20dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="10dp"
android:layout_alignParentBottom="true"
android:background="#drawable/bordered"
android:ems="10"
android:gravity="top|left"
android:imeOptions="actionDone"
android:inputType="textCapSentences"
android:paddingLeft="3dp"
android:paddingRight="3dp" />
I know there are a few edits to the AndroidManifest.xml which can be made, and I'm pretty sure this is doable, I just can't seem to find the right combo!
Any help is appreciated, if I didn't make it clear enough just say.
This is far beyond what I had in mind originally, so I'm not going to accept this unless nothing better comes up.
What I'm doing now to solve the issue is I added android:windowSoftInputMode="adjustResize" to my activity in the AndroidManifest.xml.
I tested a bunch of screen sizes and figured that 800px height was roughly the limit for when it gets a bit difficult to read due to the keyboard, so I added the following code to my onCreateView():
DisplayMetrics screen = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(screen);
if(screen.heightPixels < 800){
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
}
It'd make sense to work out roughly which setting is likely to have more devices (>= 800 or < 800 and flip the if statement accordingly, just to make it more efficient (although it won't be noticeable).
As I said this is a workaround rather than an ideal answer to the question, so more answers please! :)
Edit: Didn't account for density, now using if(screen.displayDPI < 160 && screen.heightPixels < 800){
How do I align text and image with same button? I want to do like this image:
but my button looks like this, with text overlapping the image:
This is my code below. How do I make space in between text and image in the same button?
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_weight="0"
android:weightSum="1"
android:orientation="horizontal" >
<Button android:id="#+id/btnUtilitybillpayments"
style="?android:attr/buttonStyleSmall"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:drawableLeft="#drawable/handshake"
android:layout_marginRight="55dip"
android:layout_marginLeft="55dip"
android:drawablePadding="-25dp"
android:paddingLeft="10dip"
android:paddingRight="50dip"
android:layout_marginTop="10dip"
android:background="#drawable/curvedplanebutton"
android:textColor="#drawable/button_text_color"
android:text="Utility Bills Payment"/>
</LinearLayout>
try this
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/btn_star_big_on"
android:text="Drawable left">
Button>
For more info go to this link
http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx
I think you made your button to Complex,
Just use below code and let me know what happen..
<Button android:id="#+id/btnUtilitybillpayments"
style="?android:attr/buttonStyleSmall"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginRight="55dip"
android:layout_marginLeft="55dip"
android:drawableLeft="#drawable/handshake"
android:layout_marginTop="10dip"
android:gravity="left"
android:paddingLeft="20dip"
android:background="#drawable/curvedplanebutton"
android:textColor="#drawable/button_text_color"
android:text="Utility Bills Payment"/>
As I have also doubt on layout_margin attributes of your Button. If it doesn't work then try to remove
android:layout_marginRight="55dip"
android:layout_marginLeft="55dip"
Some thing like this.
<Button
android:id="#+id/btnUtilitybillpayments"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/curvedplanebutton"
android:drawableLeft="#drawable/handshake"
android:gravity="left|center"
android:text="Utility Bills Payment"
android:textColor="#drawable/button_text_color" />
A more suitable approach is by making the button as a 9patch image. That way, you can define where the text should be by patching the right and bottom side. And there wont be any need for such complex button.
You can go here for more information-
http://developer.android.com/tools/help/draw9patch.html
I am trying to extend a sample I found at http://developer.android.com/resources/articles/layout-tricks-efficiency.html. I am a brand new MonoDroid developer, just installed it yesterday, and trying to jump right into UI design and so far it is not clicking for me completely.
I have this main.xml:
<?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="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
<TextView
android:id="#+id/secondLine"
android:layout_width="200dip"
android:layout_height="26dip"
android:layout_toRightOf="#id/icon"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:ellipsize="marquee"
android:text="Second line which is a long line of text and needs to scroll" />
<TextView
android:id="#+id/firstLine"
android:layout_width="200dip"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_above="#id/secondLine"
android:layout_alignWithParentIfMissing="true"
android:singleLine="true"
android:ellipsize="marquee"
android:gravity="center_vertical"
android:text="First line" />
<Button
android:id="#+id/logonButton"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/secondLine"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:text="Login" />
/>
</RelativeLayout>
What I am trying to do is have an icon on the left, 2 lines of text stacked in the middle and a button on the right. When I run this in my emulator I am seeing:
The second line is not scrolling.
The button does not show up.
Is there by any chance a simple WYSIWYG editor for layout? Or is there an app to give me a quick view of my layout XML? Something like FireBug in FireFox would be fine.
Barring the slim chance there are UI helpers for Droid, what am I doing wrong? :)
NOTE: I found hierarchyviewer and the button is not showing up at all (visible) though it does show in the heirarchy. http://screencast.com/t/rdjaR0tCM6
I think you have an extra "/>" at the bottom of . But that may not be the main issue here.
What happens if you rotate the orientation? Do you get the button then? If so, maybe you have the width of the image and text too wide to accomodate the button.
I want to make the edittext width the same size as button. My EditText is currently very small. I use relative layout.
<TextView
android:id="#+id/aha4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17dip"
android:text="Vzdevek:"
android:layout_below="#id/aha3" />
<EditText android:id="#+id/nick"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/nivo"
android:layout_toRightOf="#id/aha4"/>
<Button android:id="#+id/poslji"
android:text="Pošlji"
android:layout_height="wrap_content"
android:layout_width="20dip"
android:typeface="serif" android:textStyle="bold"
android:layout_alignParentRight="true"
android:layout_below="#id/nivo"
android:layout_toRightOf="#id/nick"/>
What i currently get is this:
alt text http://www.shrani.si/f/1Z/x8/2lWB3f8p/device.png
What is the appropriate layout_width for edittext and button?
As you are using something like a row to show the TextView, EditText and button, you can try to use TableLayout: http://developer.android.com/guide/tutorials/views/hello-tablelayout.html
Also, make sure you set android:layout_width="wrap_content" so that the EditText use as much space as possible.
Try to assign equal weight to both button and edit text
Yeah, you're right about weight.
As a hack you can do this. Not exactly right though.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/aha4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17dip"
android:text="Vzdevek:" />
<Button
android:id="#+id/poslji"
android:text="Pošlji"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingLeft="40dip"
android:paddingRight="40dip"
android:typeface="serif"
android:textStyle="bold"
android:layout_alignParentRight="true" />
<EditText
android:id="#+id/nick"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/aha4"
android:layout_toLeftOf="#id/poslji" />
</RelativeLayout>
I managed to solve it with specifying minWidth and maxWidth for EditText.