From 8af9b7fd156fc1b6597f359a94ea0b26b3afdc9b Mon Sep 17 00:00:00 2001
From: Moxie Marlinspike <moxie@thoughtcrime.org>
Date: Mon, 21 Nov 2016 18:58:10 -0800
Subject: [PATCH] Improve animations on audio controls, enable push to talk

// FREEBIE
---
 build.gradle                                  |   2 +
 .../bottom_pause_to_play_animation.xml        |   8 ++
 .../bottom_play_to_pause_animation.xml        |   8 ++
 res/animator/rotate_90_animation.xml          |   9 +++
 res/animator/rotate_minus_90_animation.xml    |   9 +++
 .../upper_pause_to_play_animation.xml         |   8 ++
 .../upper_play_to_pause_animation.xml         |   8 ++
 .../ic_circle_fill_white_48dp.png             | Bin 0 -> 1723 bytes
 .../ic_circle_fill_white_48dp.png             | Bin 0 -> 1055 bytes
 .../ic_circle_fill_white_48dp.png             | Bin 0 -> 2365 bytes
 .../ic_circle_fill_white_48dp.png             | Bin 0 -> 1682 bytes
 .../ic_circle_fill_white_48dp.png             | Bin 0 -> 2339 bytes
 res/drawable/pause_icon.xml                   |  35 +++++++++
 res/drawable/pause_to_play_animation.xml      |  18 +++++
 res/drawable/play_icon.xml                    |  34 +++++++++
 res/drawable/play_to_pause_animation.xml      |  18 +++++
 res/layout/audio_view.xml                     |   5 +-
 res/layout/conversation_activity.xml          |   3 +-
 res/layout/conversation_item_received.xml     |   3 +-
 res/layout/conversation_item_sent.xml         |   3 +-
 res/values/attrs.xml                          |   3 +-
 res/values/integers.xml                       |   4 +
 res/values/vector_paths.xml                   |  20 +++++
 .../securesms/ConversationItem.java           |   9 ++-
 .../securesms/components/AudioView.java       |  71 ++++++++++++++----
 .../securesms/components/InputPanel.java      |   4 +-
 26 files changed, 259 insertions(+), 23 deletions(-)
 create mode 100644 res/animator/bottom_pause_to_play_animation.xml
 create mode 100644 res/animator/bottom_play_to_pause_animation.xml
 create mode 100644 res/animator/rotate_90_animation.xml
 create mode 100644 res/animator/rotate_minus_90_animation.xml
 create mode 100644 res/animator/upper_pause_to_play_animation.xml
 create mode 100644 res/animator/upper_play_to_pause_animation.xml
 create mode 100644 res/drawable-hdpi/ic_circle_fill_white_48dp.png
 create mode 100644 res/drawable-mdpi/ic_circle_fill_white_48dp.png
 create mode 100644 res/drawable-xhdpi/ic_circle_fill_white_48dp.png
 create mode 100644 res/drawable-xxhdpi/ic_circle_fill_white_48dp.png
 create mode 100644 res/drawable-xxxhdpi/ic_circle_fill_white_48dp.png
 create mode 100644 res/drawable/pause_icon.xml
 create mode 100644 res/drawable/pause_to_play_animation.xml
 create mode 100644 res/drawable/play_icon.xml
 create mode 100644 res/drawable/play_to_pause_animation.xml
 create mode 100644 res/values/integers.xml
 create mode 100644 res/values/vector_paths.xml

