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.
Related
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;
}
}
I'm trying to achieve a layout where my view will extend all the way across the screen, under the ActionBar, and the ActionBar will be transparent. I also need the ActionBar and BottomNavigationView to hide on scroll, so I'm using CoordinatorLayout.
I'm using the AppCompat theme with the attribute <item name="windowActionBarOverlay">true</item> in order to have my views extend under the ActionBar. However, after adding app:layout_behavior="#string/appbar_scrolling_view_behavior" to my container Fragment, the view gets placed below the ActionBar.
Is there a way to prevent this part of the appbar_scrolling_behaviour? I've tried without the behaviour, but the scrolling of the AppBar is not synced witht he RecyclerView scrolling underneath it. Thank you!
Here's a gif of the problem
P.S.: I'm trying to use the Android Navigation Component, so I'm following a single activity, multi fragment architecture, if that matters.
Try this code and make some changes because i used androidx..
make main layout like this way..
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
android:theme="#style/MyToolbar"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:titleTextAppearance="#style/MyToolbar">
<ImageView
android:id="#+id/headerIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_6sdp"
android:src="#drawable/ic_edit_location_black"
android:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_6sdp">
<TextView
android:id="#+id/header"
style="#style/MyToolbar"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:gravity="center_vertical"
android:textColor="#color/primary"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/ivSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_10sdp"
android:src="#drawable/search_icon"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/activity_main_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomContainer"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
<RelativeLayout
android:id="#+id/bottomContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bvTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Widget.BottomNavigationView"
app:itemIconTint="#drawable/navigation_drawable_tint"
app:itemTextColor="#drawable/navigation_drawable_tint"
app:menu="#menu/bottom_menu_item" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am currently working with BottomNavigationView and FloatingActionButton.
What i want to achieve is this below design:
And what i have tried:
<?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"
app:layout_insetEdge="bottom"
tools:context=".activity.BottomNavPrimary">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_primary"></android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
Your design looks as if you want to use the new BottomAppBar from the MaterialComponents that will fully be release with Android P. Especially if the left icon stands for a kind of side navigation it could be the right navigation element.
However, you have to be aware, that the elements on the left and right of the FAB have a different purpose than a bottom navigation. Instead of being entry points to "primary destinations" in an app, the BottomAppBar is defined as:
A bottom app bar displays navigation and key actions at the bottom of mobile screens.
So it is for page actions (like opening the dashboard or search). More explanation can be found in the design documentation.
I haven't had a chance to implement it yet (because I really needed it with a bottom navigation), but here is the code documentation example:
<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="match_parent">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"/>
</android.support.design.widget.CoordinatorLayout>
So to me, it sounds as if you define your two page menu options and since the FAB is anchored to the bar it will push them to the sides.
The documentation also includes options for the optional FAB cradle that was shown during this year's Google I/O and shows how to handle menu and click handling.
Here is another useful link on how to set up gradle to include the new material components in your project.
I used this, to get something similar.
BottomNavigationView + FloatingActionButton
<androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_button"
style="#style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:backgroundTint="#color/colorPrimaryLight"
app:elevation="#dimen/padding_10"
app:layout_constraintBottom_toTopOf="#id/navigation"
app:layout_constraintLeft_toRightOf="#id/navigation"
app:layout_constraintRight_toLeftOf="#id/navigation"
app:layout_constraintTop_toBottomOf="#id/navigation"
app:layout_constraintTop_toTopOf="#id/navigation"
app:layout_insetEdge="bottom"
app:srcCompat="#drawable/ic_add_black_24dp"
app:tint="#color/colorPrimary" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimaryDark"
android:visibility="visible"
app:itemIconTint="#drawable/bottom_navigation_icons"
app:itemTextColor="#drawable/bottom_navigation_icons"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
My solution simple and cool.
Parent layout must be a CoordinatorLayout and use BottomAppBar with FloatingActionButton as you can see below
<?xml version="1.0" encoding="utf-8"?>
<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">
<-- your other views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/homePage"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_drawable"
android:padding="#dimen/small_margin"
app:tint="#color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:padding="#dimen/small_margin"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_drawable" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/categories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_drawable"
app:backgroundTint="#color/colorPrimary"
app:layout_anchor="#id/navigation"
app:tint="#android:color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Result:
You could wrap your BottomNavigationView and your FloatingActionButton in a ConstraintLayout and use the following constraints on the FloatingActionButton:
app:layout_constraintTop_toBottomOf="#id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="#id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="#id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="#id/bottomNavPrimary"
This will center your FloatingActionButton vertically and horizontally relative to your BottomnavigationView
I hope that is what you asked for.
Final code would look something like this:
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="#id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="#id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="#id/bottomNavPrimary"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toTopOf="parent"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_primary" />
</android.support.constraint.ConstraintLayout>
I think you can do this with bottomAppBar and embed some button inside that like below
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:fabCradleDiameter="8dp"
style="#style/Widget.MaterialComponents.BottomAppBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/btnReport"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_play"
android:layout_weight="1"
android:paddingRight="20dp"
/>
<ImageButton
android:id="#+id/btnPlayWords"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_show_chart"
android:layout_weight="1"
android:paddingLeft="20dp"
/>
</LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fabAddWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I am struggling to create collapsing image header alongside Constraint where my design looks like this
Currently the profile pic is a part of the ConstraintLayout because it needs Guideline constraints and unfortunately it is overlapped by the AppBarLayout
Any ideas how to achieve that?
Can't find any source regarding my combination of layouts.....
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/playerViewBg"
android:fitsSystemWindows="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/bgIV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/header_bg" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/playerIV"
android:layout_width="177dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="62dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/profilePic"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<!-- Other content -->
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.27" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.73" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Following is the snippet of my working layout:
Please make sure that you haven't make any childview height to match parent(0 dp) inside constrianlayout also for scroll view android:fillViewport="true". Ask me if any doubt Occur.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:fitsSystemWindows="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivImagec"
android:layout_width="wrap_content"
android:layout_height="#dimen/_90sdp"
android:contentDescription="#string/no_des"
android:scaleType="centerCrop"
app:srcCompat="#drawable/outdoorgames" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/_90sdp"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/cvLayout"
android:animateLayoutChanges="true">
....
</android.support.constraint.ConstraintLayout>
I've actually recently started thinking about this
And based on this talk here from two of the devs behind Android Studio :
https://www.youtube.com/watch?v=8lAXJ5NFXTM (at the 21 mins: 28 seconds mark)
It is definitely possible, they recommend replacing the CollapsingToolbarLayout completely with the ConstraintLayout.
I want to achieve the following:
Overlay the whole activity with a LinearLayout that is currently not visible and revealed with a CircularReveal animation. It should then look like this. (Also, the Fab should be hidden beneath the semi transparent background of the overlay.)
The screenshot was taken from Android Studio's preview.
But instead it looks like this when testing on my phone.
The toolbar and the fab are above the overlay. I attached my layout below.
I know, I could also solve this with a new activity that is drawn over the previous one with a transparent theme but I would prefer this method as it is easier to work with in the future.
<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.jonas.gimmefood.MapsActivity">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.gimmefood.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/Theme.gimmefood.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<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:fabSize="normal"
android:elevation="2dp"
app:srcCompat="#drawable/ic_my_location_24dp" />
<!-- This is the overlay -->
<LinearLayout
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:background="#color/primary_dark"
android:orientation="vertical"
android:elevation="2dp">
<!-- elevation for the drop shadow -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginEnd="52dp"
android:layout_marginStart="4dp"
android:hint="#android:string/search_go" />
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_close_icon"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_gravity="end"
android:layout_marginEnd="4dp"
android:background="?selectableItemBackgroundBorderless"
android:src="#drawable/ic_close_24dp" />
</FrameLayout>
horizontal list view with all the circular buttons
...
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_transparent"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I solved it by using PopupWindow (reference here)