My MainActivity's got a RecyclerView and a BottomNavigationView. Items in the RecyclerView are CardViews.
When I click an item that's halfway obscured by the BottomNavigationView (- will call it BNV), it "pops" over the BNV, then slides up to become the header in LaunchedActivity.
When backing out of LaunchedActivity, it slides down, over the BNV, then "snaps" back into place:
How can I either:
Have the shared content appear to slide from underneath the BNV,
or failing that,
Have the shared content start off invisible, and fade as it slides to the header
I've tried playing with the elevation of the BNV, I've tried setting sharedElementEnterTransition to Fade(), I've tried specifying excludeTarget with BottomNavigation; I can't seem to make things work how I'd like.
Here's the layout for MainActivity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Activity_launched is here:
<?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=".LaunchedActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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_launched"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
And content_launched:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_launched"
tools:context=".LaunchedActivity">
<LinearLayout
android:id="#+id/launched_header"
android:transitionName="header" android:layout_width="0dp" android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
android:orientation="vertical" app:layout_constraintEnd_toEndOf="parent"
android:background="#android:color/holo_blue_bright"
android:layout_marginEnd="8dp">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/launched_title"/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/launched_text"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Items in the RecyclerView call MainActivity.onItemClicked:
fun onItemClicked(view: View, item: Item) {
val intent = Intent(applicationContext, LaunchedActivity::class.java)
intent.putExtra("ITEM", item)
val options = ActivityOptions.makeSceneTransitionAnimation(
this,
android.util.Pair<View, String>(view, "header")
)
startActivity(intent, options.toBundle())
}
This is the array that's in the recycler:
data class Item(val title: String, val text: String): Serializable
val itemList = listOf(Item("One", "1"), Item("Two", "2"),
Item("Three", "3"), Item("Four", "4"), Item("Five", "5"))
Lastly, this is from LaunchedActivity.onCreate:
with(window) {
requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
sharedElementEnterTransition = AutoTransition()
sharedElementExitTransition = AutoTransition()
}
LaunchedActivity.onCreate pulls the item out of the intent and sets launched_title and launched_text.
Add in recyclerView's item's CardView
app:cardMaxElevation="8dp"
and give your BNV
app:elevation="16dp"
give it a try, try with more difference in elevation as clicked cardview has more elevation than actual elevation
Have you heard of clipToPadding it can add padding to the bottom views so it does not obstruct the bottom views.
So try setting clipToPadding = "true" and check if it solves.
Android what does the clipToPadding Attribute do?
Also your layout activity file has <RecyclerView> set to 0dp.
Use a <RelativeLayout> outside and set layout_above="#bnv" in <RecyclerView> somewhat similar to this.
<?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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/navigation1"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.nxtoff.plzcome.commonutills.BottomNavigationViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_below="#+id/viewpager"
android:background="#999999" />
</RelativeLayout>
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/nav_item_colors"
app:itemTextColor="#drawable/nav_item_colors"
app:menu="#menu/navigation" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/xfb_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom|center_horizontal"
android:layout_margin="22dp"
android:layout_marginBottom="30dp"
android:background="#color/colorloader"
android:clickable="true"
android:src="#drawable/plus_fab"
android:tint="#color/colorviolet"
app:backgroundTint="#color/colorloader"
app:elevation="8dp"
app:fabSize="normal"
/>
</RelativeLayout>
EDIT 1:
Try out this code and let me know.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:layout_above="#id/bottomNavigationView"
android:layout_alignParentTop="true"
android:layout_marginBottom="8dp"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/navigation"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
Related
It looks like my layouting is bad.
So I have a recycler view and the top app bar inside constraint layout (for positioning). And I have a swipe refresh as container. But when I run my app, the last item of recycler view is not show fully (get cut/truncated)
Here is my xml layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/swipe_refresh_layout"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".view.ThirdScreen">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/top_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/rv_user">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/material_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="#drawable/baseline_arrow_back_ios_24"
app:navigationIconTint="#554AF0"
app:title="Third Screen"
app:titleCentered="true"
style="#style/ThemeOverlay.MaterialComponents.Toolbar.Primary"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toBottomOf="#id/top_app_bar"
app:layout_constraintStart_toStartOf="parent" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
I am trying to achieve something with collapsible toolbar layout and I have 2 tabs with a viewPager2
Below are two images for example for the case of expanded screenshot and collapsed screenshot.
Below is the code I have in XML not sure where it is going wrong... my scroll is not working proper in this case. I want the toolbar to be stick on top when collapsed
I tried adding toolbar inside AppbarLayout but that didn't worked.
Also tried below links
somehow not working for me Link1 Link2
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_dark_blue">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white_cream_darkest_blue"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:windowSoftInputMode="adjustResize">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_cream_darkest_blue"
app:collapsedTitleTextAppearance="#color/text_color"
app:contentScrim="#color/white_cream_darkest_blue"
app:expandedTitleTextAppearance="#color/text_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/white_cream_darkest_blue">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginTop="40dp"
android:layout_marginEnd="#dimen/margin_end"
android:orientation="vertical">
<TextView
android:id="#+id/textViewTitle"
style="#style/screen_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:text="Mailing\nAddress"
android:textColor="#color/text_color" />
<TextView
android:id="#+id/textViewSubTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto_light"
android:text="We'll send your bill to this address."
android:textAlignment="center"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="30dp" />
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
android:windowSoftInputMode="adjustResize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/text_service"
app:title="">
<TextView
android:id="#+id/menuOption"
style="#style/screen_sub_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_medium"
android:text="Mailing Address"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:clipToPadding="false"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayoutMailingAddress"
style="#style/tabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_start"
android:layout_marginEnd="#dimen/margin_end"
app:layout_constraintTop_toTopOf="parent"
app:tabInlineLabel="true"
app:tabTextAppearance="#style/MyCustomTextAppearance" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPagerMailingAddress"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_percent="1.2"
app:layout_constraintTop_toBottomOf="#+id/tabLayoutMailingAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
ViewPager2 won't work well inside NestedScrollView as its inner RecyclerView enables the nested scrolling by default.
To fix the misbehavior, you need to disable this nested scrolling of the ViewPager2 RecyclerView programmatically as it's not accessible in layout:
Kotlin:
viewPager.children.find { it is RecyclerView }?.let {
(it as RecyclerView).isNestedScrollingEnabled = false
}
Java:
for (int i = 0; i < viewPager.getChildCount(); i++) {
View child = viewPager.getChildAt(i);
if (child instanceof RecyclerView) {
((RecyclerView) child).setNestedScrollingEnabled(false);
break;
}
}
As one can see in image, RecyclerView items are visible through Standard/Persistent BottomSheet and collapsing/expanding of BottomSheet is also not happening in Standard/Persistent BottomSheet. RecyclerView items are scrollable but when I do any kind of activity in Standard/Persistent BottomSheet, it directly scrolling the RecyclerView item behind this Standard/Persistent BottomSheet.
Note: Background color used in BottomSheet is solid. It's not transparent.
I'm wondering how to solve this issue?
Here's the code snippet ->
activity_main.xml
<?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:id="#+id/layout_container_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/layout_container_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<include
android:id="#+id/included_layout_standard_bottom_sheet"
layout="#layout/layout_standard_bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
layout_standard_bottom_sheet.xml
<?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"
android:id="#+id/layout_container_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/bottom_sheet_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/thumbnail"
android:layout_width="?actionBarSize"
android:layout_height="?actionBarSize"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/thumbnail"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.slider.Slider
android:id="#+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/summary" />
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see in the image your bottom sheet is behind the recycler view. To change that you have to change the order of recyclerview and coordinatelayour in your activity_main.xml
You can try by changing the order like this
<?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:id="#+id/layout_container_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/layout_container_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:context="app.standardbottomsheet.ui.MainActivity">
<include
android:id="#+id/included_layout_standard_bottom_sheet"
layout="#layout/layout_standard_bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Since both recycler view and CoordinatorLayout are match_parent, There order decide which is above to another.
schema
As shown in the picture, I want my 2 views ( recycler view and collapsing content ) to be responding only to the middle grip bar ( it could be 50dp height constraint layout - for example )
Moving this bar should collapse the upper part - and make recyclerview change its height. The bar shouldn't be able to move lower than the upper part content. Recycler view should be able to scroll independently all the time.
How to make only restricted area respond to touch events?
How to make recyclerview height depend on grip position ?
Now in my case, the collapsing part is getting hidden just after i start scrolling recyclerview.
If there is not enough information, I'll add whatever required.
Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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/activityToDo"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.ToDoActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:hint="Note title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/noteTitle"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintEnd_toStartOf="#+id/guideline"
android:layout_marginEnd="10dp"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:inputType="text" app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:hint="Note priority"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/notePriority"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toStartOf="#+id/guideline"
android:layout_marginStart="10dp"
android:layout_marginTop="15dp"
android:textSize="15sp"
android:inputType="number" app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.Guideline
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_begin="197dp"
android:id="#+id/guideline"/>
<EditText
android:hint="Note description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/noteDescription"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintTop_toBottomOf="#+id/notePriority"
android:layout_marginTop="20dp"
android:textSize="15sp"/>
<Button
android:text="Save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/saveButton"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintEnd_toStartOf="#+id/guideline" android:layout_marginEnd="10dp"
android:layout_marginBottom="20dp" app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="10dp" app:layout_constraintTop_toBottomOf="#+id/noteDescription"/>
<Button
android:text="Clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/clearButton"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="#+id/guideline"
android:layout_marginStart="10dp" android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/noteDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<TextView
android:text="All notes"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/allNotesRecyclerView"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="#id/collapsingToolbar"
android:layout_marginTop="16dp"
android:textSize="15sp"/>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
GitHub Repo
in my case like this :
add app:layout_behavior="#string/appbar_scrolling_view_behavior" on your recyclerview and look my CollapsingToolbarLayout and my Toolbar
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".myactivity.DetailWisataActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_detail"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?colorPrimary"
app:expandedTitleGravity="center_horizontal|bottom"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
<ImageView
android:id="#+id/img_bg_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:scaleType="centerCrop"
android:src="#drawable/bg_beach"
app:layout_collapseMode="pin"
tools:targetApi="m" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorTransparantBlackLow" />
<ProgressBar
android:id="#+id/progress_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_detail"
android:layout_width="match_parent"
android:layout_height="#dimen/actionBarSizeLow"
android:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:title="#string/info_wisata" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
............Your recyclerview here.......
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and remove your Linearlayout.
Fisrt remove your LinearLayout from parent of recyclerview and try this:
<androidx.coordinatorlayout.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="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- HEADER -->
<RelativeLayout
...
app:layout_collapseMode="parallax">
.....
</RelativeLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
<!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="choose item" />
-->
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Same question answer: Link
With the newest version of Android Studio (4.0 Canary 9), you can use the new MotionLayout layout type to transition between different ConstraintLayouts. The simplest solution (below) wouldn't necessarily let you change the RecyclerView height to whatever you wanted, but you could smoothly transition between two different layouts when the user swipes up or down.
In short, you would do the following:
In your build.gradle (Module: app) file, add the following line:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'
Create a new ConstraintLayout layout file that determines how all of your views should be arranged at the beginning
Convert that ConstraintLayout to a MotionLayout using the right-click menu in the layout editor
In the MotionLayout editor, add constraints to each view in the "start" and "end" layouts
In the new MotionScene XML file that was added to the XML folder in your res folder, edit the tag to look like this:
<Transition
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#id/start"
>
<OnSwipe
app:touchAnchorSide="top"
motion:touchAnchorId="#id/YOUR_GRIP_VIEW"
motion:dragDirection="dragUp" />
<KeyFrameSet>
</KeyFrameSet>
</Transition>
* In the MotionLayout Codelab, it says to use app:touchAnchorID instead of motion:touchAnchorId but that didn't work for me *
Now, when you swipe your grip view up or down, the MotionLayout can transition between states.
My goal is to place a "bottom sheet" on top of a BottomNavigationView like this:
But it stays the following way. Both views collapse:
This is the xml of my main 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/tierrota"
tools:context="com.example.juanjose.myapplication.ViajesActivity">
<!-- include main content -->
<include layout="#layout/bottomsheet" />
<!-- include bottom sheet -->
<include layout="#layout/bottom_navigation" />
</android.support.design.widget.CoordinatorLayout>
Code of bottom_navigation:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorClarito"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
And code of bottom sheet
<?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"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/colorBackgroundSemi"
android:gravity="center"
android:text="Bandeja de entrada"
android:fontFamily="#font/eraslght"
android:textColor="#color/colorLetra"
app:layout_anchor="#+id/bottom_navigation"
app:layout_anchorGravity="top"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="coisa2"
android:textColor="#android:color/white" />
</LinearLayout>
I am new with these two elements. Is there someone who knows any way to achieve what I'm looking for?
I want my "bottom sheet" to act as such and can expand. My ultimate goal is to add a RecyclerView inside the BottomSheet.
To use the BottomSheet, it should be a child of the CoordinatorLayout. Here I have used relative layout as a parent layout for bottom navigation to stay at the bottom and then CoordinatorLayout above bottom navigation.
Here's a article that will help you.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_above="#id/bottom_navigation_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bottom_sheet_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:id="#+id/bottom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="20dp"
android:layout_height="4dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/view_bottom_sheet_top" />
<TextView
android:id="#+id/near_by"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/normal"
android:gravity="center"
android:includeFontPadding="false"
android:padding="10dp"
android:text="Book Now"
android:textAllCaps="true"
android:textColor="?attr/colorPrimaryText"
android:textSize="12sp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_maps"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bottom_view"
android:layoutAnimation="#anim/layout_animation">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/bottom_navigation_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:fitsSystemWindows="true"
app:elevation="1dp">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorContainerBackground"
/>
<!-- Start BottomNavigationView -->
<!-- End BottomNavigationView -->
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
Don't forget to add this in your Activity/Fragment
private RelativeLayout bottomSheetParentLayout;
private BottomSheetBehavior mBottomSheetBehaviour;
mBottomSheetBehaviour = BottomSheetBehavior.from(bottomSheetParentLayout);
if (bottomNavigation != null) {
mBottomSheetBehaviour.setPeekHeight(bottomNavigation.getHeight() + 90);
}
Wrap the two elements inside a linear layout. Not sure how coordinator layout behaves but I think it will not allow you to "order" elements (similar to frame layout).
As far as I have understood your question, you want the RecyclerView to be shown in your bottom sheet. That is what makes the problem a lot easier. Let me tell you how.
You need to have a fixed height for your bottom navigation like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorClarito"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
Now in your bottom sheet, configure the RecyclerView with a clipToPadding attribute in it. Which will have some padding at the bottom of your RecyclerView. The idea is to have nothing in the covered area of the RecyclerView which is coming out with the bottom sheet.
Here's how you should declare your RecyclerView in your bottom sheet.
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="80dp" />
Note that, I set the paddingBottom exactly to 80dp which is the height of the navigation view.
I hope this might help.
If you also have a CollapsingToolBar/Toolbar arrangement, this is the best solution for you:
<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"
android:clickable="true">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/cord_main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toTopOf="#id/home_bottom_navigation_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/home_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/home_frag_toolbar"
style="#style/Widget.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:logo="#drawable/ic_infinet_logo_white"
app:navigationIcon="#drawable/ic_back_arrow" />
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/home_frag_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:id="#+id/bottom_sheet_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:clickable="true"
app:behavior_hideable="true"
app:behavior_peekHeight="#dimen/mini_player_height"
app:behavior_skipCollapsed="false"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<FrameLayout
android:id="#+id/player_frag_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
android:id="#+id/player_mini_frag_container"
android:name="com.kokonetworks.kokonet.player.PlayMusicMiniFragment"
android:layout_width="match_parent"
android:layout_height="#dimen/mini_player_height" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/home_bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"
app:itemBackground="#color/colorPrimary"
app:itemHorizontalTranslationEnabled="false"
app:itemIconTint="#drawable/nav_item_background"
app:itemTextColor="#drawable/nav_item_background"
app:labelVisibilityMode="auto"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/home_bottom_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
It ensures that:
BottomSheet is a child of the CoordinatorLayout
BottomNavigation is still rested at the bottom
CollapsingToolbar/AppBarLayout arrangement is still in place as expected
To use the BottomSheet, it should be a child of the CoordinatorLayout, as iamnaran said.
So simply:
Put everything in RelativeLayout
Put BottomSheet in CoordinatorLayout
Set the BottomNavigation property "alignParentBottom" to true
Make new xml file in /res/value and put
<resources>
<dimen name="bottomNavigationHeight">50dp</dimen>
</resources>
Set the MarginBottom of the CoordinatorLayout (parent of BottomSheet) to
android:layout_marginBottom="#dimen/bottomNavigationHeight"
You can skip steps 4 and 5 by setting the MarginBottom of the CoordinatorLayout to:
android:layout_marginBottom="50dp"
But this may lead to confusion in near future
The whole code should look something 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"
>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/clBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/bottomNavigationHeight">
<FrameLayout
android:id="#+id/standardBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:elevation="9dp"
style="?attr/bottomSheetStyle"
app:layout_behavior = "com.google.android.material.bottomsheet.BottomSheetBehavior"
app:behavior_peekHeight="80dp">
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bttm_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_menu_nav"
>
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>