Develop Reference

Android Linear Layout weight and soft keyboard issue

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);

Extra margin in RelativeLayout

I'm using Support Android Percentage Library's RelativeLayout AKA android.support.percent.PercentRelativeLayout but it has extra margin on the left edge same as RelaytiveLayout I didn't set any margin or padding but it's still has it, Search a lot and done anything which worked for other people... but NOT SOLVED!
Activity Main Layout codes :
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainCoordinatorLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/mainAppbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/mainToolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<TextView
android:id="#+id/mainTitle"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/mainFlexibleSpace"
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.percent.PercentRelativeLayout
android:id="#+id/mainPercentRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/mainEnterLink"
android:text="#string/str_mainMessageText"
android:gravity="center"
android:textColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.percent.PercentRelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Any Help? See This Image of my rendered Layout Code

Check if it's a issue with the toolbar too (mainFlexibleSpace). If yes then,
Declare the toolBar in java and do this.
toolBar.setContentInsetsAbsolute(0,0);

LinearLayout isn't shown when included in content layout

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>

How to prevent soft keyboard from pushing up only the toolbar?

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>

How to show my Spinner to right of Toolbar

my Layout looks like below
You can see spinner added to my toolbar, but what I want is to make it right align, show it to most right of toolbar.
below is the xml code I used
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:elevation="4dp"
android:gravity="right" //gravity set to right
android:background = "#color/color_toolbar"
>
<Spinner
android:id="#+id/spinner_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
spinner is not showing android:layout_gravity
I tried setting gravity to right but it doesn't work. how can I do this?

I had the same issue. I have fixed the alignment issue based on the comments of question. So keeping the answer here to help someone directly.
<?xml version="1.0" encoding="utf-8"?>
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<Spinner
android:id="#+id/toolbar_spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:visibility="visible"
android:layout_gravity="right"/>
</android.support.v7.widget.Toolbar>