I want to make a bottombar with attach fab button like given below image. If anyone knows about that type of different shape button library with a bottom with fab then suggest to me.
The image is given below make a bottombar with fab like this.
I want to make a bottombar with attach fab button like given below image. If anyone knows about that type of different shape button library with a bottom with fab then suggest to me.
The image is given below make a bottombar with fab like this.
In order to use latest style BottomAppBar in your app.
1) Include Google Maven repository in build.gradle.
allprojects {
repositories {
jcenter()
maven {
url "https://maven.google.com"
}
}
}
2) Place material components dependency in your build.gradle
. Keep in mind that
material version is regularly updating.
implementation 'com.google.android.material:material:1.0.0-alpha1'
3) Make sure your app inherits Theme.MaterialComponents
theme in order to make BottomAppBar use the latest style. Alternatively you can declare the style for BottomAppBar in widget declaration within layout xml file as follows.
style=”@style/Widget.MaterialComponents.BottomAppBar”
You can include BottomAppBar in your layout as follows. BottomAppBar must be a child of CoordinatorLayout.
<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:navigationIcon="@drawable/baseline_menu_white_24"/>
You can anchor a Floating Action Button (FAB) to BottomAppBar by specifying the id of the BottomAppBar in app:layout_anchor
attribute of the FAB. BottomAppBar can cradle FAB with a shaped background or FAB can overlap BottomAppBar.
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />
THANKS
It is just an idea the code can be improved.
You can change the shape of the
FloatingActionButton
with theshapeAppearanceOverlay
attribute:with:
Then you can define the
BottomAppBar
in your layout:Finally you can apply to the
BottomAppBar
aTopEdgeTreatment
. Something like:Where the
BottomAppBarCutCornersTopEdge
is something like:To obtain a better result you should extend the
CutCornerTreatment
, implementing in thegetCornerPath
method the same path used in theBottomAppBar
and apply it to theFloatingActionButton
.