Develop Reference

Put a view on top of AppBarLayout

I am working on a UI that utilizes the CoordinatorLayout/AppBarLayout combo as normally seen in most examples but there is this requirement of mine: I want to overlay the AppBarLayout with a View at all times. So, whatever scrolling behavior that happens, should happen under this view. Currently, this is what I am seeing:
Here, the blue bar that you see is the one that I want on top of everything. As you can see, it is hidden initially and only gets exposed when we have scrolled AppBarLayout off the screen. For your reference, here is the code for this layout and its id is android:id="#+id/linearLayout":
<?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"
tools:context="com.example.snapsboardmainpage.MainActivity"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_scrollFlags="scroll|snap"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="112dp"
android:orientation="vertical"
app:layout_scrollFlags="scroll|snap"
android:background="#android:color/holo_green_light">
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/id_tab_photosvideos_albums"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/id_viewpager_photosvideos_albums"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="vertical"
android:layout_gravity="top"
app:layout_behavior="com.example.snapsboardmainpage.TopActionBarBehavior"
android:background="#android:color/holo_blue_light">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="#android:color/holo_orange_light">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
How can I achieve this overlay behavior?(it would be preferable if this blue bar could remain as a direct child of CoordinatorLayout)

Although the question seems to be difficult, the solution turned out to be amazingly simple:
android:elevation="8dp"
Yes, that was it. Just set it on the the view that had to overlay the AppBarLayout.

android:elevation="8dp" work on API level 21.
So You can put your view in side a new AppBarLayout.
In my case , i put my xml code in to new AppBarLayout like below
<?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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:fitsSystemWindows="true"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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"
app:title="#string/app_name" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.appbar.AppBarLayout>
<!--i want below view on the top of app bar layout of id(android:id="#+id/app_bar")
so i put my all view inside the new app bar layout of id(
android:id="#+id/longClickItem")-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/longClickItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:visibility="gone">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:paddingTop="#dimen/_5sdp"
android:paddingBottom="#dimen/_5sdp">
<ImageView
android:id="#+id/longItemBack"
android:layout_width="#dimen/_25sdp"
android:layout_height="#dimen/_25sdp"
android:layout_centerVertical="true"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/longItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/longItemBack"
android:text="0"
android:textColor="#android:color/white"
android:textSize="#dimen/_18sdp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/longItemDelete"
style="#style/long_press_image_view"
android:src="#drawable/item_long_delete" />
</LinearLayout>
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

Android button permanently on bottom

I have the following Xml code where I want to display the content of a fragment into FrameLayount but I don't know how to keep my button always on bottom.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_lista_preguntas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ingenierovagabundo.encuestafacil.GUI.ListaPreguntasActivity">
<!-- Toolbar -->
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar_nueva_pregunta"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/contenedor_Pregunta"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</FrameLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:text="#string/npa_button_guardar"/>

you can use RelativeLayout insted of LinearLayout as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_lista_preguntas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ingenierovagabundo.encuestafacil.GUI.ListaPreguntasActivity">
<!-- Toolbar -->
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar_nueva_pregunta"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/contenedor_Pregunta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btn"
android:layout_below="#+id/appbar_nueva_pregunta">
</FrameLayout>
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:text="#string/npa_button_guardar" />

You could add android:layout_weight="1" to your FrameLayout. This will expand the FrameLayout to fill any remaining space in the parent view. Which should result the Button to be at the bottom.
So your resulting FrameLayout will be,
<FrameLayout
android:id="#+id/contenedor_Pregunta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
For more on layout_weight follow the link
https://developer.android.com/guide/topics/ui/layout/linear.html#Weight

You use a LinearLayout as container, then the elements follow each other.
If you want to keep your button always on bottom, use a RelativeLayout with
android:layout_alignParentBottom="true".
You also need to close your container! ;)

Use this Code in activity_main.xml
<?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">
<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_main" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/colorOrange"
app:srcCompat="#android:drawable/ic_menu_share"
tools:ignore="VectorDrawableCompat" />
</android.support.design.widget.CoordinatorLayout>
And in content_main.xml, use this Code.
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="#layout/app_bar_main">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>

White inactive bottom space on CoordinatorLayout

I have the xml-file with CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:visibility="visible"
android:gravity="center_horizontal">
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
app:tabBackground="#drawable/my_tab_item_bg_selector"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
And I have another xml-file which I put on coordinator layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nestedScrollData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/layoutDataDispatchContacts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<LinearLayout
android:id="#+id/layoutFullTableDispatchContacts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:background="#drawable/layout_block_background">
<LinearLayout
android:id="#+id/tableLinearLayoutDispatchContacts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
I catching bug of empty space, which covers the part of my window and not clickable. This is on screenshot below:
unclickable inactive bottom space
I noticed that when I deleting app:layout_behavior="#string/appbar_scrolling_view_behavior" from my ViewPager, the bug disappears. But my names of tabs disappear too. I think it creates some invisible toolbar or something like that.

As CoordinatorLayout is working as parent of subviews so, to occupy full screen you need to set the height to match parent instead of wrap_content like this:
android:layout_height="match_parent"
and it would work fine.

How to put button on the bottom of Scrollview

I've tried searching all over, but I can't seem to figure this one out. Basically, I have a layout with Scrollview and elements inside it. I want to put a button inside the scrollview which would be at the end/bottom and you can only see it when you scroll all the way to the bottom.
I've tried doing it like this:
<ScrollView 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:fitsSystemWindows="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/topcontainer">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:title="Review Your Massage">
</android.support.v7.widget.Toolbar>
<include layout="#layout/card_review"/>
</LinearLayout>
<Button
android:id="#+id/buttonReview"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#color/colorAccent"
android:text="#string/book"
android:layout_below="#+id/topcontainer"
/>
</RelativeLayout>
</ScrollView>
The button is indeed at the bottom but there is space beneath it. If I run the app on a phone with bigger resolution, the button will be almost in the middle of the screen. How can I make it so no matter the resolution it will always stay on bottom?
Here's a screenshot of what it looks like at the moment:

With android:layout_height="match_parent" and android:fillViewport="true" the ScrollView uses all the available space, even if the children are smaller.
The Space has a android:layout_weight="1" to receive the extra space, so the button is always at the bottom.
An explanation by Romain Guy with more details.
<ScrollView 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"
android:fitsSystemWindows="true"
android:fillViewport="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/topcontainer">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:title="Review Your Massage">
</android.support.v7.widget.Toolbar>
<include layout="#layout/card_review"/>
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp" />
<Button
android:id="#+id/buttonReview"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/colorAccent"
android:text="#string/book" />
</LinearLayout>
</ScrollView>

try this
<ScrollView 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"
android:fitsSystemWindows="true"
android:fillViewport="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/topcontainer">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:title="Review Your Massage">
</android.support.v7.widget.Toolbar>
<include layout="#layout/card_review"/>
</LinearLayout>
<Button
android:id="#+id/buttonReview"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#color/colorAccent"
android:text="#string/book"
/>
</RelativeLayout>
</ScrollView>

ScrollView not scrolling bottom completely

Before you mark it duplicate, let me tell you that I have searched for every answer but all in vain.
I am using Tabs with Actionbar.
I have set android:layout_height="match_parent" of ScrollView as suggested in many solutions.
I also have removed android:layout_gravity="center" from all layouts as suggested by:
Android scrollview hiding top content in layout
I also have set android:fillViewport="true" but no luck.
Any other hack that I am missing?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<CalendarView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/calendarView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Guest"/>
<NumberPicker
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</NumberPicker>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_time_slot"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_add_on"/>
<Button
android:id="#+id/btn_confirm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/title_btn_confirm"/>
</LinearLayout>
</ScrollView>
Here is xml of 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="com.squincy.wspace.ui.HomeActivity">
<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.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/app_color_black"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabIndicatorColor="#color/app_color_black"
app:tabGravity="center"
app:tabMode="scrollable"/>
</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" />
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="#+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="end|bottom"-->
<!--android:layout_margin="#dimen/fab_margin"-->
<!--android:src="#android:drawable/ic_dialog_email" />-->
</android.support.design.widget.CoordinatorLayout>

I think you should try NestedScrollView
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
Just replace your ScrollView with this one
I am using it in my app and it works perfectly

Try adding paddingBottom to your LinearLayout inside ScrollView.
If that doesn't work then try adding Space as last child of LinearLayout inside ScrollView like this:
<ScrollView
<LinearLayout
// other views
<Space
android:layout_width="match_parent"
android:layout_height="required_spacing_in_dp" />
</LinearLayout>
</ScrollView