Manga description adjustments (#6011)

* Manga description adjustments

- Animated state changes
- Adjust scrim position to fully show 2 lines when shrunk
- Set minLines to avoid scrim hiding oneliner

* Change icon and adjust animation

* Revert fancy scrim animation
This commit is contained in:
Ivan Iskandar
2021-10-09 22:02:45 +07:00
committed by GitHub
parent 2d1404d155
commit f32f1eeaa5
7 changed files with 480 additions and 344 deletions

View File

@@ -0,0 +1,85 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:name="caret_up"
android:width="24.0dip"
android:height="24.0dip"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group
android:name="caret01"
android:rotation="90.0"
android:translateX="12.0"
android:translateY="15.0">
<group
android:name="caret_l"
android:rotation="45.0">
<group
android:name="caret_l_pivot"
android:translateY="4.0">
<group
android:name="caret_l_rect_position"
android:translateY="-1.0">
<path
android:name="caret_l_rect"
android:fillColor="@android:color/black"
android:pathData="M -1.0,-4.0 l 2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l -2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,-8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 Z" />
</group>
</group>
</group>
<group
android:name="caret_r"
android:rotation="-45.0">
<group
android:name="caret_r_pivot"
android:translateY="-4.0">
<group
android:name="caret_r_rect_position"
android:translateY="1.0">
<path
android:name="caret_r_rect"
android:fillColor="@android:color/black"
android:pathData="M -1.0,-4.0 l 2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l -2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,-8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 Z" />
</group>
</group>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="caret01">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="300"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:pathData="M 12.0,9.0 c 0.0,0.66667 0.0,5.0 0.0,6.0"
android:propertyXName="translateX"
android:propertyYName="translateY" />
</aapt:attr>
</target>
<target android:name="caret_l">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="300"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="rotation"
android:valueFrom="-45.0"
android:valueTo="45.0"
android:valueType="floatType" />
</aapt:attr>
</target>
<target
android:name="caret_r">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="300"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="rotation"
android:valueFrom="45.0"
android:valueTo="-45.0"
android:valueType="floatType" />
</aapt:attr>
</target>
</animated-vector>

View File

@@ -0,0 +1,84 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:name="caret_up"
android:height="24.0dip"
android:width="24.0dip"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group
android:name="caret02"
android:rotation="90.0"
android:translateX="12.0"
android:translateY="9.0">
<group
android:name="caret02_l"
android:rotation="-45.0">
<group
android:name="caret02_l_pivot"
android:translateY="4.0">
<group
android:name="caret02_l_rect_position"
android:translateY="-1.0">
<path
android:name="caret02_l_rect"
android:fillColor="@android:color/black"
android:pathData="M -1.0,-4.0 l 2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l -2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,-8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 Z" />
</group>
</group>
</group>
<group
android:name="caret02_r"
android:rotation="45.0">
<group
android:name="caret02_r_pivot"
android:translateY="-4.0">
<group
android:name="caret02_r_rect_position"
android:translateY="1.0">
<path
android:name="caret02_r_rect"
android:fillColor="@android:color/black"
android:pathData="M -1.0,-4.0 l 2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l -2.0,0.0 c 0.0,0.0 0.0,0.0 0.0,0.0 l 0.0,-8.0 c 0.0,0.0 0.0,0.0 0.0,0.0 Z" />
</group>
</group>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="caret02">
<aapt:attr name="android:animation">
<objectAnimator
android:interpolator="@android:interpolator/fast_out_slow_in"
android:duration="300"
android:pathData="M 12.0,15.0 c 0.0,-1.0 0.0,-5.33333 0.0,-6.0"
android:propertyXName="translateX"
android:propertyYName="translateY" />
</aapt:attr>
</target>
<target android:name="caret02_l">
<aapt:attr name="android:animation">
<objectAnimator
android:interpolator="@android:interpolator/fast_out_slow_in"
android:duration="300"
android:valueFrom="45.0"
android:valueTo="-45.0"
android:valueType="floatType"
android:propertyName="rotation" />
</aapt:attr>
</target>
<target android:name="caret02_r">
<aapt:attr name="android:animation">
<objectAnimator
android:interpolator="@android:interpolator/fast_out_slow_in"
android:duration="300"
android:valueFrom="-45.0"
android:valueTo="45.0"
android:valueType="floatType"
android:propertyName="rotation" />
</aapt:attr>
</target>
</animated-vector>

View File

@@ -188,126 +188,12 @@
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
<eu.kanade.tachiyomi.widget.MangaSummaryView
android:id="@+id/manga_summary_section"
android:layout_width="match_parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/manga_actions">
<TextView
android:id="@+id/manga_summary_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:clickable="true"
android:ellipsize="end"
android:focusable="true"
android:maxLines="3"
android:textAppearance="?attr/textAppearanceBody2"
android:textColor="?android:attr/textColorSecondary"
android:textIsSelectable="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" />
<View
android:id="@+id/manga_info_scrim"
android:layout_width="0dp"
android:layout_height="32sp"
android:background="@drawable/manga_info_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
app:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
app:layout_constraintStart_toStartOf="@+id/manga_summary_text" />
<View
android:id="@+id/manga_info_toggle_more_scrim"
android:layout_width="36sp"
android:layout_height="18sp"
android:background="@drawable/manga_info_more_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more"
app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more"
app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
<ImageButton
android:id="@+id/manga_info_toggle_more"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-4dp"
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:background="@android:color/transparent"
android:contentDescription="@string/manga_info_expand"
android:src="@drawable/ic_expand_more_24dp"
app:layout_constraintBottom_toBottomOf="@id/manga_summary_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:tint="?android:attr/textColorPrimary" />
<ImageButton
android:id="@+id/manga_info_toggle_less"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:background="@android:color/transparent"
android:contentDescription="@string/manga_info_collapse"
android:src="@drawable/ic_expand_less_24dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
app:tint="?android:attr/textColorPrimary"
tools:visibility="visible" />
<HorizontalScrollView
android:id="@+id/manga_genres_tags_compact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:requiresFadingEdge="horizontal"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more">
<com.google.android.material.chip.ChipGroup
android:id="@+id/manga_genres_tags_compact_chips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingTop="8dp"
android:paddingEnd="16dp"
android:paddingBottom="8dp"
app:chipSpacingHorizontal="4dp"
app:singleLine="true" />
</HorizontalScrollView>
<com.google.android.material.chip.ChipGroup
android:id="@+id/manga_genres_tags_full_chips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:visibility="gone"
app:chipSpacingHorizontal="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less"
tools:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>
app:layout_constraintTop_toBottomOf="@id/manga_actions" />
</androidx.constraintlayout.widget.ConstraintLayout>

View File

@@ -200,124 +200,12 @@
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
<eu.kanade.tachiyomi.widget.MangaSummaryView
android:id="@+id/manga_summary_section"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/manga_actions">
<TextView
android:id="@+id/manga_summary_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:clickable="true"
android:ellipsize="end"
android:focusable="true"
android:maxLines="3"
android:textAppearance="?attr/textAppearanceBody2"
android:textColor="?android:attr/textColorSecondary"
android:textIsSelectable="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" />
<View
android:id="@+id/manga_info_scrim"
android:layout_width="0dp"
android:layout_height="32sp"
android:background="@drawable/manga_info_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
app:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
app:layout_constraintStart_toStartOf="@+id/manga_summary_text" />
<View
android:id="@+id/manga_info_toggle_more_scrim"
android:layout_width="36sp"
android:layout_height="18sp"
android:background="@drawable/manga_info_more_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more"
app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more"
app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
<ImageButton
android:id="@+id/manga_info_toggle_more"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-4dp"
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:background="@android:color/transparent"
android:contentDescription="@string/manga_info_expand"
android:src="@drawable/ic_expand_more_24dp"
app:layout_constraintBottom_toBottomOf="@id/manga_summary_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:tint="?android:attr/textColorPrimary" />
<ImageButton
android:id="@+id/manga_info_toggle_less"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:background="@android:color/transparent"
android:contentDescription="@string/manga_info_collapse"
android:src="@drawable/ic_expand_less_24dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
app:tint="?android:attr/textColorPrimary"
tools:visibility="visible" />
<HorizontalScrollView
android:id="@+id/manga_genres_tags_compact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:requiresFadingEdge="horizontal"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more">
<com.google.android.material.chip.ChipGroup
android:id="@+id/manga_genres_tags_compact_chips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingTop="8dp"
android:paddingEnd="16dp"
android:paddingBottom="8dp"
app:chipSpacingHorizontal="4dp"
app:singleLine="true" />
</HorizontalScrollView>
<com.google.android.material.chip.ChipGroup
android:id="@+id/manga_genres_tags_full_chips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:visibility="gone"
app:chipSpacingHorizontal="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less"
tools:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>
app:layout_constraintTop_toBottomOf="@id/manga_actions" />
</androidx.constraintlayout.widget.ConstraintLayout>

View File

@@ -0,0 +1,94 @@
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/description_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:ellipsize="end"
android:textAppearance="?attr/textAppearanceBody2"
android:textColor="?android:attr/textColorSecondary"
android:textIsSelectable="false"
app:firstBaselineToTopHeight="0dp"
app:lastBaselineToBottomHeight="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" />
<View
android:id="@+id/description_scrim"
android:layout_width="0dp"
android:layout_height="24sp"
android:background="@drawable/manga_info_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/description_text"
app:layout_constraintEnd_toEndOf="@+id/description_text"
app:layout_constraintStart_toStartOf="@+id/description_text" />
<View
android:id="@+id/toggle_more_scrim"
android:layout_width="36sp"
android:layout_height="18sp"
android:background="@drawable/manga_info_more_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/toggle_more"
app:layout_constraintEnd_toEndOf="@+id/toggle_more"
app:layout_constraintStart_toStartOf="@+id/toggle_more"
app:layout_constraintTop_toTopOf="@+id/toggle_more" />
<ImageButton
android:id="@+id/toggle_more"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-6dp"
android:background="@android:color/transparent"
android:contentDescription="@string/manga_info_expand"
android:padding="0dp"
android:src="@drawable/anim_caret_down"
app:layout_constraintBottom_toBottomOf="@id/description_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:tint="?android:attr/textColorPrimary" />
<HorizontalScrollView
android:id="@+id/tag_chips_shrunk_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:requiresFadingEdge="horizontal"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toggle_more">
<com.google.android.material.chip.ChipGroup
android:id="@+id/tag_chips_shrunk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingHorizontal="16dp"
android:paddingVertical="8dp"
app:chipSpacingHorizontal="4dp"
app:singleLine="true" />
</HorizontalScrollView>
<com.google.android.material.chip.ChipGroup
android:id="@+id/tag_chips_expanded"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="16dp"
android:paddingVertical="8dp"
android:visibility="gone"
app:chipSpacingHorizontal="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toggle_more"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>