Skip to content

Instantly share code, notes, and snippets.

@gmk57
Created August 18, 2018 17:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gmk57/5e47497dd3958c57ac308d79663475f9 to your computer and use it in GitHub Desktop.
Save gmk57/5e47497dd3958c57ac308d79663475f9 to your computer and use it in GitHub Desktop.
Several ways to create large FloatingActionButton in Android
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_min"
android:src="@android:drawable/ic_btn_speak_now"
app:fabSize="mini"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_mini2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_min"
android:src="@drawable/ic_60dp"
app:fabSize="mini"
app:layout_constraintStart_toEndOf="@+id/fab_mini"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:text="Mini"
app:layout_constraintBottom_toBottomOf="@id/fab_mini2"
app:layout_constraintStart_toEndOf="@+id/fab_mini2"
app:layout_constraintTop_toTopOf="@+id/fab_mini2" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:src="@android:drawable/ic_btn_speak_now"
app:fabSize="normal"
app:layout_constraintStart_toEndOf="@id/tv_mini"
app:layout_constraintTop_toTopOf="@+id/fab_mini" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_normal2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:src="@drawable/ic_60dp"
app:fabSize="normal"
app:layout_constraintStart_toEndOf="@+id/fab_normal"
app:layout_constraintTop_toTopOf="@+id/fab_mini" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:text="Normal"
app:layout_constraintBottom_toBottomOf="@id/fab_normal2"
app:layout_constraintStart_toEndOf="@+id/fab_normal2"
app:layout_constraintTop_toTopOf="@+id/fab_normal2" />
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_min"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fab_mini">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom"
android:src="@android:drawable/ic_btn_speak_now" />
</FrameLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="FrameLayout"
app:layout_constraintBottom_toBottomOf="@id/frameLayout"
app:layout_constraintStart_toEndOf="@+id/frameLayout"
app:layout_constraintTop_toTopOf="@+id/frameLayout" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_100dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_min"
android:src="@android:drawable/ic_btn_speak_now"
app:fabSize="mini"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/frameLayout" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_24dp"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_min"
android:src="@android:drawable/ic_btn_speak_now"
app:fabSize="mini"
app:layout_constraintStart_toEndOf="@+id/fab_100dp"
app:layout_constraintTop_toTopOf="@+id/fab_100dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:text="layout_width/layout_height"
app:layout_constraintBottom_toBottomOf="@id/fab_100dp"
app:layout_constraintStart_toEndOf="@+id/fab_24dp"
app:layout_constraintTop_toTopOf="@+id/fab_100dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_scaled"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_horiz"
android:layout_marginTop="@dimen/margin_vert"
android:scaleX="2.5"
android:scaleY="2.5"
android:src="@android:drawable/ic_btn_speak_now"
app:fabSize="mini"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fab_100dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_scaled2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_horiz_x2"
android:layout_marginTop="@dimen/margin_vert"
android:scaleX="2.5"
android:scaleY="2.5"
android:src="@drawable/ic_60dp"
app:fabSize="mini"
app:layout_constraintStart_toEndOf="@+id/fab_scaled"
app:layout_constraintTop_toBottomOf="@+id/fab_100dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_scaled3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_horiz"
android:scaleX="0.6"
android:scaleY="0.6"
android:src="@android:drawable/ic_btn_speak_now"
app:fabSize="mini"
app:layout_constraintStart_toEndOf="@+id/fab_scaled2"
app:layout_constraintTop_toBottomOf="@+id/fab_100dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_scaled4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:scaleX="0.6"
android:scaleY="0.6"
android:src="@drawable/ic_60dp"
app:fabSize="mini"
app:layout_constraintStart_toEndOf="@+id/fab_scaled3"
app:layout_constraintTop_toBottomOf="@+id/fab_100dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_horiz"
android:text="scaleX/scaleY"
app:layout_constraintBottom_toBottomOf="@id/fab_scaled2"
app:layout_constraintStart_toEndOf="@+id/fab_scaled2" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_custom_100dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_vert"
android:src="@android:drawable/ic_btn_speak_now"
app:fabCustomSize="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fab_scaled" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_custom_100dp2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_vert"
android:scaleType="center"
android:src="@drawable/ic_60dp"
app:fabCustomSize="100dp"
app:layout_constraintStart_toEndOf="@+id/fab_custom_100dp"
app:layout_constraintTop_toBottomOf="@+id/fab_scaled" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_custom_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_vert"
android:src="@android:drawable/ic_btn_speak_now"
app:fabCustomSize="24dp"
app:layout_constraintStart_toEndOf="@+id/fab_custom_100dp2"
app:layout_constraintTop_toBottomOf="@+id/fab_scaled" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_custom_24dp2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:layout_marginTop="@dimen/margin_vert"
android:scaleType="center"
android:src="@drawable/ic_16dp"
app:fabCustomSize="24dp"
app:layout_constraintStart_toEndOf="@+id/fab_custom_24dp"
app:layout_constraintTop_toBottomOf="@+id/fab_scaled" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_min"
android:text="fabCustomSize"
app:layout_constraintBottom_toBottomOf="@id/fab_custom_100dp2"
app:layout_constraintStart_toEndOf="@+id/fab_custom_100dp2"
app:layout_constraintTop_toTopOf="@+id/fab_custom_100dp2" />
</android.support.constraint.ConstraintLayout>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:tint="#FFFFFF"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M20,5h-9.12L10,2L4,2c-1.1,0 -2,0.9 -2,2v13c0,1.1 0.9,2 2,2h7l1,3h8c1.1,0 2,-0.9 2,-2L22,7c0,-1.1 -0.9,-2 -2,-2zM7.17,14.59c-2.25,0 -4.09,-1.83 -4.09,-4.09s1.83,-4.09 4.09,-4.09c1.04,0 1.99,0.37 2.74,1.07l0.07,0.06 -1.23,1.18 -0.06,-0.05c-0.29,-0.27 -0.78,-0.59 -1.52,-0.59 -1.31,0 -2.38,1.09 -2.38,2.42s1.07,2.42 2.38,2.42c1.37,0 1.96,-0.87 2.12,-1.46L7.08,11.46L7.08,9.91h3.95l0.01,0.07c0.04,0.21 0.05,0.4 0.05,0.61 0,2.35 -1.61,4 -3.92,4zM13.2,12.88c0.33,0.6 0.74,1.18 1.19,1.7l-0.54,0.53 -0.65,-2.23zM13.97,12.12h-0.99l-0.31,-1.04h3.99s-0.34,1.31 -1.56,2.74c-0.52,-0.62 -0.89,-1.23 -1.13,-1.7zM21,20c0,0.55 -0.45,1 -1,1h-7l2,-2 -0.81,-2.77 0.92,-0.92L17.79,18l0.73,-0.73 -2.71,-2.68c0.9,-1.03 1.6,-2.25 1.92,-3.51L19,11.08v-1.04h-3.64L15.36,9h-1.04v1.04h-1.96L11.18,6L20,6c0.55,0 1,0.45 1,1v13z" />
</vector>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="60dp"
android:height="60dp"
android:tint="#FFFFFF"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M20,5h-9.12L10,2L4,2c-1.1,0 -2,0.9 -2,2v13c0,1.1 0.9,2 2,2h7l1,3h8c1.1,0 2,-0.9 2,-2L22,7c0,-1.1 -0.9,-2 -2,-2zM7.17,14.59c-2.25,0 -4.09,-1.83 -4.09,-4.09s1.83,-4.09 4.09,-4.09c1.04,0 1.99,0.37 2.74,1.07l0.07,0.06 -1.23,1.18 -0.06,-0.05c-0.29,-0.27 -0.78,-0.59 -1.52,-0.59 -1.31,0 -2.38,1.09 -2.38,2.42s1.07,2.42 2.38,2.42c1.37,0 1.96,-0.87 2.12,-1.46L7.08,11.46L7.08,9.91h3.95l0.01,0.07c0.04,0.21 0.05,0.4 0.05,0.61 0,2.35 -1.61,4 -3.92,4zM13.2,12.88c0.33,0.6 0.74,1.18 1.19,1.7l-0.54,0.53 -0.65,-2.23zM13.97,12.12h-0.99l-0.31,-1.04h3.99s-0.34,1.31 -1.56,2.74c-0.52,-0.62 -0.89,-1.23 -1.13,-1.7zM21,20c0,0.55 -0.45,1 -1,1h-7l2,-2 -0.81,-2.77 0.92,-0.92L17.79,18l0.73,-0.73 -2.71,-2.68c0.9,-1.03 1.6,-2.25 1.92,-3.51L19,11.08v-1.04h-3.64L15.36,9h-1.04v1.04h-1.96L11.18,6L20,6c0.55,0 1,0.45 1,1v13z" />
</vector>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="margin_min">8dp</dimen>
<dimen name="margin_vert">40dp</dimen>
<dimen name="margin_horiz">40dp</dimen>
<dimen name="margin_horiz_x2">80dp</dimen>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="margin_min">0dp</dimen>
<dimen name="margin_vert">8dp</dimen>
<dimen name="margin_horiz">24dp</dimen>
<dimen name="margin_horiz_x2">48dp</dimen>
</resources>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment