This is a follow up to this question.
Have spent days on this issue, and can't seem to get what I want. What I need very simply is this entire view to be scrollable when the keyboard pops up after touching an edittext field:
Note that this view is not scrollable, it doesn't need to be.
So when the user hits the edittext field (say the first one), it looks like this:
And if he/she chooses, the view can be scrolled to end no further that the way it looks here:
I've tried every combination of scrollview I could think of, but all it does is stretch my background image. I'm sure there is a simple solution to this, but I just can't find it. I would really be grateful to anyone who can solve this problem. Here is the XML for the layout by the way:
<?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:background="#drawable/background"
android:orientation="vertical"
android:paddingLeft="60dp"
android:paddingTop="53dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText1"
android:layout_width="173dp"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_marginTop="3dp"
android:inputType="numberDecimal" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editText1"
android:layout_marginTop="3dp"
android:text="text2"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText2"
android:layout_width="173dp"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:layout_marginTop="3dp"
android:inputType="numberDecimal" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editText2"
android:layout_marginTop="3dp"
android:text="text3"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText3"
android:layout_width="173dp"
android:layout_height="wrap_content"
android:layout_below="#id/textView3"
android:layout_marginTop="3dp"
android:inputType="numberDecimal" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editText3"
android:layout_marginTop="3dp"
android:text="text4" />
<ImageView
android:id="#+id/gearImage3"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignLeft="#+id/button1"
android:layout_below="#id/button1"
android:layout_marginTop="70dp"
android:clickable="true"
android:contentDescription="#string/gearDescription_string"
android:src="#drawable/gear" />
</RelativeLayout>
Kindly note the latter two images are not from the real app (photoshopped to show what I need) but the first one is from my app. Thanks.
A ScrollView only scrolls to as far as there is data. So simply adding a ScrollView should just fix your problem. Add this to the start of your xml:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
and then obviously add this at the bottom, after everything else:
</ScrollView>
I use this in my app and when the keyboard shows, I can still scroll to the bottom of the page. If your fields as shown in screenshot 1, are not longer than one normal phone page, it won't scroll anyway. It will only scroll when you have the keyboard up as it can't then see the whole screen.
Hope this helps!
Related
I'm trying to get the editTexts, and sign in button to move up when the software keyboard is out however I want the background to not be compressed(I'm going to add an image soon). I have the TextView(Login), two EditTexts(email and password) and signin button in a ScrollView because I thought that might help however I have not be able to figure anything out.
http://i.imgur.com/vlYifc6.png
http://i.imgur.com/vlYifc6.png
This is the xml
<RelativeLayout 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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/scrollView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:id="#+id/textLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Login"
android:id="#+id/loginView"
android:textSize="22dp"
android:layout_above="#+id/textLayout"
android:layout_centerHorizontal="true" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/emailTextfield"
android:inputType="textEmailAddress"
android:background="#android:drawable/edit_text"
android:textColor="#android:color/primary_text_light"
android:text="andresc1305#yahoo.com"
android:hint="Email" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Password"
android:text="Andres123"
android:background="#android:drawable/edit_text"
android:textColor="#android:color/primary_text_light"
android:ems="10"
android:id="#+id/passwordTextfield" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SIGN IN"
android:background="#android:color/transparent"
android:textSize="24dp"
android:id="#+id/signinButton"
android:layout_below="#+id/textLayout"
android:layout_centerHorizontal="true"
android:onClick="onSigninClick"/>
</LinearLayout>
</ScrollView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forgot your password?"
android:background="#android:color/transparent"
android:textSize="14dp"
android:id="#+id/forgotButton"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onPasswordRecoverClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:background="#android:color/transparent"
android:textSize="14dp"
android:id="#+id/registerButton"
android:layout_alignTop="#+id/forgotButton"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:onClick="onRegisterClick"/>
</RelativeLayout>
Look at this answer. In short, your problem can most likely be solved by setting the following in your AndroidManifest.xml inside the relevant activity or application element:
android:windowSoftInputMode="adjustResize"
#PPartisan
This is without:
android:windowSoftInputMode="adjustResize"
http://i.imgur.com/tbNioU2.png
This is with:
http://i.imgur.com/7ZePHjS.png
Beside the compression you can see my "Forgot your password" and "Register" buttons but I have those outside my ScrollView in the XML. Is there a way to scroll the LinearLayout (which contains the Login(TextView, email(EditText), password(EditText), and Signin(button) up when the software keyboard comes up?
The answer by zmilojko seems like what I want to do but he only says to add the ScrollView and not what to do after that has been added. Is there something I can place in the to make it move up when the software keyboard comes up?
see this thread, i think it can help you
layout of the screen moves up when keyboard is displayed
or just try to put this in your xml:
android:windowSoftInputMode="adjustPan"
or this
android:windowSoftInputMode="adjustNothing"
Seems like it works different in each case.
So I am making a texting app just to mess around with the different things in android programming and have yet to run into a problem that I can't find the answer for online. I have tried several different answers from this site and other android programming forums and not one of them has worked every time. There are some examples that work every other time, whereas other examples will work only once. This is the only thing left in the app that I need to figure out for UI functionality.
I have an XML layout file as such:
<RelativeLayout
android:id="#+id/rlActionBar2"
android:layout_width="fill_parent"
android:layout_height="44dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlAddContact"
android:layout_width="fill_parent"
android:layout_height="44dp"
android:layout_below="#+id/rlActionBar2"
android:background="#drawable/new_message_background"
android:padding="0dp" >
<TextView
android:id="#+id/tvTo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:text="#string/text_to"
android:textColor="#7F7F7F"
android:textSize="17sp" />
<EditText
android:id="#+id/txtContact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/tvTo"
android:layout_marginLeft="6dp"
android:layout_toLeftOf="#+id/btnAddContact"
android:layout_toRightOf="#id/tvTo"
android:background="#00000000"
android:hint="#string/contact_name"
android:inputType="textPersonName"
android:maxLines="1"
android:textColor="#000000"
android:textSize="16sp" >
</EditText>
<Button
android:id="#+id/btnAddContact"
android:layout_width="28.5dp"
android:layout_height="28.5dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="#drawable/add_button"
android:padding="0dp" />
</RelativeLayout>
<ScrollView
android:id="#+id/svMessageView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/rlNewMessage"
android:layout_alignParentLeft="true"
android:layout_below="#id/rlAddContact"
android:background="#DBE2ED" >
<LinearLayout
android:id="#+id/llMessages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DBE2ED"
android:isScrollContainer="true"
android:orientation="vertical"
android:paddingTop="11dp" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/rlNewMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/messagebar_background"
android:gravity="bottom"
android:padding="0dp" >
<Button
android:id="#+id/btnAttatchment"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_alignBottom="#+id/txtMessageBox"
android:layout_marginLeft="6dp"
android:background="#drawable/camera_icon" />
<EditText
android:id="#+id/txtMessageBox"
android:layout_width="253dp"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="#id/btnAttatchment"
android:background="#drawable/messagebox_background"
android:hint="#string/app_name"
android:inputType="textMultiLine"
android:maxLines="6"
android:minHeight="26dp"
android:textSize="17sp" >
</EditText>
<Button
android:id="#+id/btnSend"
android:layout_width="58dp"
android:layout_height="26dp"
android:layout_alignBottom="#id/txtMessageBox"
android:layout_alignParentRight="true"
android:layout_marginRight="6dp"
android:background="#drawable/send_button"
android:text="#string/send_button"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
My problem is getting the ScrollView svMessageView to automatically scroll to the bottom every time the soft keyboard comes onto the screen for the user to type. The RelativeLayout rlNewMessage moves up when the keyboard appears, and the bottom of svMessageView is set to stick to the top of rlNewMessage and that works, but I can't get the svMessageView to scroll to the bottom by itself.
Images:
After soft keyboard loads (not what I want): http://imgur.com/8Kptge3
After soft keyboard loads (what I want): http://imgur.com/BcDcFPY
If more information is needed for you to figure out the problem let me know and I will post it asap.
I did not test it, but you may try scrollView.fullScroll(View.FOCUS_DOWN); on EditText touch listener perhaps.
Add this in your Manifest.xml for Activity and feed me back
android:windowSoftInputMode="adjustNothing"
I have the following code defined in my xml file, but I don't see the buttons getting displayed. I have read way too many posts, and pretty much tried all possible combinations, but no luck :( I'd really appreciate if someone could help me here.
<?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" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:gravity="center"
android:text="#string/hello_world"
android:textSize="32sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:hint="#string/ad_desc"
android:inputType="text" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/phone" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sms" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/maps" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/video" />
</LinearLayout>
I would like to see my App Name on top (Text view - #string/hello_world), right beneath it, a big box that allows me to EditText(#string/ad_desc), and beneath that, all my buttons. The button should be at the bottom, next to each other aligned in this manner - http://www.mkyong.com/android/android-linearlayout-example/ (Linear layout - Horizontal example), except I want my buttons to be at the bottom, and not at the top. Instead I see something else (Image attached)
Please feel free to ask me if you'd like me to attach anything else. I am new to Android programming, and this is totally beyond me on why it isn't working.
If you want to align your Buttons at the bottom then you are better off with a RelativeLayout as the root. Try changing it to the following and notice the properties
<?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" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="#string/hello_world"
android:textSize="32sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/ad_desc"
android:inputType="text"
androidi:layout_below="#id/textView2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/phone" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sms" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/maps" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/video" />
</LinearLayout>
</RelativeLayout >
You may have to add some margin to the TextView and EditText for appropriate spacing but this should give you your TextView with the EditText below it and your Buttons in a horizontal LinearLayout aligned at the bottom of the screen.
Edit
Notice this property
androidi:layout_below="#id/textView2"
of the EditText and this property
android:layout_alignParentBottom="true"
Of the LinearLayout that I added.
The easiest thing is to create a new relative layout, and place the item that you need from the palette.
Or start to try and learn to make matrioska layout via xml ;)
http://developer.android.com/guide/topics/ui/declaring-layout.html
I have a problem while placing the buttons in my xml file.
Now what I want is that the "ok" button at the bottom should come below the mileage edit text that is at the second last strip. I am using a scroll view before the button. Also I am using a single image as a background.
How is it possible that all my buttons in my application only come on the second last strip (gray color)? The rest of the layout should come in between (i.e. between top gray strip and the bottom gray strip).
I tried using margin_top or margin_bottom in 'dp' but its not coming properly plus on every other phone the layout of button changes. Here is my code (.xml file):
<?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="#drawable/menu"
android:padding="10dp">
<ScrollView
android:id="#+id/scv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="105dp"
android:layout_marginBottom="105dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Year"
android:inputType="date" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_alignRight="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner1"
android:layout_alignRight="#+id/spinner1"
android:layout_below="#+id/spinner1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner2"
android:layout_alignRight="#+id/spinner2"
android:layout_below="#+id/spinner2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner3"
android:layout_below="#+id/spinner3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Mileage"
android:inputType="number" />
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:text="OK" />
</RelativeLayout>
You should never use a single image for your complete layout on Android. That just doesn't run very well as you have so many different screen sizes.
I'd recommend you cut the graphic out in portions and make it stretch so it will fit depending on the screen size. It's not really possible to help you much more based on the poorly copy paste of your own code and the lack of visualization of what you want the graphic to look like.
For your button xml, try
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scv"
android:layout_centerHorizontal="true"
android:text="OK" />
You can add android:layout_marginTop="5sp" changing the value if necessary.
This will place your button below your scrollview.
So here is my XML. I am trying to fill the whole screen and when I view it in Eclipse, it fills the whole screen. However, when I open it on my phone, everything is smaller and there are views overlaying. I don't know what's going on.
<?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" >
<TextView
android:id="#+id/front"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Front"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/frontInput"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/front"
android:ems="10" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/frontInput"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Back"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/backInput"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/back"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:ems="10"
android:inputType="textMultiLine" />
<TextView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_marginLeft="5dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/backInput"
android:layout_marginTop="44dp"
android:text="Background"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/colors_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/backInput"
android:layout_marginLeft="30dp"
android:layout_marginTop="22dp"
android:layout_toRightOf="#+id/background"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/colors_spinner" >
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
this is what it looks in Eclipse.
But I get this:
Another thing is that when I open the keyboard my view does not rezise so you can see everything but smaller so you can see what you are typing etc... I have added the android:windowSoftInputMode="adjustResize" for the specific activity but nothing is happening... Any ideas? Thanks guys...
If you use adjustResize it will resize everything to fit as best it can. The other option is adjustPan, which will scroll the window so that the focused EditText will be in the view and the caret visibile. Other than that there's no real way to control things.
In your case you have some exact heights in there, so it won't work well with a resize, since you can't shrink an exact height.
Also, never trust how things look in Eclipse. Its an attempt to lay things out that shares no code with how Android really does things, it should be viewed as an estimate. Real layouts may end up looking significantly different, especially for complex layouts.