Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ExtendedFloatingActionButton - how to achieve same height when button is extended as when it's shrank

I'm using latest material components - 1.1.0-beta01.

When ExtendedFloatingActionButton expands, its height also reduces.

fab shrinked

fab expanded

Here is how xml layout looks:

<?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/main_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="56dp"
       android:text="Text"
       android:textColor="#02220D"
       android:backgroundTint="#F2C203"
       style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
       android:textSize="15sp"
       android:fontFamily="sans-serif-medium"
       android:textStyle="normal"
       android:layout_marginBottom="16dp"
       android:layout_marginEnd="16dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:iconTint="#02220D"
       app:icon="@drawable/ic_camera"
       app:iconPadding="10dp"
       android:insetLeft="0dp"
       android:insetBottom="0dp"
       android:insetTop="0dp"
       android:insetRight="0dp"
       />

</androidx.constraintlayout.widget.ConstraintLayout>

I tried to set min and max height, but it didn't work. Any idea how to achieve the same height when button is expanded and shrank?

Thanks.

like image 273
Ivan Škugor Avatar asked Oct 07 '19 18:10

Ivan Škugor


People also ask

What is a floating action button?

A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.

What is floating action button in flutter?

The Floating Action Button is the most unique type of button widget provided in flutter. It is a widget that floats on the screen over other widgets. It appears as a circular icon on the screen with an icon in its center as its child. It is by default placed at the bottom-right corner of the screen.

Where is the floating action button?

We simply need to have the ListView and FloatingActionButton contained within the CoordinatorLayout and use the layout_anchor and layout_anchorGravity attributes. The button should be placed in the bottom right corner of the screen. The recommended margin for the bottom is 16dp for phones and 24dp for tablets.


1 Answers

The ExtendedFloatingActionButton is a MaterialButton.
You can use the android:minHeight attribute:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:minHeight="56dp"
    ../>

enter image description here

Otherwise you can define a custom style:

 <style name="CustomExtendedFloating"  parent="Widget.MaterialComponents.ExtendedFloatingActionButton.Icon">
    <item name="android:minHeight">56dp</item>
 </style>
like image 145
Gabriele Mariotti Avatar answered Sep 21 '22 08:09

Gabriele Mariotti