Improve animations on audio controls, enable push to talk

// FREEBIE

build.gradle

@@ -169,6 +169,8 @@ android {
         minSdkVersion 9
         targetSdkVersion 22
 
+        vectorDrawables.useSupportLibrary = true
+
         buildConfigField "long", "BUILD_TIMESTAMP", getLastCommitTimestamp() + "L"
         buildConfigField "String", "TEXTSECURE_URL", "\"https://textsecure-service.whispersystems.org\""
         buildConfigField "String", "GIPHY_PROXY_HOST", "\"giphy-proxy-production.whispersystems.org\""

res/animator/bottom_pause_to_play_animation.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
+                android:duration="@integer/play_button_animation_duration"
+                android:interpolator="@android:interpolator/accelerate_decelerate"
+                android:propertyName="pathData"
+                android:valueFrom="@string/pause_icon_bottom_path_data"
+                android:valueTo="@string/play_icon_bottom_path_data"
+                android:valueType="pathType"/>

res/animator/bottom_play_to_pause_animation.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
+                android:duration="@integer/play_button_animation_duration"
+                android:interpolator="@android:interpolator/accelerate_decelerate"
+                android:propertyName="pathData"
+                android:valueFrom="@string/play_icon_bottom_path_data"
+                android:valueTo="@string/pause_icon_bottom_path_data"
+                android:valueType="pathType"/>

res/animator/rotate_90_animation.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<objectAnimator
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@integer/play_button_animation_duration"
+    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
+    android:propertyName="rotation"
+    android:valueFrom="0"
+    android:valueTo="90"
+    android:valueType="floatType"/>

res/animator/rotate_minus_90_animation.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<objectAnimator
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@integer/play_button_animation_duration"
+    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
+    android:propertyName="rotation"
+    android:valueFrom="90"
+    android:valueTo="0"
+    android:valueType="floatType"/>

res/animator/upper_pause_to_play_animation.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
+                android:duration="@integer/play_button_animation_duration"
+                android:interpolator="@android:interpolator/accelerate_decelerate"
+                android:propertyName="pathData"
+                android:valueFrom="@string/pause_icon_upper_path_data"
+                android:valueTo="@string/play_icon_upper_path_data"
+                android:valueType="pathType"/>

res/animator/upper_play_to_pause_animation.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
+                android:duration="@integer/play_button_animation_duration"
+                android:interpolator="@android:interpolator/accelerate_decelerate"
+                android:propertyName="pathData"
+                android:valueFrom="@string/play_icon_upper_path_data"
+                android:valueTo="@string/pause_icon_upper_path_data"
+                android:valueType="pathType"/>

res/drawable/pause_icon.xml

@@ -0,0 +1,35 @@
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="128"
+    android:viewportHeight="128">
+    <group
+        android:name="@string/play_icon_group_parts"
+        android:rotation="90"
+        android:pivotX="64"
+        android:pivotY="64"
+        android:scaleX="1.5"
+        android:scaleY="1.5">
+
+        <group android:name="@string/play_icon_group_top">
+            <path
+                android:name="@string/play_icon_top_path_name"
+                android:pathData="@string/pause_icon_upper_path_data"
+                android:fillColor="@android:color/white"
+                android:strokeLineCap="butt"
+                android:strokeLineJoin="miter"
+                android:strokeMiterLimit="10"/>
+        </group>
+        <group android:name="@string/play_icon_group_bottom">
+            <path
+                android:name="@string/play_icon_bottom_path_name"
+                android:pathData="@string/pause_icon_bottom_path_data"
+                android:fillColor="@android:color/white"
+                android:strokeLineCap="butt"
+                android:strokeLineJoin="miter"
+                android:strokeMiterLimit="10"/>
+        </group>
+
+    </group>
+</vector>

res/drawable/pause_to_play_animation.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+                 xmlns:tools="http://schemas.android.com/tools"
+                 android:drawable="@drawable/pause_icon"
+                 tools:targetApi="lollipop">
+
+    <target
+        android:name="@string/play_icon_group_parts"
+        android:animation="@animator/rotate_minus_90_animation"/>
+
+    <target
+        android:name="@string/play_icon_top_path_name"
+        android:animation="@animator/upper_pause_to_play_animation"/>
+
+    <target
+        android:name="@string/play_icon_bottom_path_name"
+        android:animation="@animator/bottom_pause_to_play_animation"/>
+</animated-vector>

res/drawable/play_icon.xml

@@ -0,0 +1,34 @@
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="128"
+    android:viewportHeight="128">
+    <group
+        android:name="@string/play_icon_group_parts"
+        android:pivotX="64"
+        android:pivotY="64"
+        android:scaleX="1.5"
+        android:scaleY="1.5">
+
+        <group android:name="@string/play_icon_group_top">
+            <path
+                android:name="@string/play_icon_top_path_name"
+                android:pathData="@string/play_icon_upper_path_data"
+                android:fillColor="@android:color/white"
+                android:strokeLineCap="butt"
+                android:strokeLineJoin="miter"
+                android:strokeMiterLimit="10"/>
+        </group>
+        <group android:name="@string/play_icon_group_bottom">
+            <path
+                android:name="@string/play_icon_bottom_path_name"
+                android:pathData="@string/play_icon_bottom_path_data"
+                android:fillColor="@android:color/white"
+                android:strokeLineCap="butt"
+                android:strokeLineJoin="miter"
+                android:strokeMiterLimit="10"/>
+        </group>
+
+    </group>
+</vector>

res/drawable/play_to_pause_animation.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+                 xmlns:tools="http://schemas.android.com/tools"
+                 android:drawable="@drawable/play_icon"
+                 tools:targetApi="lollipop">
+
+    <target
+        android:name="@string/play_icon_group_parts"
+        android:animation="@animator/rotate_90_animation"/>
+
+    <target
+        android:name="@string/play_icon_top_path_name"
+        android:animation="@animator/upper_play_to_pause_animation"/>
+
+    <target
+        android:name="@string/play_icon_bottom_path_name"
+        android:animation="@animator/bottom_play_to_pause_animation"/>
+</animated-vector>

res/layout/audio_view.xml

@@ -28,7 +28,7 @@
                         app:matProg_barColor="@color/white"
                         app:matProg_linearProgress="true"
                         app:matProg_spinSpeed="0.333"
-                        tools:visibility="visible"/>
+                        tools:visibility="gone"/>
 
                 <ImageView android:id="@+id/play"
                            android:layout_width="wrap_content"
@@ -39,6 +39,8 @@
                            android:visibility="gone"
                            android:background="@drawable/circle_touch_highlight_background"
                            android:src="@drawable/ic_play_circle_fill_white_48dp"
+                           android:scaleType="centerInside"
+                           tools:visibility="gone"
                            android:contentDescription="Play"/>
 
                 <ImageView android:id="@+id/pause"
@@ -50,6 +52,7 @@
                            android:visibility="gone"
                            android:background="@drawable/circle_touch_highlight_background"
                            android:src="@drawable/ic_pause_circle_fill_white_48dp"
+                           android:scaleType="centerInside"
                            android:contentDescription="Pause"/>
 
                 <ImageView android:id="@+id/download"

res/layout/conversation_activity.xml

@@ -70,7 +70,8 @@
                         android:background="@color/white"
                         android:paddingTop="15dp"
                         android:paddingBottom="15dp"
-                        app:tintColor="@color/grey_500"/>
+                        app:foregroundTintColor="@color/grey_500"
+                        app:backgroundTintColor="@color/white"/>
 
             </org.thoughtcrime.securesms.components.RemovableMediaView>
 

res/layout/conversation_item_received.xml

@@ -65,7 +65,8 @@
                     android:layout_width="210dp"
                     android:layout_height="wrap_content"
                     android:visibility="gone"
-                    app:tintColor="@color/white"
+                    app:foregroundTintColor="@color/white"
+                    app:backgroundTintColor="@color/blue_500"
                     tools:visibility="visible"/>
 
             <org.thoughtcrime.securesms.components.emoji.EmojiTextView

res/layout/conversation_item_sent.xml

@@ -55,7 +55,8 @@
                     android:id="@+id/audio_view"
                     android:layout_width="210dp"
                     android:layout_height="wrap_content"
-                    app:tintColor="@color/grey_500"
+                    app:foregroundTintColor="@color/grey_500"
+                    app:backgroundTintColor="@color/white"
                     android:visibility="gone"/>
 
             <org.thoughtcrime.securesms.components.emoji.EmojiTextView

res/values/attrs.xml

@@ -154,7 +154,8 @@
     </declare-styleable>
 
     <declare-styleable name="AudioView">
-        <attr name="tintColor" format="color" />
+        <attr name="foregroundTintColor" format="color" />
+        <attr name="backgroundTintColor" format="color" />
     </declare-styleable>
 
     <declare-styleable name="CircleColorImageView">

res/values/integers.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <integer name="play_button_animation_duration">300</integer>
+</resources>

res/values/vector_paths.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Play Icon -->
+    <string name="play_icon_upper_path_data">M 44 32 L 44 64 L 100 64 L 100 64 Z</string>
+    <string name="play_icon_bottom_path_data">M 44 96 L 44 64 L 100 64 L 100 64 Z</string>
+
+    <!-- Pause Icon -->
+    <string name="pause_icon_upper_path_data">M 32 40 L 32 56  L 96 56 L 96 40 Z</string>
+    <string name="pause_icon_bottom_path_data">M 32 88 L 32 72 L 96 72 L 96 88 Z</string>
+
+    <!-- Groups -->
+    <string name="play_icon_group_top">upperpart</string>
+    <string name="play_icon_group_bottom">bottompart</string>
+    <string name="play_icon_group_parts">parts</string>
+
+    <!-- Path Name -->
+    <string name="play_icon_top_path_name">upper</string>
+    <string name="play_icon_bottom_path_name">bottom</string>
+
+</resources>

src/org/thoughtcrime/securesms/ConversationItem.java

@@ -231,21 +231,24 @@ public class ConversationItem extends LinearLayout
     if (messageRecord.isOutgoing()) {
       bodyBubble.getBackground().setColorFilter(defaultBubbleColor, PorterDuff.Mode.MULTIPLY);
       mediaThumbnail.setBackgroundColorHint(defaultBubbleColor);
-      setAudioViewTint(messageRecord, conversationRecipients);
     } else {
       int color = recipient.getColor().toConversationColor(context);
       bodyBubble.getBackground().setColorFilter(color, PorterDuff.Mode.MULTIPLY);
       mediaThumbnail.setBackgroundColorHint(color);
     }
+
+    setAudioViewTint(messageRecord, conversationRecipients);
   }
 
   private void setAudioViewTint(MessageRecord messageRecord, Recipients recipients) {
     if (messageRecord.isOutgoing()) {
       if (DynamicTheme.LIGHT.equals(TextSecurePreferences.getTheme(context))) {
-        audioView.setTint(recipients.getColor().toConversationColor(context));
+        audioView.setTint(recipients.getColor().toConversationColor(context), defaultBubbleColor);
       } else {
-        audioView.setTint(Color.WHITE);
+        audioView.setTint(Color.WHITE, defaultBubbleColor);
       }
+    } else {
+      audioView.setTint(Color.WHITE, recipients.getColor().toConversationColor(context));
     }
   }
 

