Better animation to show/hide headers on grid pages (#1015)

## Description
Changes the animation for showing/hiding the header title/buttons on
grid pages.

This eliminates the awkward jump the grid does to fill the screen.
Instead it smoothly resizes.

### Related issues
Fixes the second item in #221

### Testing
Emulator

## Screenshots
N/A

## AI or LLM usage
None
This commit is contained in:
Ray 2026-02-27 01:00:44 -05:00 committed by GitHub
parent b65e55f4ed
commit 55466f803c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 31 additions and 37 deletions

View file

@ -2,10 +2,8 @@ package com.github.damontecres.wholphin.ui.components
import android.content.Context import android.content.Context
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.LocalBringIntoViewSpec import androidx.compose.foundation.gestures.LocalBringIntoViewSpec
@ -802,8 +800,8 @@ fun CollectionFolderGridContent(
) { ) {
AnimatedVisibility( AnimatedVisibility(
showHeader || loadingState !is DataLoadingState.Success, showHeader || loadingState !is DataLoadingState.Success,
enter = slideInVertically() + fadeIn(), enter = expandVertically(),
exit = slideOutVertically() + fadeOut(), exit = shrinkVertically(),
) { ) {
Column( Column(
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),

View file

@ -1,10 +1,8 @@
package com.github.damontecres.wholphin.ui.detail package com.github.damontecres.wholphin.ui.detail
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -127,8 +125,8 @@ fun CollectionFolderLiveTv(
) { ) {
AnimatedVisibility( AnimatedVisibility(
showHeader, showHeader,
enter = slideInVertically() + fadeIn(), enter = expandVertically(),
exit = slideOutVertically() + fadeOut(), exit = shrinkVertically(),
) { ) {
TabRow( TabRow(
selectedTabIndex = selectedTabIndex, selectedTabIndex = selectedTabIndex,

View file

@ -1,10 +1,8 @@
package com.github.damontecres.wholphin.ui.detail package com.github.damontecres.wholphin.ui.detail
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -76,8 +74,8 @@ fun CollectionFolderMovie(
) { ) {
AnimatedVisibility( AnimatedVisibility(
showHeader, showHeader,
enter = slideInVertically() + fadeIn(), enter = expandVertically(),
exit = slideOutVertically() + fadeOut(), exit = shrinkVertically(),
) { ) {
TabRow( TabRow(
selectedTabIndex = selectedTabIndex, selectedTabIndex = selectedTabIndex,

View file

@ -1,10 +1,8 @@
package com.github.damontecres.wholphin.ui.detail package com.github.damontecres.wholphin.ui.detail
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -80,8 +78,8 @@ fun CollectionFolderTv(
) { ) {
AnimatedVisibility( AnimatedVisibility(
showHeader, showHeader,
enter = slideInVertically() + fadeIn(), enter = expandVertically(),
exit = slideOutVertically() + fadeOut(), exit = shrinkVertically(),
) { ) {
TabRow( TabRow(
selectedTabIndex = selectedTabIndex, selectedTabIndex = selectedTabIndex,

View file

@ -1,10 +1,8 @@
package com.github.damontecres.wholphin.ui.detail package com.github.damontecres.wholphin.ui.detail
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -98,8 +96,8 @@ fun FavoritesPage(
) { ) {
AnimatedVisibility( AnimatedVisibility(
showHeader, showHeader,
enter = slideInVertically() + fadeIn(), enter = expandVertically(),
exit = slideOutVertically() + fadeOut(), exit = shrinkVertically(),
) { ) {
TabRow( TabRow(
selectedTabIndex = selectedTabIndex, selectedTabIndex = selectedTabIndex,

View file

@ -3,6 +3,8 @@ package com.github.damontecres.wholphin.ui.detail.livetv
import android.text.format.DateUtils import android.text.format.DateUtils
import android.widget.Toast import android.widget.Toast
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.focusable import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
@ -140,7 +142,11 @@ fun TvGuideGrid(
.fillMaxHeight(.30f), .fillMaxHeight(.30f),
) )
} }
AnimatedVisibility(focusedPosition.row < 1) { AnimatedVisibility(
focusedPosition.row < 1,
enter = expandVertically(),
exit = shrinkVertically(),
) {
ExpandableFaButton( ExpandableFaButton(
title = R.string.view_options, title = R.string.view_options,
iconStringRes = R.string.fa_sliders, iconStringRes = R.string.fa_sliders,

View file

@ -1,10 +1,8 @@
package com.github.damontecres.wholphin.ui.discover package com.github.damontecres.wholphin.ui.discover
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -60,8 +58,8 @@ fun DiscoverPage(
) { ) {
AnimatedVisibility( AnimatedVisibility(
showHeader, showHeader,
enter = slideInVertically() + fadeIn(), enter = expandVertically(),
exit = slideOutVertically() + fadeOut(), exit = shrinkVertically(),
) { ) {
TabRow( TabRow(
selectedTabIndex = selectedTabIndex, selectedTabIndex = selectedTabIndex,