I have a layout which has a toolbar at the top and several EditText views:
<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.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/my_toolbar">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text1"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text2"/>
...
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text7"/>
</LinearLayout>
</RelativeLayout>
While some EditText which are closer to the bottom of the screen opens the soft Keyboard, the whole screen(contains the toolbar) will be pushed up. Is there any way to make soft keyboard push up the whole screen except the toolbar (Fix the toolbar)?
Some existing answers can actually fix the whole screen, but EditText which are closer to the bottom might also be blocked by the soft keyboard.
Can anyone give me a good solution?
Put android:fitsSystemWindows="true" in first relative layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
....
....
</RelativeLayout>
and in manifest add this
android:windowSoftInputMode="adjustPan"
Use a ScrollView.
<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.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/my_toolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text1"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text2"/>
...
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text7"/>
</LinearLayout>
</ScrollView>
Related
I have the following xml
<RelativeLayout
...>
<Toolbar
.../>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:fitsSystemWindows="true"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</TextInputLayout>
<TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</TextInputLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
In my AndroidManifest.xml I set the windowSoftInputMode to adjustResize. But now when I click in one of those EditText fields the layout moves up and the actual field where I want to type is not even visible anymore. The scrolling works, but only downwards and not fully up. Any ideas on how to fix this? I don't want to use adjustPan because that disables the scroll in general.
I'm trying to achieve the following view in a chat app. There are basically two states one with the soft touch keyboard showing and one without.
So this is my initial state without the keyboard showing.
This is what happens when the keyboard shows up.
This is what i'm trying to achieve.
Note
I'm current using "adjust-resize" as the windowSoftInputMode. I know using "adjust-pan" will fix the issue, but with "adjust-pan" there are 2 problems :
The toolbar also moves up making space for the edit-text and keyboard.
The editText gets partly covered by the keyboard.
A layout experts help is needed here!
Thanks in advance.
Edit:
This is what my XML looks like:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/view_group_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
android:elevation="4dip" >
<!-- Toolbar stuff -->
</android.support.v7.widget.Toolbar>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_bar"
android:layout_below="#+id/view_group_toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6">
<include
layout="#layout/layout_that_covers_60%_of_the_screen (This is not my actual layout name :/ using it for understandability)"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/view_group_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:gravity="center_vertical">
<include
layout="#layout/layout_that_covers_40%_of_the_screen"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:padding="8dip" >
<!-- This is where my edit text resides -->
</RelativeLayout>
</RelativeLayout>
So here is what I think you should do,
use
windowSoftInputMode="adjustResize" - The activity's main window is always resized to make room for the soft keyboard on screen. Also adjustResize keeps the ToolBar on top.
Try adding both your LinearLayouts inside a NestedScrollView. The reason I say this is because your NestedScrollView contents can scroll up.
I think your Layout will look like this- .
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/view_group_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
android:elevation="4dip" >
<!-- Toolbar stuff -->
</android.support.v7.widget.Toolbar>
</LinearLayout>
<NestedScrollView
android:layout_above="#+id/bottom_bar"
android:layout_below="#+id/view_group_toolbar">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6">
<include
layout="#layout/layout_that_covers_60%_of_the_screen (This is not my actual layout name :/ using it for understandability)"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/view_group_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:gravity="center_vertical">
<include
layout="#layout/layout_that_covers_40%_of_the_screen"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</NestedScrollView>
<RelativeLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:padding="8dip" >
<!-- This is where my edit text resides -->
</RelativeLayout>
Let me know if this works for you.
EDIT 1:
If you have a RecyclerView inside your layouts, you may need to set this attribute for smooth scroll -
recyclerView.setNestedScrollingEnabled(false);
I created a Scroll View which should allow me to scroll through all the content which is inside Linear Layout (that is a child of Scroll View).
Code looks like this:
<ScrollView 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="pl.oakfusion.delegator.DomesticDelegationSecondFragment">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
....
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:layout_marginTop="25dp"
android:background="#color/textDarkest"
android:text="Save"
android:textColor="#color/textColor"
android:layout_gravity="right" />
</LinearLayout>
Preview looks like this:
But in my app I have this:
I can't scroll down, this is all I can see.
If I allow to rotate I have horizontal view:
which now allows me to scroll but cuts the button entirely. (On the picture is bottom of view) I can pull down fast and I can see that the button is there but it goes up again (this android thing when you can pull slightly further but it scrolls back)
How can I fix this?
Hosting activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="pl.oakfusion.delegator.DomesticDelegationActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
try adding this to the scrollView in your xml layout
android:fillViewport="true"
I have experienced the same problem once. I tried adding padding for the ViewGroup inside ScrollView. Then it worked fine. Its a hacky solution and not an ideal one.
For the example mentioned above (by user3212350):
I have added some padding to the LinearLayout inside ScrollView to make the view completely visible. The amount of padding required may differ for various screen sizes.
<ScrollView 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="pl.oakfusion.delegator.DomesticDelegationSecondFragment">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
##android:paddingBottom="50dp"##>
....
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:layout_marginTop="25dp"
android:background="#color/textDarkest"
android:text="Save"
android:textColor="#color/textColor"
android:layout_gravity="right" />
</LinearLayout>
How do I set this action bar in a way even when scroll the long data screen it keeps visible on the top of the screen?
toolbar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
Guys please see my update:
I tried everything but it seems that next component after actionBar is not being set after actionBar but behind it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/background_telas"
android:orientation="vertical" >
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/actionBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/actionBarBackgroundColor"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp" >
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#A0A09F" />
Project (eclipse):
Screen stopped:
Screen scrolled up:
Java:
Toolbar actionBar = (Toolbar) findViewById(R.id.actionBar);
actionBar.setTitle("ProTaxi Passageiro");
actionBar.setSubtitle("Cadastro");
actionBar.setTitleTextColor(Color.parseColor("#846A1A"));
setSupportActionBar(actionBar);
If you don't want the Toolbar to scroll with the content, then you have to put it outside the ScrollView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<ScollView
...>
you content here..
</ScollView>
</LinearLayout>
You can also set the layout_scrollFlags to enterAlways to get rid of the toolbar scrolling.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
I had a similar problem with the layout behind the toolbar, setting fixed height to the Toolbar helped me, try android:layout_height="?attr/actionBarSize". Also use the layout #Floern adviced you.
To fix the layout above the bar, try doing the following. Wrap the whole activity in a relative layout. Then give an id to the Top Action Bar Relative layout. Afterwards on your scroll view, add this line layout_below/#id/top_profile_bar to have the layout scroll below the bar.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Top Action Bar-->
<RelativeLayout
android:id="#+id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="50dp">
<include layout="#layout/top_actions_bar" />
</RelativeLayout>
<!--Add a layout_below/#id/top_profile_bar to have it below the bar-->
<ScrollView
android:layout_below="#id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Some Content-->
</ScrollView>
then in your top_actions_bar.xml add app:layout_scrollFlags="enterAlways" to the tool bar.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/profileToolBar"
app:layout_scrollFlags="enterAlways"
android:background="#drawable/bg_white_grey_border_bottom">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivBack"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<TextView
android:layout_toRightOf="#+id/ivBack"
android:id="#+id/top_actions_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textSize="20sp"
android:textColor="#color/colorBlack"
android:layout_marginLeft="15dp"
android:text="Scoper Settings"
/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
Hope this helps!
I have own EditText in layout, I use it to search. but select the text of into EditText bug in top of my layout.
please see below photo to understand my mean
layout code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tellfa.smsbox.Search_page">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<EditText
android:id="#+id/search_bar_text"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/primaryColor"
android:gravity="right|center_vertical"
android:hint="#string/search_page_hing"
android:maxLength="25"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/search_hint"
android:textColorHint="#color/hint_foreground_material_dark"
android:textSize="20sp"
android:windowSoftInputMode="stateAlwaysHidden" />
Appbar code :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/MyCustomToolbarTheme"
android:paddingTop="15dp"
>
how to fix it or change top of layout background ?
Update your layout like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
..
</RelativeLayout>
Also make sure that your project uses style
Theme.AppCompat.Light.NoActionBar
Tell me if it works for you!