src/org/thoughtcrime/securesms/components/AudioView.java

@@ -1,9 +1,12 @@
 package org.thoughtcrime.securesms.components;
 
+import android.annotation.TargetApi;
 import android.content.Context;
+import android.content.res.ColorStateList;
 import android.content.res.TypedArray;
 import android.graphics.Color;
 import android.graphics.PorterDuff;
+import android.graphics.drawable.AnimatedVectorDrawable;
 import android.os.Build;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
@@ -71,9 +74,17 @@ public class AudioView extends FrameLayout implements AudioSlidePlayer.Listener
     this.pauseButton.setOnClickListener(new PauseClickedListener());
     this.seekBar.setOnSeekBarChangeListener(new SeekBarModifiedListener());
 
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      this.playButton.setImageDrawable(context.getDrawable(R.drawable.play_icon));
+      this.pauseButton.setImageDrawable(context.getDrawable(R.drawable.pause_icon));
+      this.playButton.setBackground(context.getDrawable(R.drawable.ic_circle_fill_white_48dp));
+      this.pauseButton.setBackground(context.getDrawable(R.drawable.ic_circle_fill_white_48dp));
+    }
+
     if (attrs != null) {
       TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.AudioView, 0, 0);
-      setTint(typedArray.getColor(R.styleable.AudioView_tintColor, Color.WHITE));
+      setTint(typedArray.getColor(R.styleable.AudioView_foregroundTintColor, Color.WHITE),
+              typedArray.getColor(R.styleable.AudioView_backgroundTintColor, Color.WHITE));
       typedArray.recycle();
     }
   }
