Skip to content

Commit

Permalink
Change seekbar to Material Slider and Linear Progress Bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@brahmkshatriya
brahmkshatriya committed Feb 23, 2024
1 parent 89f1203 commit 8963ba3
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 68 deletions.
81 changes: 50 additions & 31 deletions app/src/main/java/dev/brahmkshatriya/echo/player/InitPlayer.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import android.graphics.drawable.Animatable
import android.view.View
import android.view.ViewGroup.MarginLayoutParams
import android.view.animation.LinearInterpolator
import android.widget.SeekBar
import android.widget.SeekBar.OnSeekBarChangeListener
import androidx.activity.viewModels
import androidx.appcompat.content.res.AppCompatResources
import androidx.core.view.ViewCompat
Expand All @@ -35,6 +33,8 @@ import com.google.android.material.bottomsheet.BottomSheetBehavior.STATE_SETTLIN
import com.google.android.material.checkbox.MaterialCheckBox
import com.google.android.material.checkbox.MaterialCheckBox.OnCheckedStateChangedListener
import com.google.android.material.checkbox.MaterialCheckBox.STATE_CHECKED
import com.google.android.material.slider.Slider
import com.google.android.material.slider.Slider.OnSliderTouchListener
import dev.brahmkshatriya.echo.MainActivity
import dev.brahmkshatriya.echo.R
import dev.brahmkshatriya.echo.player.PlayerHelper.Companion.toTimeString
Expand Down Expand Up @@ -157,24 +157,23 @@ fun createPlayer(

var expandedAnimator: ObjectAnimator? = null
var collapsedAnimator: ObjectAnimator? = null
playerBinding.expandedSeekBar.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
var touched = false
override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
if (touched) playerBinding.trackCurrentTime.text = p1.toLong().toTimeString()
}

override fun onStartTrackingTouch(p0: SeekBar?) {
touched = true
expandedAnimator?.cancel()
playerBinding.expandedSeekBar.apply {
addOnChangeListener { _, value, fromUser ->
if (fromUser) {
playerBinding.trackCurrentTime.text = value.toLong().toTimeString()
}
}
addOnSliderTouchListener(object : OnSliderTouchListener {
override fun onStartTrackingTouch(slider: Slider) {
expandedAnimator?.cancel()
}

override fun onStopTrackingTouch(p0: SeekBar?) {
touched = false
p0?.progress?.let {
playerViewModel.seekTo.emit { it.toLong() }
override fun onStopTrackingTouch(slider: Slider) {
playerViewModel.seekTo.emit { slider.value.toLong() }
}
}
})
})
}


