Spark animations for boost/favourite buttons

app/build.gradle

@@ -32,5 +32,6 @@ dependencies {
     compile 'com.android.support:design:25.1.0'
     compile 'com.squareup.picasso:picasso:2.5.2'
     compile 'com.pkmmte.view:circularimageview:1.1'
+    compile 'com.github.peter9870:sparkbutton:master'
     testCompile 'junit:junit:4.12'
 }

app/src/main/java/com/keylesspalace/tusky/StatusViewHolder.java

@@ -34,6 +34,9 @@ import android.widget.ToggleButton;
 import com.android.volley.toolbox.ImageLoader;
 import com.android.volley.toolbox.NetworkImageView;
 import com.squareup.picasso.Picasso;
+import com.varunest.sparkbutton.SparkButton;
+import com.varunest.sparkbutton.SparkButtonBuilder;
+import com.varunest.sparkbutton.SparkEventListener;
 
 import java.util.Date;
 
@@ -47,8 +50,8 @@ class StatusViewHolder extends RecyclerView.ViewHolder {
     private View rebloggedBar;
     private TextView rebloggedByDisplayName;
     private ImageButton replyButton;
-    private ImageButton reblogButton;
+    private SparkButton reblogButton;
-    private ImageButton favouriteButton;
+    private SparkButton favouriteButton;
     private ImageButton moreButton;
     private boolean favourited;
     private boolean reblogged;
@@ -72,8 +75,8 @@ class StatusViewHolder extends RecyclerView.ViewHolder {
         rebloggedBar = itemView.findViewById(R.id.status_reblogged_bar);
         rebloggedByDisplayName = (TextView) itemView.findViewById(R.id.status_reblogged);
         replyButton = (ImageButton) itemView.findViewById(R.id.status_reply);
-        reblogButton = (ImageButton) itemView.findViewById(R.id.status_reblog);
+        reblogButton = (SparkButton) itemView.findViewById(R.id.status_reblog);
-        favouriteButton = (ImageButton) itemView.findViewById(R.id.status_favourite);
+        favouriteButton = (SparkButton) itemView.findViewById(R.id.status_favourite);
         moreButton = (ImageButton) itemView.findViewById(R.id.status_more);
         reblogged = false;
         favourited = false;
@@ -187,35 +190,25 @@ class StatusViewHolder extends RecyclerView.ViewHolder {
 
     private void setReblogged(boolean reblogged) {
         this.reblogged = reblogged;
-        int attribute;
+        reblogButton.setChecked(reblogged);
-        if (reblogged) {
-            attribute = R.attr.status_reblog_button_marked_tint;
-        } else {
-            attribute = R.attr.status_reblog_button_tint;
-        }
-        ThemeUtils.setImageViewTint(reblogButton, attribute);
     }
 
     /** This should only be called after setReblogged, in order to override the tint correctly. */
     private void setRebloggingEnabled(boolean enabled) {
         reblogButton.setEnabled(enabled);
+
         if (enabled) {
-            reblogButton.setImageResource(R.drawable.ic_repeat_24dp);
+            reblogButton.setInactiveImage(R.drawable.reblog_inactive);
+            reblogButton.setActiveImage(R.drawable.reblog_active);
         } else {
-            ThemeUtils.setImageViewTint(reblogButton, R.attr.status_reblog_button_disabled_tint);
+            reblogButton.setInactiveImage(R.drawable.reblog_disabled);
-            reblogButton.setImageResource(R.drawable.ic_lock_24dp);
+            reblogButton.setActiveImage(R.drawable.reblog_disabled);
         }
     }
 
     private void setFavourited(boolean favourited) {
         this.favourited = favourited;
-        int attribute;
+        favouriteButton.setChecked(favourited);
-        if (favourited) {
-            attribute = R.attr.status_favourite_button_marked_tint;
-        } else {
-            attribute = R.attr.status_favourite_button_tint;
-        }
-        ThemeUtils.setImageViewTint(favouriteButton, attribute);
     }
 
     private void setMediaPreviews(final Status.MediaAttachment[] attachments,
@@ -313,15 +306,15 @@ class StatusViewHolder extends RecyclerView.ViewHolder {
                 listener.onReply(getAdapterPosition());
             }
         });
-        reblogButton.setOnClickListener(new View.OnClickListener() {
+        reblogButton.setEventListener(new SparkEventListener() {
             @Override
-            public void onClick(View v) {
+            public void onEvent(ImageView button, boolean buttonState) {
                 listener.onReblog(!reblogged, getAdapterPosition());
             }
         });
-        favouriteButton.setOnClickListener(new View.OnClickListener() {
+        favouriteButton.setEventListener(new SparkEventListener() {
             @Override
-            public void onClick(View v) {
+            public void onEvent(ImageView button, boolean buttonState) {
                 listener.onFavourite(!favourited, getAdapterPosition());
             }
         });

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

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="@color/status_favourite_button_marked_dark"
+        android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z"/>
+</vector>

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

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="@color/status_favourite_button_dark"
+        android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z"/>
+</vector>

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

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="@color/status_reblog_button_marked_dark"
+        android:pathData="M7,7h10v3l4,-4 -4,-4v3L5,5v6h2L7,7zM17,17L7,17v-3l-4,4 4,4v-3h12v-6h-2v4z"/>
+</vector>

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

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+android:width="24dp"
+android:height="24dp"
+android:viewportWidth="24.0"
+android:viewportHeight="24.0">
+<path
+    android:fillColor="@color/status_reblog_button_disabled_dark"
+    android:pathData="M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM15.1,8L8.9,8L8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1 1.71,0 3.1,1.39 3.1,3.1v2z"/>
+</vector>

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

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="@color/status_reblog_button_dark"
+        android:pathData="M7,7h10v3l4,-4 -4,-4v3L5,5v6h2L7,7zM17,17L7,17v-3l-4,4 4,4v-3h12v-6h-2v4z"/>
+</vector>

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

@@ -227,6 +227,8 @@
         android:layout_height="wrap_content"
         android:layout_below="@id/status_media_preview_container"
         android:layout_toRightOf="@+id/status_avatar"
+        android:clipChildren="false"
+        android:clipToPadding="false"
         android:paddingBottom="8dp"
         android:paddingTop="6dp">
 
@@ -242,10 +244,14 @@
             android:layout_height="match_parent"
             android:layout_weight="1" />
 
-        <ImageButton
+        <com.varunest.sparkbutton.SparkButton
-            app:srcCompat="@drawable/ic_repeat_24dp"
             android:id="@+id/status_reblog"
-            style="?attr/image_button_style"
+            app:sparkbutton_activeImage="@drawable/reblog_active"
+            app:sparkbutton_inActiveImage="@drawable/reblog_inactive"
+            app:sparkbutton_iconSize="28dp"
+            android:layout_gravity="center"
+            app:sparkbutton_primaryColor="@color/status_reblog_button_marked_dark"
+            app:sparkbutton_secondaryColor="@color/status_reblog_button_marked_light"
             android:layout_width="32dp"
             android:layout_height="32dp" />
 
@@ -254,11 +260,15 @@
             android:layout_height="match_parent"
             android:layout_weight="1" />
 
-        <ImageButton
+        <com.varunest.sparkbutton.SparkButton
             android:layout_width="32dp"
             android:layout_height="32dp"
-            style="?attr/image_button_style"
+            app:sparkbutton_activeImage="@drawable/favourite_active"
-            app:srcCompat="@drawable/ic_star_24dp"
+            app:sparkbutton_inActiveImage="@drawable/favourite_inactive"
+            app:sparkbutton_iconSize="28dp"
+            android:layout_gravity="center"
+            app:sparkbutton_primaryColor="@color/status_favourite_button_marked_light"
+            app:sparkbutton_secondaryColor="?attr/status_favourite_button_marked_tint"
             android:id="@+id/status_favourite" />
 
         <Space

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

@@ -56,10 +56,10 @@
     <color name="toolbar_icon_light">#000000</color>
     <color name="image_button_light">#2F2F2F</color>
     <color name="status_reblog_button_light">#4F4F4F</color>
-    <color name="status_reblog_button_marked_light">#009F6F</color>
+    <color name="status_reblog_button_marked_light">#56a7e1</color>
     <color name="status_reblog_button_disabled_light">#BFBFBF</color>
     <color name="status_favourite_button_light">#4F4F4F</color>
-    <color name="status_favourite_button_marked_light">#ffec21</color>
+    <color name="status_favourite_button_marked_light">#fab207</color>
     <color name="sensitive_media_warning_background_light">#B0B0B0</color>
     <color name="media_preview_unloaded_background_light">#CFCFCF</color>
     <color name="status_text_secondary_light">#34444C</color>

build.gradle

@@ -15,6 +15,7 @@ buildscript {
 allprojects {
     repositories {
         jcenter()
+        maven { url "https://jitpack.io" }
     }
 }