floating action menu WIP

app/src/main/java/io/heckel/ntfy/ui/MainActivity.kt

@@ -65,6 +65,10 @@ class MainActivity : AppCompatActivity(), ActionMode.Callback, AddFragment.Subsc
     private lateinit var mainListContainer: SwipeRefreshLayout
     private lateinit var adapter: MainAdapter
     private lateinit var fab: FloatingActionButton
+    private lateinit var fabAddNormal: FloatingActionButton
+    private lateinit var fabAddNormalLabel: TextView
+    private lateinit var fabAddQr: FloatingActionButton
+    private lateinit var fabAddQrLabel: TextView
 
     // Other stuff
     private var actionMode: ActionMode? = null
@@ -87,9 +91,30 @@ class MainActivity : AppCompatActivity(), ActionMode.Callback, AddFragment.Subsc
         // Action bar
         title = getString(R.string.main_action_bar_title)
 
-        // Floating action button ("+")
+        // Floating action button and menu options ("+")
+        var isFabOpen = false
         fab = findViewById(R.id.fab)
+        fabAddNormal = findViewById(R.id.fab_add_normal)
+        fabAddNormalLabel = findViewById(R.id.fab_add_normal_label)
+        fabAddQr = findViewById(R.id.fab_add_qr)
+        fabAddQrLabel = findViewById(R.id.fab_add_qr_label)
+
         fab.setOnClickListener {
+            if (!isFabOpen) {
+                showFabMenu()
+                isFabOpen = true
+            } else {
+                closeFabMenu()
+                isFabOpen = false
+            }
+        }
+
+        fabAddNormal.setOnClickListener {
+            onSubscribeButtonClick()
+        }
+
+        fabAddQr.setOnClickListener {
+            //TODO: QR dialog instead
             onSubscribeButtonClick()
         }
 
@@ -214,6 +239,54 @@ class MainActivity : AppCompatActivity(), ActionMode.Callback, AddFragment.Subsc
         maybeRequestNotificationPermission()
     }
 
