I'm working on a screen that has a LinearLayout with a TableLayout inside, in order to show texts, some EditTexts and some buttons.
The problem is that on the smartphone, when I click on a EditText that is on the top of the layout, a button that is on the bottom hides behind the soft keyboard. The only way to make the button appear again is to hide the soft keyboard.
Is it possible to make my layout on top of the soft keyboard to scroll to the button of my view, so the user can see the soft keyboard and the bottom on the button?
I tried to use a ScrollView around the TableLayout, but it does not scroll to the button of my layout, so the user can not see to bottom.
This is my 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="horizontal">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/linearLayoutMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<include layout="#layout/login_container"/>
<LinearLayout
android:orientation="horizontal"
android:background="#drawable/_grey_rounded_bottom"
android:layout_width="match_parent"
android:layout_height="30dp"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
Thanks in advance.
I have a similar view and it runs for me. See my code:
<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="wrap_content"
tools:context=".MainActivity"
android:orientation="vertical" >
<LinearLayout ... /> <!--Have an image that I want to stay on the top -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" ... >
<RelativeLayout ... >
<!-- EditText of username and EditText of password and a CheckBox -->
<LinearLayout
android:id="#+id/linearLayoutEntrar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/checkBoxRecordarDatos"
android:gravity="center"
android:layout_marginTop="7dp"
android:weightSum="1.0">
<Button
android:id="#+id/buttonEntrar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/login_entrar"
android:textColor="#android:color/white"
android:textStyle="bold"
android:textSize="#dimen/textSize"
android:onClick="entrar" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutJugar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayoutEntrar"
android:layout_marginTop="7dp"
android:gravity="center"
android:weightSum="1.0" >
<Button
android:id="#+id/buttonJugar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="jugar"
android:text="#string/login_jugar"
android:textColor="#android:color/white"
android:textSize="#dimen/textSize"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
</LinearLayout>
Try changing height as I put on each layout. And if not success, I think the problem is TableLayout, try not using it as I do.
Adding android:windowSoftInputMode="stateVisible|adjustPan" to your activity tag in manifest should do the work.
try android:windowSoftInputMode="adjustResize"
if the scrollView has sibling view element, try this on ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
Related
I am trying to create a screen where you have a ScrollView on top and under that you have a TextView and a Button.
The ScrollView contains a TableLayout which it self contains TextView's, Button's and EditText's.
What I would like to achieve is that when a EditText is focues and the input panel opens on the phone, the buttom footer would be moved on top of the panel and the scroll area resized smaller, so that you can click the calculate button at any moment.
Here is my current xml:
The activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/activity_germinative_scroll"/>
<TextView
android:id="#+id/textViewCalculationResult"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".70"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:gravity="center"
android:text="0.00 KG/HA"
android:textSize="35sp"/>
<Button
android:id="#+id/calculateGerminative"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".30"
android:text="#string/calculate_germinative"
android:textSize="25sp"
android:textAllCaps="true"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/menu_button_states"
android:nextFocusDown="#id/editSeedMass"/>
</LinearLayout>
Scroll activity:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:orientation="vertical"
android:showDividers="beginning|end"
>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:padding="10dip"
>
<TableRow
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:id="#+id/teraMass"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".40"
android:textSize="20sp"
android:editable="false"
android:text="#string/seed_mass_text"
android:textAllCaps="true"/>
<Space
android:layout_width="13dp"/>
<Button
android:id="#+id/seedMassInfo"
android:tag="seedMassInfo"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/info"/>
</TableRow>
<Space
android:layout_height="3dp"/>
... Many other TableRow's with the exact same layout...
</TableLayout>
</ScrollView>
So what happens right now is that when I focus on one of the input fields in my scroll area, the button at the bottom gets resized into a very thin little button and depending of the screen size, the text-field in the footer will get resized also.
I use this setting for the activity in the manifest:
android:windowSoftInputMode="stateHidden|adjustResize">
Is the problem because of the overall layout I use or what?
You should set fixed height for the Button calculateGerminative and TextView textViewCalculationResult, and set the scrollview height to dynamic, i.e.
android:layout_height="0dp"
android:layout_weight="1"
I have a few EditTexts in my RelativeLayout, and a button aligned at the bottom of it. When the keyboard pops up, I want my layout to resize (therefore, I'm using android:windowSoftInputMode="adjustResize") and also want it to be scrollable, because in smaller screens resizing it isn't enough.
The problem is I can't get it to scroll at all!
I do need the Button to stay at the bottom of the screen.
<?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"
android:background="#FFF">
<!-- some hidden RelativeLayouts, filling the whole screen -->
<RelativeLayout
android:id="#+id/form_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent" android:layout_height="match_parent"
android:fillViewport="true" android:layout_above="#+id/ok_btn">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" android:background="#99000000" android:visibility="visible">
<View
android:id="#+id/shade"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignTop="#+id/logradouro1"
android:background="#FFF" android:layout_marginTop="-30dp"/>
<!-- some visible EditTexts and TextViews here -->
</RelativeLayout>
</ScrollView>
<Button android:id="#+id/ok_btn"
android:layout_width="match_parent"
android:layout_height="50dp" android:background="#color/verdeBotao" android:text="Cadastrar"
android:textColor="#FFF" android:layout_alignParentBottom="true"/>
</RelativeLayout>
</RelativeLayout>
Below are 2 screenshots to illustrate what is happening. Please notice that I can't scroll when the keyboard is up.
Thanks!
i am posting something similar to your ui. take a RelativeLayout for the button at the bottom. set gravity to bottom and your button view should android:layout_alignParentBottom="true"
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/m_table_menu" >
<LinearLayout
android:id="#+id/layuserdetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:padding="5dp" >
Yourviewss......i guess edittexts
</LinearLayout>
</ScrollView>
//scrollable Button layout
<RelativeLayout
android:id="#+id/m_table_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:padding="0dp" >
<LinearLayout
android:id="#+id/laysharepost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:orientation="vertical"
android:padding="5dp" >
//replace textview with buttonview..
<TextView
android:id="#+id/share_tvcommentdone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button_selector"
android:padding="10dp"
android:text="POST"
android:textColor="#android:color/white" />
</LinearLayout>
</RelativeLayout>
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/defaut_padding" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/defaut_padding"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="10dp"
android:background="#drawable/watermark" />
<ProgressBar
android:id="#+id/bitmap_loading"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible" />
</FrameLayout>
<FrameLayout
android:id="#+id/user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/photo"
android:layout_marginLeft="15dp"
android:layout_marginTop="-30dp"
android:background="#android:color/white"
android:padding="#dimen/smallest_padding" >
<ImageView
android:id="#+id/user_picture"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/anonymous_user" />
</FrameLayout>
<TextView
android:id="#+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/user"
android:layout_marginLeft="#dimen/defaut_padding"
android:layout_toRightOf="#id/user"
android:text="#string/anonymous_user"
android:textStyle="bold" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/input_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:padding="5dp"
android:layout_marginBottom="#dimen/defaut_padding"
android:background="#drawable/textfield"
android:hint="#string/description_hint"
android:focusableInTouchMode="true"
android:maxLines="3"
android:scrollbars="vertical" />
<Button
android:id="#+id/publish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/confirm_button_selector"
android:text="#string/confirm_button"
android:textColor="#android:color/white"
android:textSize="#dimen/big_text_size"
android:textStyle="bold" />
</FrameLayout>
</LinearLayout>
</ScrollView>
I want to scroll it when the soft keyboard appears when I start to digit at the EditText. How can I do this? Currenty the scroll works, but the keyboard appears above the button, and I want the button above the keyboard
I've tried to move the scrool when the user clicks in the EditText, doing something like this:
mSv.scrollTo(0, mSv.getBottom());
where mSv is my ScrollView
But it only works when the user clicks in the EditText at the second time.
Thank you for any help.
Try to change your Keyboard to pan instead of resize. You could do that in your AndroidManifest.xml file, for your particular Activity, add the below to it
android:windowSoftInputMode="adjustPan"
or
If you want to hide then:
EditText editTextSearch = (EditText) findViewById(R.id.editTextSearch);
InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(editTextSearch.getWindowToken(), 0);
If want to show:
EditText editTextSearch = (EditText) findViewById(R.id.editTextSearch);
editTextSearch.requestFocus();
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
Check this SO answer. It should solve the problem "..that the button will appears over the entire layout, and what I want to do is make the entire layout (button and other views scroll)"
If you use a RelativeLayout (outside of ScrollView) being aligned to the bottom, it will stick to the bottom of the available screen—above the keyboard. ScrollView then needs a bottom margin to not overlay the button.
<?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_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_marginBottom="48dp" >
/* Here your elements ... like EditText */
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="0px"
android:layout_alignParentBottom="true" >
<Button
android:layout_width="fill_parent"
android:layout_height="48dp"
android:text="ddd" />
</RelativeLayout>
</RelativeLayout>
This works only if you (as far as I could evaluate)
have a RelativeLayout as parent
have a ScrollView as the only child besides the RelativeLayout containing the button OR have another View (e.g. LinearLayout) containing a ScrollView somewhere (for whatever reason)
If you don't want the button to always stick to the bottom, you need to detect if the keyboard is shown or not as explained in Pragnani's link.
I want something like this:
But I don't know how to resize the TextView so it gets all the available space on screen which is not ocuppied by the EditText or the Buttons. May I do it in the code, or in the xml?
At XML I tried putting the TextView into a FrameLayout, but it makes no difference. Currently looks like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/consola"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars = "vertical"
android:text="#string/hello"/>
</FrameLayout>
<EditText
android:id="#+id/comando"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:text="Conectar"
android:id="#+id/boton_conectar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
<Button
android:text="Enviar"
android:id="#+id/boton_enviar"
android:layout_width="wrap_content"
android:layout_weight="0.5"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
At the code I'm just checking if the Buttons are pushed with Listeners. One of them, when pushed, gets the text at the EditText, and appends it to the TextView. It works, and TextView gets higher, while EditText and Buttons downs one line. If I go on appending lines, finaly EditText and Buttons get out of the screen. I want to avoid this behaviour, and accomplish to get this 3 widgets sticked to the bottom of the screen.
Use the android:layout_weight=1 attribute, like the buttons on the bottom of the form. That will assign most of the space to it and anything that's left to the rest of the elements.
It's all about the weight. This should give you what you want:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:text="TextView"
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</TextView>
<EditText android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<requestFocus></requestFocus>
</EditText>
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="Button"
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_width="0dp">
</Button>
<Button android:text="Button"
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
</Button>
</LinearLayout>
</LinearLayout>
(Side note: When using weight, setting the corresponding height/width to 0dp sometimes gets around some weird behavior.)
Try android:fillViewport="true".
I have edittext and a button below edittext.
edittext has width as fill_parent and height as wrap_content.
My messages covers full screen, due to this my button is not visible it hides below virtual keyboard
can any one sort this problem.
Thanks.
I've had the most success with something similar, but not identical to, Andrew's solution:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="#+id/myedittext"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/mybutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="this is my button"/>
</LinearLayout>
Try inserting this in your layout file where your edittext is called out:
android:layout_above="#+id/ID OF YOUR BUTTON HERE"
Also, your button at the bottom may require:
android:layout_alignParentBottom="true"
Assuming you WANT the EditText to cover all of the screen except for the button...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="#+id/myedittext"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:id="#+id/mybutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="this is my button"/>
</LinearLayout>