val drawables = listOf(
AppCompatResources.getDrawable(activity, R.drawable.ic_repeat_to_repeat_one_40dp),
Expand Down Expand Up @@ -297,32 +296,52 @@ fun createPlayer(

observe(uiViewModel.totalDuration) {
playerBinding.collapsedSeekBar.max = it
playerBinding.expandedSeekBar.max = it

playerBinding.collapsedSeekBarBuffer.max = it
playerBinding.expandedSeekBarBuffer.max = it
expandedAnimator?.cancel()
playerBinding.expandedSeekBar.apply {
value = min(value, it.toFloat())
valueTo = 1f + it
}
playerBinding.trackTotalTime.text = it.toLong().toTimeString()
}

fun View.getAnimator(property: String, value: Float) =
ObjectAnimator.ofFloat(this, property, value)

fun View.getAnimator(property: String, value: Int) =
ObjectAnimator.ofInt(this, property, value)

val interpolator = LinearInterpolator()
fun View.startAnimation(property: String, value: Number, duration: Long): ObjectAnimator {
val animator = when (value) {
is Float -> getAnimator(property, value)
is Int -> getAnimator(property, value)
else -> throw IllegalStateException()
}
animator.interpolator = interpolator
animator.duration = duration
animator.start()
return animator
}

observe(uiViewModel.progress) { (current, buffered) ->
if (!playerBinding.expandedSeekBar.isPressed) {
playerBinding.collapsedSeekBar.secondaryProgress = buffered
playerBinding.expandedSeekBar.secondaryProgress = buffered
playerBinding.collapsedSeekBarBuffer.progress = buffered
playerBinding.expandedSeekBarBuffer.progress = buffered

var old = playerBinding.expandedSeekBar.progress
if (old == 0) old = current
var old = playerBinding.expandedSeekBar.value
if (old == 0f) old = current.toFloat()
val duration = min(1000L, max(0L, (current - old).toLong()))

playerBinding.collapsedSeekBar.apply {
collapsedAnimator?.cancel()
collapsedAnimator =
ObjectAnimator.ofInt(this, "progress", current).setDuration(duration)
collapsedAnimator?.interpolator = LinearInterpolator()
collapsedAnimator?.start()
collapsedAnimator = startAnimation("progress", current, duration)
}
playerBinding.expandedSeekBar.apply {
expandedAnimator?.cancel()
expandedAnimator =
ObjectAnimator.ofInt(this, "progress", current).setDuration(duration)
expandedAnimator?.interpolator = LinearInterpolator()
expandedAnimator?.start()
val curr = min(current.toFloat(), valueTo)
expandedAnimator = startAnimation("value", curr, duration)
}
playerBinding.trackCurrentTime.text = current.toLong().toTimeString()
}
Expand Down
70 changes: 53 additions & 17 deletions app/src/main/res/layout-land/bottom_player.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,18 +114,39 @@
tools:text="00:00" />
</FrameLayout>

<SeekBar
android:id="@+id/expandedSeekBar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginStart="-2dp"
android:layout_marginEnd="-2dp"
android:progressBackgroundTint="?attr/colorOutlineVariant"
android:progressTint="?colorTertiary"
android:secondaryProgressTint="?colorTertiary"
android:thumb="@drawable/ic_thumb"
android:thumbTint="?colorTertiary" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/expandedSeekBarBuffer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:progress="40"
app:indicatorColor="?attr/colorTertiaryContainer"
app:indicatorTrackGapSize="0dp"
app:trackColor="?attr/colorSurfaceContainerHigh" />

<com.google.android.material.slider.Slider
android:id="@+id/expandedSeekBar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginStart="-2dp"
android:layout_marginEnd="-2dp"
android:value="0.2"
app:labelBehavior="gone"
app:thumbColor="?attr/colorTertiary"
app:thumbHeight="16dp"
app:thumbTrackGapSize="0dp"
app:thumbWidth="16dp"
app:trackColorActive="?attr/colorTertiary"
app:trackColorInactive="@android:color/transparent"
app:trackHeight="4dp" />

</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand Down Expand Up @@ -261,15 +282,30 @@
android:layout_width="match_parent"
android:layout_height="match_parent">

<ProgressBar
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/collapsedSeekBarBuffer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:progress="40"
app:indicatorColor="?attr/colorTertiaryContainer"
app:indicatorTrackGapSize="0dp"
app:trackColor="?attr/colorSurfaceContainerHigh"
app:trackThickness="2dp" />

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/collapsedSeekBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:progressBackgroundTint="?attr/colorOutlineVariant"
android:progressTint="?colorTertiary"
android:secondaryProgressTint="?colorTertiary" />
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:progress="20"
app:indicatorColor="?attr/colorTertiary"
app:trackColor="@android:color/transparent"
app:trackThickness="2dp" />

<LinearLayout
android:layout_width="match_parent"
Expand Down
77 changes: 57 additions & 20 deletions app/src/main/res/layout/bottom_player.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@
android:background="?attr/colorSurfaceContainerHigh"
android:importantForAccessibility="no"
android:scaleType="fitCenter"
app:layout_constraintDimensionRatio="1,1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1,1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
Expand Down Expand Up @@ -130,17 +130,39 @@
tools:text="00:00" />
</FrameLayout>

<SeekBar
android:id="@+id/expandedSeekBar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginStart="-2dp"
android:layout_marginEnd="-2dp"
android:progressBackgroundTint="?attr/colorOutlineVariant"
android:progressTint="?colorTertiary"
android:secondaryProgressTint="?colorTertiary"
android:thumb="@drawable/ic_thumb"
android:thumbTint="?colorTertiary" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/expandedSeekBarBuffer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:progress="40"
app:indicatorColor="?attr/colorTertiaryContainer"
app:indicatorTrackGapSize="0dp"
app:trackColor="?attr/colorSurfaceContainerHigh" />

<com.google.android.material.slider.Slider
android:id="@+id/expandedSeekBar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginStart="-2dp"
android:layout_marginEnd="-2dp"
android:value="0.2"
app:labelBehavior="gone"
app:thumbColor="?attr/colorTertiary"
app:thumbHeight="16dp"
app:thumbTrackGapSize="0dp"
app:thumbWidth="16dp"
app:trackColorActive="?attr/colorTertiary"
app:trackColorInactive="@android:color/transparent"
app:trackHeight="4dp" />

</FrameLayout>

<LinearLayout
android:layout_width="match_parent"
Expand Down Expand Up @@ -228,15 +250,15 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="?attr/colorSurfaceContainerLowest"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="72dp"
app:layout_behavior="@string/bottom_sheet_behavior"
app:marginLeftSystemWindowInsets="false"
app:marginRightSystemWindowInsets="false"
app:paddingBottomSystemWindowInsets="false"
app:layout_behavior="@string/bottom_sheet_behavior"
app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Large">

<include
Expand Down Expand Up @@ -265,15 +287,30 @@
android:layout_width="match_parent"
android:layout_height="match_parent">

<ProgressBar
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/collapsedSeekBarBuffer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:progress="40"
app:indicatorColor="?attr/colorTertiaryContainer"
app:indicatorTrackGapSize="0dp"
app:trackColor="?attr/colorSurfaceContainerHigh"
app:trackThickness="2dp" />

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/collapsedSeekBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:progressBackgroundTint="?attr/colorOutlineVariant"
android:progressTint="?colorTertiary"
android:secondaryProgressTint="?colorTertiary" />
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:progress="20"
app:indicatorColor="?attr/colorTertiary"
app:trackColor="@android:color/transparent"
app:trackThickness="2dp" />

<LinearLayout
android:layout_width="match_parent"
Expand Down

0 comments on commit 8963ba3

Please sign in to comment.