use custom rewind/fast forward button with animations

This commit is contained in:
Jannik 2020-11-16 19:23:06 +01:00
parent fd099e97e6
commit 6ce263832b
Signed by: Seil0
GPG Key ID: E8459F3723C52C24
12 changed files with 215 additions and 17 deletions

View File

@ -212,8 +212,8 @@ class PlayerActivity : AppCompatActivity() {
private fun initActions() {
exo_close_player.setOnClickListener { this.finish() }
exo_rew_10.setOnClickListener { rewind() }
exo_ffwd_10.setOnClickListener { forward() }
rwd_10.setOnButtonClickListener { rewind() }
ffwd_10.setOnButtonClickListener { forward() }
button_next_ep.setOnClickListener { playNextEpisode() }
}

View File

@ -0,0 +1,64 @@
package org.mosad.teapod.ui.components
import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.animation.ObjectAnimator
import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.widget.FrameLayout
import kotlinx.android.synthetic.main.button_fast_forward.view.*
import org.mosad.teapod.R
class FastForwardButton(context: Context, attrs: AttributeSet): FrameLayout(context, attrs) {
private val animationDuration: Long = 800
init {
inflate(context, R.layout.button_fast_forward, this)
}
fun setOnButtonClickListener(func: FastForwardButton.() -> Unit) {
imageButton.setOnClickListener {
func()
runOnClickAnimation()
}
}
fun runOnClickAnimation() {
// run button animation
ObjectAnimator.ofFloat(imageButton, View.ROTATION, 0f, 50f).apply {
duration = animationDuration / 4
repeatCount = 1
repeatMode = ObjectAnimator.REVERSE
addListener(object : AnimatorListenerAdapter() {
override fun onAnimationStart(animation: Animator?) {
imageButton.isEnabled = false // disable button
imageButton.setImageResource(R.drawable.ic_baseline_forward_24)
}
override fun onAnimationEnd(animation: Animator?) {
imageButton.isEnabled = true // enable button
}
})
start()
}
// run lbl animation
textView.visibility = View.VISIBLE
ObjectAnimator.ofFloat(textView, View.TRANSLATION_X, 35f).apply {
duration = animationDuration
addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
imageButton.isEnabled = true // enable button
imageButton.setImageResource(R.drawable.ic_baseline_forward_10_24)
textView.visibility = View.GONE
textView.animate().translationX(0f)
}
})
start()
}
}
}

View File

@ -0,0 +1,64 @@
package org.mosad.teapod.ui.components
import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.animation.ObjectAnimator
import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.widget.FrameLayout
import kotlinx.android.synthetic.main.button_rewind.view.*
import org.mosad.teapod.R
class RewindButton(context: Context, attrs: AttributeSet): FrameLayout(context, attrs) {
private val animationDuration: Long = 800
init {
inflate(context, R.layout.button_rewind, this)
}
fun setOnButtonClickListener(func: RewindButton.() -> Unit) {
imageButton.setOnClickListener {
func()
runOnClickAnimation()
}
}
fun runOnClickAnimation() {
// run button animation
ObjectAnimator.ofFloat(imageButton, View.ROTATION, 0f, -50f).apply {
duration = animationDuration / 4
repeatCount = 1
repeatMode = ObjectAnimator.REVERSE
addListener(object : AnimatorListenerAdapter() {
override fun onAnimationStart(animation: Animator?) {
imageButton.isEnabled = false // disable button
imageButton.setImageResource(R.drawable.ic_baseline_rewind_24)
}
override fun onAnimationEnd(animation: Animator?) {
imageButton.isEnabled = true // enable button
}
})
start()
}
// run lbl animation
textView.visibility = View.VISIBLE
ObjectAnimator.ofFloat(textView, View.TRANSLATION_X, -35f).apply {
duration = animationDuration
addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
imageButton.isEnabled = true // enable button
imageButton.setImageResource(R.drawable.ic_baseline_rewind_10_24)
textView.visibility = View.GONE
textView.animate().translationX(0f)
}
})
start()
}
}
}

View File

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M18,13c0,3.31 -2.69,6 -6,6s-6,-2.69 -6,-6s2.69,-6 6,-6v4l5,-5l-5,-5v4c-4.42,0 -8,3.58 -8,8c0,4.42 3.58,8 8,8c4.42,0 8,-3.58 8,-8H18z" />
</vector>

View File

@ -0,0 +1,5 @@
<vector android:height="24dp" android:tint="#FFFFFF"
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="M12,5V1L7,6l5,5V7c3.31,0 6,2.69 6,6s-2.69,6 -6,6 -6,-2.69 -6,-6H4c0,4.42 3.58,8 8,8s8,-3.58 8,-8 -3.58,-8 -8,-8z"/>
</vector>

View File

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:background="@android:color/transparent"
android:contentDescription="@string/forward_10"
android:scaleX="1.5"
android:scaleY="1.5"
app:srcCompat="@drawable/ic_baseline_forward_10_24" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:layout_marginStart="42dp"
android:text="@string/fwd_10_s"
android:textColor="@color/exo_white"
android:visibility="gone" />
</RelativeLayout>

View File

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentEnd="true"
android:background="@android:color/transparent"
android:contentDescription="@string/forward_10"
android:scaleX="1.5"
android:scaleY="1.5"
app:srcCompat="@drawable/ic_baseline_rewind_10_24" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:layout_marginEnd="42dp"
android:text="@string/rwd_10_s"
android:textColor="@color/exo_white"
android:visibility="gone" />
</RelativeLayout>

View File

@ -2,6 +2,7 @@
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ff_test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f5f5f5"
@ -14,7 +15,7 @@
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"

View File

@ -48,14 +48,10 @@
android:layout_height="1dp"
android:layout_weight="1" />
<ImageButton
android:id="@+id/exo_rew_10"
style="@style/ExoStyledControls.Button.Center.RewWithAmount"
android:layout_width="42dp"
android:layout_height="42dp"
android:contentDescription="@string/rewind_10"
android:tint="@color/exo_white" />
<org.mosad.teapod.ui.components.RewindButton
android:id="@+id/rwd_10"
android:layout_width="100dp"
android:layout_height="wrap_content" />
<Space
android:layout_width="0dp"
@ -75,12 +71,10 @@
android:layout_height="1dp"
android:layout_weight="1" />
<ImageButton
android:id="@+id/exo_ffwd_10"
style="@style/ExoStyledControls.Button.Center.FfwdWithAmount"
android:layout_width="42dp"
android:layout_height="42dp"
android:contentDescription="@string/forward_10" />
<org.mosad.teapod.ui.components.FastForwardButton
android:id="@+id/ffwd_10"
android:layout_width="100dp"
android:layout_height="wrap_content" />
<Space
android:layout_width="0dp"

View File

@ -46,6 +46,8 @@
<string name="rewind_10">rewind 10 seconds</string>
<string name="play_pause">play/pause</string>
<string name="forward_10">forward 10 seconds</string>
<string name="rwd_10_s" translatable="false">- 10 s</string>
<string name="fwd_10_s" translatable="false">+ 10 s</string>
<string name="time_min_sec" translatable="false">%1$02d:%2$02d</string>
<string name="time_hour_min_sec" translatable="false">%1$d:%2$02d:%3$02d</string>
<string name="next_episode">Next Episode</string>