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);
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 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>
I have a activity_pic.xml layout which includes content_pic.xml to define the layout of my app. The activity_pic.xml is below:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.olivia.myapplication.PicActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_pic" />
</android.support.design.widget.CoordinatorLayout>
content_pic.xml is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
When I include the line <include layout="#layout/content_pic" /> within the AppBarLayout (that is, I move it up two lines) the button appears, and all the functionality of the button works. However when I put it after that, the button does not appear, and all I can see is the 'App Bar' bit of the layout.
Ok so the picture below shows how I would like it to look (and how the design view shows content_pic.xml)
And here is what it actually looks like
However, when I put the <include layout="#layout/content_pic" /> into the AppBarLayout I can see the button, as shown in the image below.
I have tried taking the content of content_pic.xml and including it directly instead of using the include statement, this still does not appear.
I've run out of ideas here - can anyone suggest what might be going wrong?
AppBarLayout works good if you us NestedScrollView or RecyclerView
so I suggest you change your content_pic.xml TO.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
I hope this will Help.
EDIT
You Just need to Change your content_pic.xml to this
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
<!-- Importent -->
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
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>
For the life of me, I cannot get this Toolbar to layout on top (note: not above, but on top of) its sibling LinearLayout. The only way I can get the Toolbar to overlay its sibling is by specifying the Toolbar's elevation to be > 0, but this doesn't work for pre-5.0.
I am using a parent FrameLayout, and the child Toolbar is located after its sibling LinearLayout in the XML. What am I missing? Even the Android Studio preview pane shows the Toolbar on top of the LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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="match_parent"
android:id="#+id/fragment_main_container"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame"
android:orientation="vertical"
>
<FrameLayout
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher"
/>
</FrameLayout>
<ListView
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:id="#+id/home_list_listview"
android:drawSelectorOnTop="true"
android:divider="#null"
android:dividerHeight="0dp"
tools:listitem="#layout/home_list_item"
>
</ListView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/slogan"
android:gravity="center"
android:textColor="#color/colorPrimaryDark"
/>
</LinearLayout>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
/>
</FrameLayout>
Turns out I had a fragment committing the linear layout over the main activity, which already contained it. Oops!
That's because of FrameLayout.
If you want to use FrameLayout, the views will not relate each other.
So all you need to do is ...
set "height of toolbar" to MarginTop of LinearLayout.
Hope, it will help.