@@ -125,12 +136,16 @@ public class AudioView extends FrameLayout implements AudioSlidePlayer.Listener
 
   @Override
   public void onStart() {
-    this.controlToggle.display(this.pauseButton);
+    if (this.pauseButton.getVisibility() != View.VISIBLE) {
+      togglePlayToPause();
+    }
   }
 
   @Override
   public void onStop() {
-    this.controlToggle.display(this.playButton);
+    if (this.playButton.getVisibility() != View.VISIBLE) {
+      togglePauseToPlay();
+    }
 
     if (seekBar.getProgress() + 5 >= seekBar.getMax()) {
       backwardsCounter = 4;
@@ -153,17 +168,25 @@ public class AudioView extends FrameLayout implements AudioSlidePlayer.Listener
     }
   }
 
-  public void setTint(int tint) {
-    this.playButton.setColorFilter(tint, PorterDuff.Mode.SRC_IN);
-    this.pauseButton.setColorFilter(tint, PorterDuff.Mode.SRC_IN);
-    this.downloadButton.setColorFilter(tint, PorterDuff.Mode.SRC_IN);
-    this.downloadProgress.setBarColor(tint);
+  public void setTint(int foregroundTint, int backgroundTint) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      this.playButton.setBackgroundTintList(ColorStateList.valueOf(foregroundTint));
+      this.playButton.setImageTintList(ColorStateList.valueOf(backgroundTint));
+      this.pauseButton.setBackgroundTintList(ColorStateList.valueOf(foregroundTint));
+      this.pauseButton.setImageTintList(ColorStateList.valueOf(backgroundTint));
+    } else {
+      this.playButton.setColorFilter(foregroundTint, PorterDuff.Mode.SRC_IN);
+      this.pauseButton.setColorFilter(foregroundTint, PorterDuff.Mode.SRC_IN);
+    }
 
