I am new to Android and UI development. I have downloaded latest version of Windows Android studio and did some basic native UI, it worked well. Now, I am trying to develop floating action button UI.
I have added CoordinatorLayout inside ConstraintLayout. FAB is added inside CoordinatorLayout. My FAB is not visible in layout preview.
I see androidx.coordinatorlayout.widget.CoordinatorLayout text in that layout with background color. Please let me know how to fix this
implementation 'com.google.android.material:material:1.2.0'
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F44336"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="MissingConstraints">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_baseline_add_24"
android:layout_gravity="bottom|end"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
add constraintTop for your CoordinatorLayout for filling whole screen
app:layout_constraintTop_toTopOf="parent"
or even this will be better
android:layout_width="match_parent"
android:layout_height="match_parent"
with removing all constraints
for test you may also add fixed size FloatingActionButton. if you want to keep wrap_content for FAB then ensure that ic_baseline_add_24 is valid icon with proper size
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
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="#F44336"
tools:ignore="MissingConstraints">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="80dp"
android:layout_height="80dp"
android:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_baseline_add_24"
android:layout_gravity="bottom|end"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
in above code ConstraintLayout isn't needed and you may remove it if you aren't planning to make some more complicated layout. RecyclerView may be placed inside CoordinatorLayout just before FAB - at first REcyclerView will be drawn, after that FAB on top of recycler
Try
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F44336"
android:layout_gravity="bottom"
tools:ignore="MissingConstraints">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="104dp"
android:layout_height="107dp"
android:layout_gravity="center"
android:foregroundGravity="center"
android:visibility="visible"
android:src="#drawable/ic_baseline_add_24"
app:backgroundTint="#color/colorPrimary" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
Don't use a CoordinatorLayout with android:layout_height="wrap_content" to contain just the FAB:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvItems"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/ic_add_24px" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Related
i have a floatingActionButton inside a ConstraintLayout which is inside a ScrollView
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_grey">
<androidx.constraintlayout.widget.ConstraintLayout>
----
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bag_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
/>
-----
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
the problem is that the button is scrolling down and up with the UI
Ps: i don't know if it is important, but the scrollView is inside a drawerLayout
You can make Your root view as FrameLayout then inside it, you will but the ScrollView then the FAB button something like below
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_grey">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_grey">
<androidx.constraintlayout.widget.ConstraintLayout>
<!-- your view xml here -->
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/bag_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
/>
</FrameLayout>
To place the floating action button, use CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful to describe how to animate the button depending on scroll changes.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:layout_margin="16dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I tried to add Swipe-to-Refresh inside a fragment that contains a RecyclerView but after adding it the fragment becomes white.
Tried with a simple textview and in fragment .setRefreshing(true) and still the fragment is white.
If I move the Swipe to refresh layout to the activity everything works like a piece of charm.
My questions is what am I doing wrong or why I can't have the Swipe to refresh inside the fragment?
My fragment XML:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipeToRefresh"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</layout>
Activity XML:
<?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"
xmlns:tools="http://schemas.android.com/tools">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="100dp">
<FrameLayout
android:id="#+id/screenContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.core.widget.NestedScrollView>
<!-- TODO REFACTOR COLORS -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#000000"
app:fabCradleMargin="10dp"
app:hideOnScroll="true"
app:menu="#menu/bottom_app_bar"
app:navigationIcon="#drawable/ic_menu_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#e0f2f1"
app:layout_anchor="#id/bottomAppBar"
app:shapeAppearance="#style/FabDiamondOverlay"
app:srcCompat="#drawable/ic_add_24dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
Gradle:
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
Emulator:
Uploaded a sample project on github.
https://github.com/tirlaovidiu/swipe-to-refresh-bug-example
Solved::
NestedScrollView replaced with a ConstraitLayout and the issue went away.
I have an app with the one Activity, many Fragments model, where several Fragments have a RecyclerView to show cards with content. I also have implemented the BottomAppBar from Material Design 2.0, and everything is fine except when the AppBar blocks the last CardView in the RecyclerView.
In terms of layout, I have a RecyclerView inside ConstraintLayout inside a Fragment, which sits in a FrameLayout in the main activity.
The documentation shows that for the BottomAppBar to be hidden on Scroll, we need to implement RecyclerView inside a NestedScrollView. There is one question here on SO where the answer has stated the same as well, but there seems to be no actual documentation or examples to demonstrate how this is to be done, except for this article on Medium, which uses the NestedScrollView in an Activity directly, holding a CoordinatorLayout which holds a ConstraintLayout.
Note: I think it also works on magic, because duplicating the layout in my fragment doesn't have any effect at all in my app.
How do I use NestedScrollView here?
PS : I need to have the TextView, as I set the RecyclerView to VISIBILITY.GONE and set the TextView to VISIBLE when I have no data to display.
Fragment Layout
<android.support.constraint.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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="in.domain.APPNAME.Fragments.FragmentList">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewIncident"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="30dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/emptyView"
android:layout_width="wrap_content"
android:layout_height="17dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="No Incidents to display"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Activity Layout
<?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:id="#+id/uberLayout"
tools:context=".APPNAME">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/containerFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="#drawable/baseline_menu_white_24dp"
app:hideOnScroll="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.bottomappbar.BottomAppBar>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/baseline_add_white_24dp"
app:backgroundTint="#color/brightred"
app:fabSize="normal"
app:layout_anchor="#+id/bottom_app_bar"
tools:layout_editor_absoluteX="160dp"
tools:layout_editor_absoluteY="465dp" />
</android.support.design.widget.CoordinatorLayout>
</android.support.design.widget.CoordinatorLayout>
you shouldn't put the BottomAppBar and the FloatingActionButton in a separate CoordinatorLayout. Ditch the CoordinatorLayout they're in, the ConstraintLayout around your FrameLayout and that may already solve the problem.
<?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:id="#+id/uberLayout"
tools:context=".APPNAME">
<FrameLayout
android:id="#+id/containerFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="#drawable/baseline_menu_white_24dp"
app:hideOnScroll="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/baseline_add_white_24dp"
app:backgroundTint="#color/brightred"
app:fabSize="normal"
app:layout_anchor="#+id/bottom_app_bar" />
</android.support.design.widget.CoordinatorLayout>
I'm using a similar layout, the only difference being a <fragment> instead of a <FrameLayout>, and the BottomAppBar hides on scroll just fine. We don't need to use a NestedScrollView, if our scrolling content is a RecyclerView anyway, because RecyclerView implements NestedScrollingChild.
This interface should be implemented by View subclasses that wish to support dispatching nested scrolling operations to a cooperating parent ViewGroup.
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've tried using various layouts but that little bit that hangs outside the boundary of the rectangular toolbar doesn't work (the semi circle).
I want something like this:
How would I go about implementing this? I've something that visually looks like this but it is just an ImageView inside a relative layout. I want a proper Toolbar.
Well I do now know if you want this, but I've done this example for you, hope it helps.
This is the activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.v7.widget.Toolbar>
<android.support.constraint.Guideline
android:id="#+id/guidelineImageStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".33" />
<android.support.constraint.Guideline
android:id="#+id/guidelineImageEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".66" />
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/overlape_image"
app:layout_constraintDimensionRatio="W,1:1"
app:layout_constraintLeft_toLeftOf="#id/guidelineImageStart"
app:layout_constraintRight_toRightOf="#id/guidelineImageEnd"
app:layout_constraintTop_toTopOf="parent" />
<include layout="#layout/content_main" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Now you can play and adjust size of views.