Make PlaybackFragment full-screen
Change PlaybackFragment to a full-screen layout w/a slide animation.
This commit is contained in:
parent
d8042ef159
commit
4ad86593a6
11 changed files with 96 additions and 49 deletions
|
@ -15,7 +15,6 @@ import com.google.android.material.tabs.TabLayoutMediator
|
|||
import org.oxycblt.auxio.databinding.FragmentMainBinding
|
||||
import org.oxycblt.auxio.library.LibraryFragment
|
||||
import org.oxycblt.auxio.music.MusicViewModel
|
||||
import org.oxycblt.auxio.playback.PlaybackFragment
|
||||
import org.oxycblt.auxio.playback.PlaybackViewModel
|
||||
import org.oxycblt.auxio.songs.SongsFragment
|
||||
import org.oxycblt.auxio.theme.accent
|
||||
|
@ -94,14 +93,6 @@ class MainFragment : Fragment() {
|
|||
|
||||
// --- VIEWMODEL SETUP ---
|
||||
|
||||
playbackModel.shouldOpenPlayback.observe(viewLifecycleOwner) {
|
||||
if (it) {
|
||||
PlaybackFragment().show(requireActivity().supportFragmentManager, "TAG_PLAYBACK")
|
||||
|
||||
playbackModel.doneWithOpenPlayback()
|
||||
}
|
||||
}
|
||||
|
||||
Log.d(this::class.simpleName, "Fragment Created.")
|
||||
|
||||
return binding.root
|
||||
|
|
|
@ -9,6 +9,8 @@ import android.view.ViewGroup
|
|||
import androidx.core.content.ContextCompat
|
||||
import androidx.fragment.app.Fragment
|
||||
import androidx.fragment.app.activityViewModels
|
||||
import androidx.navigation.fragment.findNavController
|
||||
import org.oxycblt.auxio.MainFragmentDirections
|
||||
import org.oxycblt.auxio.R
|
||||
import org.oxycblt.auxio.databinding.FragmentCompactPlaybackBinding
|
||||
import org.oxycblt.auxio.music.MusicViewModel
|
||||
|
@ -46,7 +48,9 @@ class CompactPlaybackFragment : Fragment() {
|
|||
binding.root.visibility = View.GONE
|
||||
|
||||
binding.root.setOnClickListener {
|
||||
playbackModel.openPlayback()
|
||||
findNavController().navigate(
|
||||
MainFragmentDirections.actionGoToPlayback()
|
||||
)
|
||||
}
|
||||
|
||||
// --- VIEWMODEL SETUP ---
|
||||
|
|
|
@ -7,14 +7,15 @@ import android.view.LayoutInflater
|
|||
import android.view.View
|
||||
import android.view.ViewGroup
|
||||
import androidx.core.content.ContextCompat
|
||||
import androidx.fragment.app.Fragment
|
||||
import androidx.fragment.app.activityViewModels
|
||||
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
|
||||
import androidx.navigation.fragment.findNavController
|
||||
import org.oxycblt.auxio.R
|
||||
import org.oxycblt.auxio.databinding.FragmentPlaybackBinding
|
||||
import org.oxycblt.auxio.theme.accent
|
||||
import org.oxycblt.auxio.theme.toColor
|
||||
|
||||
class PlaybackFragment : BottomSheetDialogFragment() {
|
||||
class PlaybackFragment : Fragment() {
|
||||
private val playbackModel: PlaybackViewModel by activityViewModels()
|
||||
|
||||
// TODO: Implement nav to artists/albums
|
||||
|
@ -27,6 +28,7 @@ class PlaybackFragment : BottomSheetDialogFragment() {
|
|||
): View? {
|
||||
val binding = FragmentPlaybackBinding.inflate(inflater)
|
||||
|
||||
// Create accents & icons to use
|
||||
val accentColor = ColorStateList.valueOf(accent.first.toColor(requireContext()))
|
||||
val inactiveColor = ColorStateList.valueOf(R.color.control_color.toColor(requireContext()))
|
||||
|
||||
|
@ -42,16 +44,15 @@ class PlaybackFragment : BottomSheetDialogFragment() {
|
|||
|
||||
binding.playbackModel = playbackModel
|
||||
|
||||
binding.playbackToolbar.setNavigationOnClickListener {
|
||||
findNavController().navigateUp()
|
||||
}
|
||||
|
||||
// Make marquee scroll work
|
||||
binding.playbackSong.isSelected = true
|
||||
binding.playbackAlbum.isSelected = true
|
||||
binding.playbackArtist.isSelected = true
|
||||
|
||||
// Override the accents manually because the BottomSheetFragment is too dumb to do it themselves.
|
||||
binding.playbackSeekBar.thumbTintList = accentColor
|
||||
binding.playbackSeekBar.progressTintList = accentColor
|
||||
binding.playbackSeekBar.progressBackgroundTintList = accentColor
|
||||
|
||||
// --- VIEWMODEL SETUP --
|
||||
|
||||
playbackModel.currentSong.observe(viewLifecycleOwner) {
|
||||
|
|
6
app/src/main/res/anim/anim_nav_slide_down.xml
Normal file
6
app/src/main/res/anim/anim_nav_slide_down.xml
Normal file
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<translate xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:duration="250"
|
||||
android:fromYDelta="0%"
|
||||
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
|
||||
android:toYDelta="100%" />
|
6
app/src/main/res/anim/anim_nav_slide_up.xml
Normal file
6
app/src/main/res/anim/anim_nav_slide_up.xml
Normal file
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<translate xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:duration="250"
|
||||
android:fromYDelta="100%"
|
||||
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
|
||||
android:toYDelta="0%" />
|
11
app/src/main/res/drawable/ic_down.xml
Normal file
11
app/src/main/res/drawable/ic_down.xml
Normal file
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24"
|
||||
android:tint="@color/control_color">
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M7.41,8.59L12,13.17l4.59,-4.58L18,10l-6,6 -6,-6 1.41,-1.41z" />
|
||||
</vector>
|
|
@ -17,38 +17,53 @@
|
|||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/playback_layout"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@color/background"
|
||||
android:theme="@style/Theme.Base"
|
||||
android:padding="@dimen/padding_medium">
|
||||
android:layout_height="match_parent"
|
||||
android:background="@color/background">
|
||||
|
||||
<androidx.appcompat.widget.Toolbar
|
||||
android:id="@+id/playback_toolbar"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="?android:attr/actionBarSize"
|
||||
android:background="?android:attr/windowBackground"
|
||||
android:theme="@style/Toolbar.Style"
|
||||
android:clickable="true"
|
||||
android:focusable="true"
|
||||
app:navigationIcon="@drawable/ic_down"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:title="@string/title_playback"
|
||||
app:titleTextAppearance="@style/TextAppearance.Toolbar.Header" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/playback_cover"
|
||||
android:layout_width="@dimen/cover_size_playback"
|
||||
android:layout_height="@dimen/cover_size_playback"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
android:layout_margin="@dimen/margin_large"
|
||||
android:contentDescription="@{@string/description_album_cover(song.name)}"
|
||||
android:layout_marginBottom="100dp"
|
||||
app:layout_constraintDimensionRatio="1:1"
|
||||
app:coverArt="@{song}"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_song"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_toolbar"
|
||||
tools:src="@drawable/ic_song" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_song"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/margin_medium"
|
||||
android:ellipsize="marquee"
|
||||
android:focusable="true"
|
||||
android:fontFamily="@font/inter_semibold"
|
||||
android:marqueeRepeatLimit="marquee_forever"
|
||||
android:singleLine="true"
|
||||
android:focusable="true"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:text="@{song.name}"
|
||||
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_artist"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_cover"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintVertical_chainStyle="packed"
|
||||
tools:text="Song Name" />
|
||||
|
||||
|
@ -56,60 +71,60 @@
|
|||
android:id="@+id/playback_artist"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/margin_medium"
|
||||
android:ellipsize="marquee"
|
||||
android:marqueeRepeatLimit="marquee_forever"
|
||||
android:singleLine="true"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:text="@{song.album.artist.name}"
|
||||
android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
|
||||
android:textColor="?android:attr/textColorSecondary"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_album"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintHorizontal_bias="0.0"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_cover"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_song"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
tools:text="Artist Name" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/playback_album"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="@dimen/margin_medium"
|
||||
android:ellipsize="marquee"
|
||||
android:layout_marginStart="@dimen/margin_large"
|
||||
android:layout_marginEnd="@dimen/margin_large"
|
||||
android:marqueeRepeatLimit="marquee_forever"
|
||||
android:layout_marginBottom="@dimen/margin_medium"
|
||||
android:singleLine="true"
|
||||
android:text="@{song.album.name}"
|
||||
android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
|
||||
android:textColor="?android:attr/textColorSecondary"
|
||||
app:layout_constraintBottom_toBottomOf="@+id/playback_cover"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_seek_bar"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@+id/playback_cover"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_artist"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
tools:text="Album Name" />
|
||||
|
||||
<SeekBar
|
||||
android:id="@+id/playback_seek_bar"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="@dimen/margin_medium"
|
||||
android:paddingStart="6dp"
|
||||
android:paddingEnd="6dp"
|
||||
android:thumbTint="?android:attr/colorPrimary"
|
||||
android:splitTrack="false"
|
||||
android:layout_marginBottom="@dimen/margin_medium"
|
||||
android:paddingStart="@dimen/margin_large"
|
||||
android:paddingEnd="@dimen/margin_large"
|
||||
android:progressBackgroundTint="?android:attr/colorControlNormal"
|
||||
android:progressTint="?android:attr/colorPrimary"
|
||||
android:splitTrack="false"
|
||||
android:thumbTint="?android:attr/colorPrimary"
|
||||
app:layout_constraintBottom_toTopOf="@+id/playback_play_pause"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_cover"
|
||||
tools:progress="70" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/playback_play_pause"
|
||||
android:layout_width="70dp"
|
||||
android:layout_height="70dp"
|
||||
android:layout_marginTop="@dimen/margin_medium"
|
||||
android:layout_marginBottom="@dimen/margin_medium"
|
||||
android:layout_width="@dimen/controls_size"
|
||||
android:layout_height="@dimen/controls_size"
|
||||
android:layout_marginBottom="40dp"
|
||||
android:background="@drawable/ui_circular_button"
|
||||
android:backgroundTint="?android:attr/colorPrimary"
|
||||
android:contentDescription="@{playbackModel.isPlaying ? @string/description_pause : @string/description_play}"
|
||||
android:foregroundTint="@color/background"
|
||||
android:onClick="@{() -> playbackModel.invertPlayingStatus()}"
|
||||
|
@ -117,8 +132,6 @@
|
|||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@+id/playback_seek_bar"
|
||||
android:backgroundTint="?android:attr/colorPrimary"
|
||||
tools:src="@drawable/ic_play_to_pause" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
|
|
@ -51,6 +51,13 @@
|
|||
app:destination="@id/loading_fragment"
|
||||
app:popUpTo="@id/main_fragment"
|
||||
app:popUpToInclusive="true" />
|
||||
<action
|
||||
android:id="@+id/action_go_to_playback"
|
||||
app:destination="@id/playback_fragment"
|
||||
app:enterAnim="@anim/anim_nav_slide_up"
|
||||
app:exitAnim="@anim/anim_nav_slide_down"
|
||||
app:popEnterAnim="@anim/anim_nav_slide_up"
|
||||
app:popExitAnim="@anim/anim_nav_slide_down" />
|
||||
</fragment>
|
||||
<fragment
|
||||
android:id="@+id/artist_detail_fragment"
|
||||
|
@ -103,4 +110,9 @@
|
|||
android:name="genreId"
|
||||
app:argType="long" />
|
||||
</fragment>
|
||||
<fragment
|
||||
android:id="@+id/playback_fragment"
|
||||
android:name="org.oxycblt.auxio.playback.PlaybackFragment"
|
||||
android:label="PlaybackFragment"
|
||||
tools:layout="@layout/fragment_playback" />
|
||||
</navigation>
|
|
@ -1,5 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- TODO: Do dimens refactoring -->
|
||||
<dimen name="padding_tiny">4dp</dimen>
|
||||
<dimen name="padding_small">8dp</dimen>
|
||||
<dimen name="padding_medium">16dp</dimen>
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<!-- Title Namespace | Toolbar titles -->
|
||||
<string name="title_library_fragment">Library</string>
|
||||
<string name="title_all_songs">All Songs</string>
|
||||
<string name="title_playback">Now Playing</string>
|
||||
|
||||
<!-- Error Namespace | Error Labels -->
|
||||
<string name="error_no_music">No music found.</string>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- TODO: Try to make some of these styles better -->
|
||||
<!-- Base theme -->
|
||||
<style name="Theme.Base" parent="Theme.AppCompat.DayNight.NoActionBar">
|
||||
<item name="android:windowBackground">@color/background</item>
|
||||
|
|
Loading…
Reference in a new issue