Improve animations on audio controls, enable push to talk

// FREEBIE
This commit is contained in:
Moxie Marlinspike 2016-11-21 18:58:10 -08:00
parent 3e008f6752
commit 8af9b7fd15
26 changed files with 259 additions and 23 deletions

View File

@ -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\""

View File

@ -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"/>

View File

@ -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"/>

View File

@ -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"/>

View File

@ -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"/>

View File

@ -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"/>

View File

@ -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"/>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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">

4
res/values/integers.xml Normal file
View File

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

View File

@ -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>

View File

@ -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));
}
}

View File

@ -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();
}
}

View File

@ -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);