+    private fun showFabMenu() {
+        fabAddNormal.alpha = 0f
+        fabAddNormal.visibility = View.VISIBLE
+        fabAddNormal.animate().alpha(1f).translationY(-45.0f).setDuration(300).start()
+
+        fabAddNormalLabel.visibility = View.VISIBLE
+        fabAddNormalLabel.alpha = 0f
+        fabAddNormalLabel.animate().alpha(1f).translationY(-45.0f).setDuration(300).start()
+
+        fabAddQr.alpha = 0f
+        fabAddQr.visibility = View.VISIBLE
+        fabAddQr.animate().alpha(1f).translationY(-85.0f).setDuration(300).start()
+
+        fabAddQrLabel.visibility = View.VISIBLE
+        fabAddQrLabel.alpha = 0f
+        fabAddQrLabel.animate().alpha(1f).translationY(-85.0f).setDuration(300).start()
+
+        fab.animate().rotation(45.0f).setDuration(300).start()
+    }
+
+    private fun closeFabMenu() {
+        fabAddNormal.animate()
+            .translationY(0f)
+            .alpha(0f)
+            .setDuration(300)
+            .withEndAction { fabAddNormal.visibility = View.GONE }
+
+        fabAddNormalLabel.animate()
+            .translationY(0f)
+            .alpha(0f)
+            .setDuration(300)
+            .withEndAction { fabAddNormalLabel.visibility = View.GONE }
+
+        fabAddQr.animate()
+            .translationY(0f)
+            .alpha(0f)
+            .setDuration(300)
+            .withEndAction { fabAddQr.visibility = View.GONE }
+
+        fabAddQrLabel.animate()
+            .translationY(0f)
+            .alpha(0f)
+            .setDuration(300)
+            .withEndAction { fabAddQrLabel.visibility = View.GONE }
+
+        fab.animate().rotation(0.0f).setDuration(300).start()
+    }
+
     private fun maybeRequestNotificationPermission() {
         // Android 13 (SDK 33) requires that we ask for permission to post notifications
         // https://developer.android.com/develop/ui/views/notifications/notification-permission

app/src/main/res/drawable/ic_qr_code_24dp.xml

@@ -0,0 +1,15 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M3,11h8V3H3V11zM5,5h4v4H5V5z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M3,21h8v-8H3V21zM5,15h4v4H5V15z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M13,3v8h8V3H13zM19,9h-4V5h4V9z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M19,19h2v2h-2z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M13,13h2v2h-2z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M15,15h2v2h-2z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M13,17h2v2h-2z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M15,19h2v2h-2z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M17,17h2v2h-2z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M17,13h2v2h-2z"/>
+    <path android:fillColor="@android:color/white" android:pathData="M19,15h2v2h-2z"/>
+</vector>

app/src/main/res/layout/activity_main.xml

@@ -208,16 +208,71 @@
                 android:autoLink="web"/>
     </LinearLayout>
 
-    <com.google.android.material.floatingactionbutton.FloatingActionButton
+    <RelativeLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        android:layout_margin="24dp">
+        <com.google.android.material.floatingactionbutton.FloatingActionButton
             android:id="@+id/fab"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_margin="24dp"
             android:contentDescription="@string/main_add_button_description"
             android:src="@drawable/ic_add_black_24dp"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            style="@style/FloatingActionButton"
-    />
+            android:layout_alignParentBottom="true"
+            android:layout_alignParentEnd="true"
+            style="@style/FloatingActionButton" />
+
+        <com.google.android.material.floatingactionbutton.FloatingActionButton
+            android:id="@+id/fab_add_normal"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:contentDescription="@string/main_add_normal_button_description"
+            android:src="@drawable/ic_add_black_24dp"
+            android:layout_above="@id/fab"
+            android:layout_alignParentEnd="true"
+            android:backgroundTint="@color/gray_400"
+            android:tint="@color/gray_400"
+            app:fabSize="mini"
+            app:elevation="4dp"
+            android:visibility="gone" />
+        <TextView
+            android:id="@+id/fab_add_normal_label"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:gravity="center_vertical"
+            android:layout_toLeftOf="@id/fab_add_normal"
+            android:layout_marginRight="8dp"
+            android:layout_alignTop="@id/fab_add_normal"
+            android:layout_alignBottom="@id/fab_add_normal"
+            android:text="@string/main_add_normal_button_description"
+            android:visibility="gone" />
+
+        <com.google.android.material.floatingactionbutton.FloatingActionButton
+            android:id="@+id/fab_add_qr"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:contentDescription="@string/main_add_qr_button_description"
+            android:src="@drawable/ic_qr_code_24dp"
+            android:layout_above="@id/fab_add_normal"
+            android:layout_alignParentEnd="true"
+            android:backgroundTint="@color/gray_400"
+            android:tint="@color/gray_400"
+            app:fabSize="mini"
+            app:elevation="4dp"
+            android:visibility="gone" />
+        <TextView
+            android:id="@+id/fab_add_qr_label"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:gravity="center_vertical"
+            android:layout_toLeftOf="@id/fab_add_qr"
+            android:layout_marginRight="8dp"
+            android:layout_alignTop="@id/fab_add_qr"
+            android:layout_alignBottom="@id/fab_add_qr"
+            android:text="@string/main_add_qr_button_description"
+            android:visibility="gone" />
+    </RelativeLayout>
 
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/strings.xml

@@ -60,6 +60,8 @@
     <string name="main_item_status_unified_push">%1$s (UnifiedPush)</string>
     <string name="main_item_date_yesterday">yesterday</string>
     <string name="main_add_button_description">Add subscription</string>
+    <string name="main_add_normal_button_description">Add subscription</string>
+    <string name="main_add_qr_button_description">Add subscription with QR Code</string>
     <string name="main_no_subscriptions_text">It looks like you don\'t have any subscriptions yet.</string>
     <string name="main_how_to_intro">
         Click the + to create or subscribe to a topic.