The ActionBar overlaps the TextView. Why? The constraints are correct imho. It works fine with RelativeLayout. I mainly use two ConstraintLayout to add some padding which should not affect the ActionBar.
Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.appcompat.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ffffff"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="20dp"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="10dp"
android:paddingRight="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/xxxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xxxxxxx"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#000000"
app:layout_constraintTop_toTopOf="#+id/constraintLayout2"
app:layout_constraintStart_toStartOf="#+id/constraintLayout2"/>
change your 2nd ConstraintLayout height to wrap_content or if you want full height then give bottom constraint and height to 0dp like below
<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.appcompat.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ffffff"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/xxxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xxxxxxx"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#000000"
app:layout_constraintStart_toStartOf="#+id/constraintLayout2"
app:layout_constraintTop_toTopOf="#+id/constraintLayout2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
I've seen answers from this thread, but I'm wondering if it's possible to do this in XML by adding a button component.
Earlier I had a button wrapped within a CardView, which will float as the users scrolling the RecyclerView, so I had a lot of code associated with this button. But now I need to make this button stay at the bottom of the screen instead of floating. I've tried to add another level of LinearLayout or even change the CoordinatorLayout to LinearLayout, but none of these worked.
Here's my original XML:
<androidx.coordinatorlayout.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/ui_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.pages.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<include layout="#layout/common_toolbar_with_buttons" />
</androidx.appcompat.widget.Toolbar>
<android.common.view.indicator.LoadingIndicatorBar
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="visible" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/ui_attribute_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="#dimen/item_input_attribute_list"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<androidx.cardview.widget.CardView
android:id="#+id/ui_button_next_container"
android:layout_width="match_parent"
android:layout_height="#dimen/button_height_normal"
android:layout_gravity="center_horizontal|bottom"
android:layout_margin="24dp"
android:layout_marginBottom="8dp"
app:cardBackgroundColor="#color/colorAccent_Light"
app:cardElevation="12dp"
app:cardPreventCornerOverlap="true"
app:layout_dodgeInsetEdges="bottom">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pointed_gradient" />
<android.common.view.tint.TintFancyButton
android:id="#+id/ui_button_next"
style="#style/TransparentButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/msg_save_current_input"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold"
app:fb_borderColor="#2fffffff"
app:fb_borderWidth="2dp"
app:fb_defaultColor="#color/transparent"
app:fb_focusColor="#color/colorAccent_Light"
app:fb_textColor="#FFF" />
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Take a constraint layout outside of your recycler view and button and then make the button app:layout_constraintTop_toBottomOf="#id/recyclerview" in xml. Or you can also use linear layout in place of constraint layout, and set android:orientation="vertical".
This is the code.
<androidx.coordinatorlayout.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/ui_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/Textsize25"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
>
</androidx.appcompat.widget.Toolbar>
<android.common.view.indicator.LoadingIndicatorBar
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="visible" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/ui_attribute_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="25dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ui_button_next_container"
app:layout_constraintVertical_bias="0.05"/>
<androidx.cardview.widget.CardView
android:id="#+id/ui_button_next_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_horizontal|bottom"
android:layout_margin="24dp"
android:layout_marginBottom="8dp"
app:cardElevation="12dp"
app:cardPreventCornerOverlap="true"
app:layout_dodgeInsetEdges="bottom"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_bias="1">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button
android:id="#+id/ui_button_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/msg_save_current_input"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold"
/>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I would recommend using a constraint layout to position all of your views.
In order to get the RecyclerView to fill the space between the top View and Button View. You'll need to use a match constraint for the RecyclerView height. To make the RecyclerView match the constraint height set the layout_height to 0dp.
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/ui_attribute_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:paddingBottom="25dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toTopOf="#+id/ui_button_next_container"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.05" />
I'm using the following code to place the FrameLayout below the toolbar.
<androidx.constraintlayout.widget.ConstraintLayout 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=".Dashboard">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/app_title"
android:paddingTop="20dp"
android:textAppearance = "#android:style/TextAppearance.Material.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App Name"
android:textStyle="bold"/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.constraintlayout.widget.ConstraintLayout>
How can I be able to position the FrameLayout to be always below the toolbar without setting margin_top as actionbarsize? I would like to have finer control over its position.
You can make the height as match constraints (0dp), and constraint it at the bottom to the parent and at the top to the Toolbar
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".Dashboard">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/app_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:text="App Name"
android:textAppearance="#android:style/TextAppearance.Material.Large"
android:textStyle="bold" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to achieve this effect (like medium android app toolbar), I want to hide a custom view, unfortunately I am not able to do. This is my layout.
https://i.ibb.co/KNp1zfV/2019-05-27-14-23-47.gif
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/filtersContainerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/left_rectangle_edge_view_size"
android:background="#drawable/custom_rectangle_ripple_background"
android:paddingBottom="#dimen/default_padding_extra_small"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/resultMessageTextView"
style="#style/DefaultTextStyle.Black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/separator_gray"
android:drawableEnd="#drawable/ic_pencil_edit"
android:drawablePadding="#dimen/default_margin_small"
android:paddingStart="#dimen/default_margin_medium"
android:paddingTop="#dimen/default_padding"
android:paddingEnd="#dimen/default_padding_large"
android:paddingBottom="#dimen/default_padding"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Searching for family medicine near Montevideo" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/filtersHeaderTextView"
style="#style/DefaultTextStyle.Black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin_medium"
android:layout_marginTop="#dimen/default_margin_extra_small"
android:text="#string/filters"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/resultMessageTextView" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/expandCollapseFilterOptionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?actionBarItemBackground"
android:padding="#dimen/default_margin_small"
app:layout_constraintBottom_toBottomOf="#+id/filtersHeaderTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/filtersHeaderTextView"
android:layout_marginEnd="#dimen/default_margin"
app:srcCompat="#drawable/ic_add"
app:tint="#color/colorPrimaryDark" />
<LinearLayout
android:id="#+id/filtersButtonsLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_margin_small"
android:orientation="horizontal"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/filtersHeaderTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/expandCollapseFilterOptionsImageView"
app:layout_constraintTop_toTopOf="#+id/filtersHeaderTextView"
tools:visibility="visible">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/applyFilterButton"
style="#style/SmallTextStyle.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/default_padding_small"
android:text="#string/apply"
android:textColor="#drawable/text_selector_primary_dark" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/clearFiltersButton"
style="#style/SmallTextStyle.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin_small"
android:padding="#dimen/default_padding_small"
android:text="#string/clear"
android:textColor="#drawable/text_selector_primary_dark" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/topSeparatorView"
android:layout_width="match_parent"
android:layout_height="#dimen/separator_height"
android:layout_marginStart="#dimen/left_rectangle_edge_view_size"
android:background="#color/separator_gray"
app:layout_scrollFlags="snap" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/resultContainerScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/providersResultRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/providers_result_margin_start"
android:overScrollMode="never" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
This thread on medium might serve exactly what you need, and here's another one if you want to dig deeper in the custom behaviors
Now to the answer:
1. 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"
android:id="#+id/main_content"
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/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<!-- call the content xml file-->
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
1. content_main.xml
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello world"/>
<!-- your content goes here-->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
3. Important note
content_main.xml use : android.support.v4.widget.NestedScrollView instead of ScrollView.
use app:layout_behavior="#string/appbar_scrolling_view_behavior" inside android.support.v4.widget.NestedScrollView like below.
if and only if you migrated to AndroidX make sure to change the design support library, if you still using android.support keep everything as it is.
UPDATE
Try the following changes:
1. add this to your ToolBar
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
2. add this to your NestedScrollLayout
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I'm trying to put an editText below the frameLayout. It works when the editText comes before the frameLayout but not after.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--TODO: Move to Fragment to enable hideOnScroll flag-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:id="#+id/toolbar"
app:layout_scrollFlags="enterAlways|scroll">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:textSize="18sp"
android:id="#+id/toolbarTitle"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container">
</FrameLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
I'm expecting the editText to show up after the frameLayout, but it just doesnt show up at all.
You can always use ConstraintLayout
here is the code:
<ConstraintLayout 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/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<!--TODO: Move to Fragment to enable hideOnScroll flag-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_scrollFlags="enterAlways|scroll">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout">
</FrameLayout>
</ConstraintLayout>
EditText not showing because you have set frameLayout height match parent
Change child LinearLayout to RelativeLayout
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context="com.journaldev.retrofitintro.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--TODO: Move to Fragment to enable hideOnScroll flag-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:id="#+id/toolbar"
app:layout_scrollFlags="enterAlways|scroll">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:textSize="18sp"
android:id="#+id/toolbarTitle"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appBarLayout"
android:layout_above="#+id/edit_query"
android:id="#+id/container">
</FrameLayout>
<EditText
android:id="#+id/edit_query"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
Use layout_weight for FrameLayout and make layout_height="0dp"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
...
...
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp" // make this "0dp"
android:layout_weight="1" // add this
android:id="#+id/container">
</FrameLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
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" />