-    this.timestamp.setTextColor(tint);
-    this.seekBar.getProgressDrawable().setColorFilter(tint, PorterDuff.Mode.SRC_IN);
+    this.downloadButton.setColorFilter(foregroundTint, PorterDuff.Mode.SRC_IN);
+    this.downloadProgress.setBarColor(foregroundTint);
+
+    this.timestamp.setTextColor(foregroundTint);
+    this.seekBar.getProgressDrawable().setColorFilter(foregroundTint, PorterDuff.Mode.SRC_IN);
 
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
-      this.seekBar.getThumb().setColorFilter(tint, PorterDuff.Mode.SRC_IN);
+      this.seekBar.getThumb().setColorFilter(foregroundTint, PorterDuff.Mode.SRC_IN);
     }
   }
 
@@ -175,13 +198,34 @@ public class AudioView extends FrameLayout implements AudioSlidePlayer.Listener
     }
   }
 
+  private void togglePlayToPause() {
+    controlToggle.displayQuick(pauseButton);
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      AnimatedVectorDrawable playToPauseDrawable = (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.play_to_pause_animation);
+      pauseButton.setImageDrawable(playToPauseDrawable);
+      playToPauseDrawable.start();
+    }
+  }
+
+  private void togglePauseToPlay() {
+    controlToggle.displayQuick(playButton);
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      AnimatedVectorDrawable pauseToPlayDrawable = (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.pause_to_play_animation);
+      playButton.setImageDrawable(pauseToPlayDrawable);
+      pauseToPlayDrawable.start();
+    }
+  }
+
   private class PlayClickedListener implements View.OnClickListener {
+    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
     @Override
     public void onClick(View v) {
       try {
         Log.w(TAG, "playbutton onClick");
         if (audioSlidePlayer != null) {
-          controlToggle.display(pauseButton);
+          togglePlayToPause();
           audioSlidePlayer.play(getProgress());
         }
       } catch (IOException e) {
@@ -191,11 +235,12 @@ public class AudioView extends FrameLayout implements AudioSlidePlayer.Listener
   }
 
   private class PauseClickedListener implements View.OnClickListener {
+    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
     @Override
     public void onClick(View v) {
       Log.w(TAG, "pausebutton onClick");
       if (audioSlidePlayer != null) {
-        controlToggle.display(playButton);
+        togglePauseToPlay();
         audioSlidePlayer.stop();
       }
     }

src/org/thoughtcrime/securesms/components/InputPanel.java

@@ -80,10 +80,10 @@ public class InputPanel extends LinearLayout
     this.microphoneRecorderView = ViewUtil.findById(this, R.id.recorder_view);
     this.microphoneRecorderView.setListener(this);
 
-//    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
       this.microphoneRecorderView.setVisibility(View.GONE);
       this.microphoneRecorderView.setClickable(false);
-//    }
+    }
 
     if (TextSecurePreferences.isSystemEmojiPreferred(getContext())) {
       emojiToggle.setVisibility(View.GONE);