diff --git a/build.gradle b/build.gradle
index 19ac98b6b..48c74ccfe 100644
--- a/build.gradle
+++ b/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\""
diff --git a/res/animator/bottom_pause_to_play_animation.xml b/res/animator/bottom_pause_to_play_animation.xml
new file mode 100644
index 000000000..f5b474bb7
--- /dev/null
+++ b/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"/>
\ No newline at end of file
diff --git a/res/animator/bottom_play_to_pause_animation.xml b/res/animator/bottom_play_to_pause_animation.xml
new file mode 100644
index 000000000..4f2778d68
--- /dev/null
+++ b/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"/>
\ No newline at end of file
diff --git a/res/animator/rotate_90_animation.xml b/res/animator/rotate_90_animation.xml
new file mode 100644
index 000000000..7d44ce690
--- /dev/null
+++ b/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"/>
\ No newline at end of file
diff --git a/res/animator/rotate_minus_90_animation.xml b/res/animator/rotate_minus_90_animation.xml
new file mode 100644
index 000000000..ef9e1b6f1
--- /dev/null
+++ b/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"/>
\ No newline at end of file
diff --git a/res/animator/upper_pause_to_play_animation.xml b/res/animator/upper_pause_to_play_animation.xml
new file mode 100644
index 000000000..880c7b0b8
--- /dev/null
+++ b/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"/>
\ No newline at end of file
diff --git a/res/animator/upper_play_to_pause_animation.xml b/res/animator/upper_play_to_pause_animation.xml
new file mode 100644
index 000000000..ffa933231
--- /dev/null
+++ b/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"/>
\ No newline at end of file
diff --git a/res/drawable-hdpi/ic_circle_fill_white_48dp.png b/res/drawable-hdpi/ic_circle_fill_white_48dp.png
new file mode 100644
index 0000000000000000000000000000000000000000..a417946f2acf524ad1da066795fa619d57e8baf3
GIT binary patch
literal 1723
zcmV;s21NOZP)<h;3K|Lk000e1NJLTq002k;002k`1^@s6RqeA!000JpNkl<Zc%1B9
zNr)sx6#c!-w4gGA%BY9Yg9~`DQBYhMaKWWVLGa|o4OEapJ&8xJ>OnzqLk|ursDlRu
z$8}sl1zQ~4PHxZ&?lU;3pmtZM{~7Toe?~=QMlMyAnNtrQT|{R^{CN2zGUCV2nop91
zrU+wp(gw60Q-KOF6{rA{5(w?iF=ryKow3(W#MYTHP15KjIyeaYe}konu+Chy^kL3k
zGjiicEf6}q?vx$JJd1f6^Caf+%+1VA%tP!oe>3+pe`c;Qzhr*STxR|d(MDq!l|Zi1
zr!cQ%E-}w!9$K;9KbapfUtzvTMz~O$ji70PFqCwKS1@lRBg{rsj%x<?`Wf|Ia;}lT
zpgU*%%iP6$g86ce4fOzl8se<_yp8#8lEo@>z+6{M)L$R;HNrJpm&QBHrGPE9*pvs!
zUBjGmH}fjdpN!l4o<K2AFb$ufQn%Fg0`pGhH`I_P)fGq^aRc*S=24VBVP>6c%8C*~
z;<Ud`>67wT<{iu(9ve%ejzH2d=9UMUH{0?xO6QBFg>m5ug?Vk>mOaY6oy=TSS){50
zNrOi-pJiT1>7*;eDWTB`<3hJ3-iw>Gn|U?!H>xO76@jFoW63-{PN(sDO$Z@x+QYn@
z`4d$Tsj3HIo_U@8;*47u7YX@Ax`es6Y-MHlH)wc)`8>5#96;Lw+hF4v%;(6=m!)hh
zBhajE7!&dZ)J|~(K9MeBK0xWyHLjw_Atnu8$9$67Esln7xLwP9iX!Ku7=ffBY$`t?
zv#HdJzqX1akPeE?*aR;!zoQ6|$_%mlnMY7|_1boE0I^dxv*^Qp(O)j`AW;}kfY->l
zsa_p-K_Ea6HHd`i;bP{SRNzIiL+k_Q*^~+-<z0dvY7pps=2ogP#N>aMk`bqCL(7Fb
z)XpR0MMOC|<Ow9oZl}~Wb$J(|y$GMTJLN+t8e#}vd_g8&{Qvbe4Qvaf)7Z$K%KSET
zVaS7|9C012KKtN30_{cE6-eyLt3^m45oC$7qV&OobRW>SZT7P_o}D+uuv`C%On|*h
zkMvkbpKuUxBAFAEA^1E<%5XFTab!a4!|)PFf6%wX$n+H$(j)IFwn+Zdhdx01gTA4U
zi>f>WpFlDePj)Kn8+5;<uS4@to(FAFmGo(N31kiex2UoVLINQyu-Se-7(D10N`w6w
zgapFcXVVCbYAev!4ZeTmEfg2*=RSImK>CKHiBb#2DJ=3<(*M}ceVm{L(l?~rcvsRP
zfv}0&KMIRl3iQ>RtQ8UnL3vqv_iYs|(EUPR*L)Y{%|R=wl0Ht<vc3aXR9Oajdoju0
zIv6}i`dVr)_8FxIZ+#QV&070Zm1mH*7em72U)1e5bO<^=jc~`ZEibhf`;kn-q=W_f
z=0VaYh~td~0YxEKWRtoPxUR#EknXady;>9n?Gb51(0-$;un(vmv<D!@*JSd500}O2
z*^9(}$@s@<F~kYp_#%OThbfy{*JUpf+vUOYkW)VVg~+4l_n7BWzmA^Kr>#X_D%#D<
zYV)o@c~{`u4M?AIZ*-ABQZce1kfg2OvgwisxtSe1nQu|VjV_Zwg}5zNoLx_#`kl-v
z#`iH_jtQ8Fw;&_yHX2U#ZSzpmo-UtnB_mGMjg5^cO5!7O`yL|`;2uymF{y3v<tIME
ze1_75)IyZalSYFGZe#U{tkJe6bNa-=Jc@+!RVr~qt0s~kNoE0w{NuKX<P+y(GHHbS
z%2rk-XphE`v5vd3hy25B5<@PbusC?JZy!~-c~t}wBk=A6((`s(L)IyMEot2Il0GFB
zJ7Cir*2YTjX#iD^eZ(NVMT7hrym}<BZm-e!yvg;NHA-JO#})}*zL#p;usY{rVi<PB
zw=l0K^D^5!WjBPQ5Xy~}%MeG~zc8;MlYh8MHNCm+!J%Fc?O>imX2mUc5g0hvR~5_m
zU8!5Vcc-=CY09pDDx=A_p7m?lmyvmQ^nCUIfx7NM`;`CW^R2U_jX72JHuD}b;S1N6
zS{U_f;h3LpB9rU5pvrxTS*}Ql`l|!%0-XF}J@z=6$Y;ogS{T<43m}~sKP&*xLb}`G
z73=+j`62UF=1XL9C_`;Ff=T=|1#)p95;lwo>7GF0pQga$8Haih0>@Cxwyda)#?Yo8
zH^CD~PwaSP_x{ICLXePWOeaNLiRX+JlM<*im?lsaU@A}nrUDh<zW@LL|NmB`_!e(Q
RD_Q^m002ovPDHLkV1l#JKg$3B

literal 0
HcmV?d00001

diff --git a/res/drawable-mdpi/ic_circle_fill_white_48dp.png b/res/drawable-mdpi/ic_circle_fill_white_48dp.png
new file mode 100644
index 0000000000000000000000000000000000000000..783f82cf1e701f7d16fcf44a61cca9e9fe35d9de
GIT binary patch
literal 1055
zcmV+)1mOFLP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000B#Nkl<Zc%0N)
zxo#9q5UxG^{|gxc3nY*X61O1191-vU5O9Q?5h;%V4`EDdQV<AXzko%85RO0~PT3K*
zk;pLM_0CX5SMAg^J@?MeY)PMXJU!F(Ro8TPb(Pz`@53ldvuXlGr9HsDXfPTGa;aC~
znM~3s_z5+bRL{}28G-@YK&&~QX@M~$H;KF+XfQ}Qk^diY3UL}SiP()82V(>YkzYkD
zAr=tN5ibzy+)jhwLk>goc%TV^`wt>+A}%5JW$fo8;xS?d@!rvQIw1oxpuxYp5cd&l
zejpyAi`ZcFEXe&XKP$4veeJY#q(WBWgzJbEMWD+BJqxzj?LB^1WSRSR=`3V`bkydN
z(!@QBTw3w0ceNqYtSglfX+6+E%qil%oW$b{(H@y)or&C%CUKMT6mbsG1+#L=THeSs
z;bNwu>XVk-F~l6=0wnAiaXYcB2vblld9eCyv##^3+l%EH;hHA@US*fA`{8f4EYUjF
z`TB~*De)7Mk==oKjo89}H(~H2?;KMIHc682h@*%V)!rAEYs8&*5nCZ};V{T+{qhNK
zL)?kdZ+k#q-V0{*|5NveL0*dvEhywTg7~aB{uSE;Lh=@(118R?GUS#(vBR85LIdfV
z1N87a!~_@@w#wz0C^CqPh{K3qy0PiFJ_#n8l<%<0Bb(;12XTV$_jzjr#5HI6g`Rc4
z3K8AJg*ctD?uQJJW$T!Fs7mr8n#Uyn_IGA&fGkrJ>ZLlI_=T6|7P$)11Rm$>I(mS(
zb#$X`00mKU46MWGiwGCuHl`a!KCNOKKvAG%59;vwhzJ+r*3}KR0klbc<Lg{mf)YgY
zAa0Qxnau7b^->+YAiOj;=RP3U3;bJ04+uBsPAm`2gR!t>-LFDKH*q0O^Va>yVD2rL
zc&Ki{+#$qo-Dpo@`kN-nBM6_0s_=s7^q9*-Fyup=N9906#OXlu1rkCD312@U9zbxc
z8+Kfz&&9-H1`PRs!uz;G{dU9~sP0hT<6k<|)9A0N_P)463F%-NaT|hTolZWLC0d7!
zK5<xy)a}Z(Sa}%9hnAfia^-}k<8ne#c_A%Q5~9>1Wy*$`TAW2(grss*j0f!G?ktbW
zFp|5^{FKSvtm*Y>rM#^4`V^w&4>-MU7dVzJLk3ac_=>m|p|h|7cBfPhB5(Y#2zLFT
z%;YLDNxL?X`nc!kEHM==@*P0jKwL)b&)5$Y_MU**q&_(MP9=Hk#JbE%LLrBgS&xIs
z9@u48I*cqLUV$mIzJ!X(tfBWIy3oA|f&(}$zds$%6fSfZH9*Tq{;NUdGV*DaKLG#$
Z|No@Dj*aMxpkV+2002ovPDHLkV1oFv_YnX9

literal 0
HcmV?d00001

diff --git a/res/drawable-xhdpi/ic_circle_fill_white_48dp.png b/res/drawable-xhdpi/ic_circle_fill_white_48dp.png
new file mode 100644
index 0000000000000000000000000000000000000000..0bd9683860e1876e8aa182b891e7eec21621379c
GIT binary patch
literal 2365
zcmV-D3BvY?P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000RDNkl<Zc%1BA
zX{=q-7hmta{znzm(3)D+YEdCVNF>xy^B6)+si*N>LIfXtC1Q$C!iOp~))z7K0}ZcV
zh=iDjPLzrwhCURf?>+0+y;skA=MHC|bM_hTJ^PpZa_>F&+;jI{YmaNMz4nxei3tj*
z4ue%Epy>z-s2D*36(cC1Vgv<Lj44$opbG{RClrhRZK<fE0w6Th%rR;&G<-K?sWE0b
zPVEIgq`s>S25K-5&;r-^AM-HgEc-g2Ig`0Rb1&xZ%zxQ?|7QNm{E4}RxtY0^xt{r@
zef=Z${8}iaY6U>><LWa6dlqvM^JwN==Cqvu0i|qUe!zT{`3iGumo$`$Dik1Xvt$}2
z`Bdf=%=4&K;L;T7cD);Pn~!_rP1TRgRm_#l5$139`XE)%SCp*)UD_b%rOYdt$Ekae
zAP9YcT07Gu;p=C_J791q_KbI!&oGyfsVVU^7LKwMpffd{c|G$+<_vpH+G5<7R@ko4
zN*Sl9?*YDHKFD0o{Ju?^3qu(S&>306yp4H;{XC}bDN68h#1#QZGxZ7cF6I*|U4<&4
zNCikH0SNpa=K1#X4vLzCGKAg<S{Wz|GAw_Ac`NfXiqckypvtHLXy@-F)AUG*ml9W{
z@TpB2bo#z!-cF`jDhx#^K&tH?%zK$P*z4mIjWl-tx9>mB37sxUEATM$7Bce;?@f|#
z1xR&1i1{S*6p9io!mpd)<B&A!bdNBvA=6pwrZqQwDnLrdkz~f$3&_k+(XQ5A=$!!J
zpufV5`y=M%WcmefHNlqxq*NTke35xDO%{GHl>9h!2Q5l~S>qxyvuZCj!G{8L$%pU{
zC6nMf8v61;^0bk8A@fu6P!oLBfCHGXkujLb5Oddm`1pegp#>yERWw7Vkr^rFLY@T~
z5$sel(|HlTG&?SKn_hs<3-X3M9?pE0xf|uorw;`@z&x2u=|IV^?czsHXnPX!iV@y@
zl(T=!+5|}l1e?w>o1now3F$G283W1~W<Ew4JLN12kd9{_^G)WS6qSr#9POlq<WVfP
zKQm8auA>Z{a+W4Y5&-MrG>U{z)c?W<B#%<y_9oK|XQ}~d6(E0dHS-*bnx1}a^OGRv
zbI1S-NsB2%3y`J>k_V&IzeQ%eFYREHA;WGgd!9(qa;KAE)7Ahy6vnkV)M{L7BBc3+
zEZ{h>lv2tgZ6}P<k4209<o9WQ+{X|hVqyl1z*g5Ey4C=>Z<vf-UzYTmT>1stdJ31B
zVSC+4wyp}m!{NQKgj&50nvVG5|8-=n15U$H7X`>Y3(1(6rR@*Gk01;Dkj+tKWJTm4
zUl#?4Ca<E%!Wo=;TOl%mj27GXiM7DB6UJ=!bNjmMw`o$>0O)2JK1LWRjwbymsU(Y#
z&nDwGSl9L3IzamwVRn3`y51443V^Ssc4!J{4{>k7>mqwCmjWR0|C3p23`m9+_OZ<W
zQbIq_O#$*Sm>lL%|17W+4Uy9vOS#q--4r0-%_cJg9!t1Cz(5Ri=m%!2YaMUy1nF?+
zQJ8q8fy{~_uetVG$Dw971xVX9k0!f_2Xu$_@}6(6b?gURnv|L9eW(G+(0%31q??lz
zfbVCh2M44BjB~k$p|Ew!mZ6{kcZjSodF|?;=28Qu+V`RTcZbLdvg;~imznUt)%yT9
zh^+oYIh&w>f{~;ERHeVv`v5nHthQ5v++1uyvX3@2LGBP)L3WvKK>()IvVS(z0C$M2
zAiEviZgi;uTYRLbp@5e}t|kcBY+w7;>)AK7oW4rB*~J>Vmcn988fatOT6-;%HB^MX
zo}%TpPy>>ojd2_7wM^>)(tB?r)0qrWg<)NK2;wh`s4QQoYi;4O9<b3e^Z{-VIid7#
zRM*<V#TN8C^S#&~1hj{i&AZG$DW@$+9=MvKejs$jogo3D@VeSw>snybIA)<biEmI?
zpl^j<wnh7o1^Hi+e&lM5gS+)A>fK%MWkAd3WpWTckj6O|dx2$I9Y#Z~5Sc(mEA4x)
z&be!tA5-K796I9&GEs$W5Y%Ihy`ET5(`?XyWp4#hOCY_bL-&c`a^^O2lx^BAO6Y{K
zMQOVHKFyE&7$QU%F0n-^(JNYzW<^XkCErhz?Hx_71(JWUlOc4$D5WTvS+=R77GRsI
z?34`KRE_5YcFLbX(dftfHdVdIa0g9}CfLMU5O>#vOh(mrPRJ4~LjDkA-E%35lF~#-
z-VvzkVtcL7eZqha*6{{Kv*V@)>%goR!8%}kD<xQmbU0}9ZdT7|g75)7{6^kyA|req
zY0(*3{enc;h?9f3nmQJLzxD|_Z!-9Jh)kH{%!^fdW5z)V*un%m5h6(SW3awBB#$G^
z3&@!3fl3r0fCu&KWMZi`A!r{aqo*^!%lmL2u8DXC+%GOAW3om9b^QNchvY+qk2P}S
z6~fOgKOYK^P8o4DkuU@|MM4p{RZ34U_6a)e5`=aW^D;8t4w*XLID9$hiYEXf$|8~$
zEP{wMyMuanbQF)8`#zbxeMlZXM0|QjOHDvfQ|zoCA(L<!H4ybiO^`Ios1A8RP+Ckn
zy_I}{Z})Vm35YU|nc*Y$vrJHQXqUP{n-;{j4`Qf!2^mYLci*To4saMIb1Vo(O1*S|
z0|bs!G*%S(=S3f30^koYJiVJt<Z+<xN0>ZMM)>P!az4DH>_dF6C3A?+0{gjchxlOd
zfa6x4R_W^5Lwq!JM)oDsEa4cd1MRh{kFoliOz_pmnLo5ib783RAUF6LA<QEpaUHMj
zk>+54TGyXlm7;~M89&JFZRS(VM=6SQSc>2UbvVipTR9h!IUWSZT<sIP-}h05DB&+L
zpCjYFu+3f{qzXo8bvw)xwc-pi(WVfi2*EDm3P}qH9Ohz7q;QxgTn0zGq@h$)t$>|r
zpeV$P2KLw@8toxu6oCbxS!A~VWA{F4j_hH^PENSZ$Z@tXhhPK)!EYjCzu6vpemKsy
z13D>0fbWKAvZJtcta6}pJJdqpanw-(f_Mj<rhU%y+fq?y1vCO7R6)fE3aA)C0Tm-C
jpkf3CRE&QD00960DLAo-oR;BK00000NkvXXu0mjfJfK^^

literal 0
HcmV?d00001

diff --git a/res/drawable-xxhdpi/ic_circle_fill_white_48dp.png b/res/drawable-xxhdpi/ic_circle_fill_white_48dp.png
new file mode 100644
index 0000000000000000000000000000000000000000..c83d5fba16a84e50be235cc8a3c9514b44c95139
GIT binary patch
literal 1682
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

literal 0
HcmV?d00001

diff --git a/res/drawable-xxxhdpi/ic_circle_fill_white_48dp.png b/res/drawable-xxxhdpi/ic_circle_fill_white_48dp.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6b9ab51bd7b3691f2389149c34f90b090b24da2
GIT binary patch
literal 2339
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
JPDHLkV1fbNK$-vm

literal 0
HcmV?d00001

diff --git a/res/drawable/pause_icon.xml b/res/drawable/pause_icon.xml
new file mode 100644
index 000000000..e7f9fce53
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/res/drawable/pause_to_play_animation.xml b/res/drawable/pause_to_play_animation.xml
new file mode 100644
index 000000000..4d19dc4f9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/res/drawable/play_icon.xml b/res/drawable/play_icon.xml
new file mode 100644
index 000000000..7472ac7de
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/res/drawable/play_to_pause_animation.xml b/res/drawable/play_to_pause_animation.xml
new file mode 100644
index 000000000..b8bc7934f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/res/layout/audio_view.xml b/res/layout/audio_view.xml
index 1ad457fd1..dd3dff543 100644
--- a/res/layout/audio_view.xml
+++ b/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"
diff --git a/res/layout/conversation_activity.xml b/res/layout/conversation_activity.xml
index b4046e368..2f45be28e 100644
--- a/res/layout/conversation_activity.xml
+++ b/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>
 
diff --git a/res/layout/conversation_item_received.xml b/res/layout/conversation_item_received.xml
index 4a15fa8de..6d45ef9fd 100644
--- a/res/layout/conversation_item_received.xml
+++ b/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
diff --git a/res/layout/conversation_item_sent.xml b/res/layout/conversation_item_sent.xml
index 46ca02695..3e89b7a9a 100644
--- a/res/layout/conversation_item_sent.xml
+++ b/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
diff --git a/res/values/attrs.xml b/res/values/attrs.xml
index 907033bde..4cb4cb6aa 100644
--- a/res/values/attrs.xml
+++ b/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">
diff --git a/res/values/integers.xml b/res/values/integers.xml
new file mode 100644
index 000000000..bb4c483c9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/res/values/vector_paths.xml b/res/values/vector_paths.xml
new file mode 100644
index 000000000..d4f9bb2ec
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/org/thoughtcrime/securesms/ConversationItem.java b/src/org/thoughtcrime/securesms/ConversationItem.java
index 1c4e902bb..a228331c1 100644
--- a/src/org/thoughtcrime/securesms/ConversationItem.java
+++ b/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));
     }
   }
 
diff --git a/src/org/thoughtcrime/securesms/components/AudioView.java b/src/org/thoughtcrime/securesms/components/AudioView.java
index 041cd15c9..ee9c024e7 100644
--- a/src/org/thoughtcrime/securesms/components/AudioView.java
+++ b/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();
       }
     }
diff --git a/src/org/thoughtcrime/securesms/components/InputPanel.java b/src/org/thoughtcrime/securesms/components/InputPanel.java
index 9e8e98ca9..1067a0508 100644
--- a/src/org/thoughtcrime/securesms/components/InputPanel.java
+++ b/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);