feat: enhance person detail fragment layout on mobile (#400)
* improvement: changed Person Detail Fragment Changed the Person Detail Fragment to better use the available space. Separate layout for larger screens/landscape orientation * added values for different screen sizes * fixed spacing * refactor: rename `layout_height_def` to `person_detail_overview_height` * refactor: remove `+` from some ids I know that xml files are parsed top to bottom and the plus sign create a new id. But it seems to work even if the id is created after it is referenced. I think this is cleaner --------- Co-authored-by: Jarne Demeulemeester <jarnedemeulemeester@gmail.com>
This commit is contained in:
004matteos
GitHub
parent
a36c4f0dca
commit
001ef4a2cc
6 changed files with 175 additions and 10 deletions
|
|
@ -127,7 +127,7 @@ internal class PersonDetailFragment : Fragment() {
|
|||
binding.readAll.setOnClickListener {
|
||||
with(binding.overview) {
|
||||
if (layoutParams.height == ConstraintLayout.LayoutParams.WRAP_CONTENT) {
|
||||
updateLayoutParams { height = ConstraintLayout.LayoutParams.MATCH_CONSTRAINT }
|
||||
updateLayoutParams { height = resources.getDimension(CoreR.dimen.person_detail_overview_height).toInt() }
|
||||
binding.readAll.text = getString(CoreR.string.view_all)
|
||||
binding.overviewGradient.isVisible = true
|
||||
} else {
|
||||
|
|
|
|||
160
app/phone/src/main/res/layout-w600dp/fragment_person_detail.xml
Normal file
160
app/phone/src/main/res/layout-w600dp/fragment_person_detail.xml
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<?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="match_parent">
|
||||
|
||||
<include
|
||||
android:id="@+id/error_layout"
|
||||
layout="@layout/error_panel" />
|
||||
|
||||
<ScrollView
|
||||
android:id="@+id/fragment_content"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<LinearLayout
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="vertical">
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="24dp"
|
||||
android:layout_marginBottom="24dp">
|
||||
|
||||
<com.google.android.material.imageview.ShapeableImageView
|
||||
android:id="@+id/person_image"
|
||||
android:layout_width="176dp"
|
||||
android:layout_height="274dp"
|
||||
android:layout_marginStart="24dp"
|
||||
android:scaleType="centerCrop"
|
||||
app:layout_constraintDimensionRatio="H,3:2"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Findroid.Image" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/name"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginHorizontal="24dp"
|
||||
android:layout_marginTop="16dp"
|
||||
android:textAppearance="@style/TextAppearance.Material3.HeadlineMedium"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintHorizontal_bias="0.666"
|
||||
app:layout_constraintStart_toEndOf="@id/person_image"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
tools:text="Actor/Actress name" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/overview"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="@dimen/person_detail_overview_height"
|
||||
android:layout_marginHorizontal="24dp"
|
||||
android:layout_marginTop="24dp"
|
||||
android:layout_marginBottom="8dp"
|
||||
android:ellipsize="end"
|
||||
android:textAppearance="@style/TextAppearance.Material3.BodyMedium"
|
||||
app:layout_constraintBottom_toTopOf="@id/read_all"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintHorizontal_bias="0.666"
|
||||
app:layout_constraintStart_toEndOf="@id/person_image"
|
||||
app:layout_constraintTop_toBottomOf="@id/name" />
|
||||
|
||||
<Button
|
||||
android:id="@+id/read_all"
|
||||
style="@style/Widget.Material3.Button.TextButton"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginEnd="16dp"
|
||||
android:layout_marginBottom="52dp"
|
||||
android:text="@string/view_all"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent" />
|
||||
|
||||
<FrameLayout
|
||||
android:id="@+id/overview_gradient"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="24dp"
|
||||
android:layout_marginBottom="4dp"
|
||||
android:background="@drawable/header_gradient"
|
||||
app:layout_constraintBottom_toBottomOf="@id/overview"
|
||||
app:layout_constraintEnd_toEndOf="@id/overview"
|
||||
app:layout_constraintHorizontal_bias="1.0"
|
||||
app:layout_constraintStart_toStartOf="@id/overview" />
|
||||
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginBottom="24dp"
|
||||
android:orientation="vertical">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/movie_label"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginHorizontal="24dp"
|
||||
android:layout_marginBottom="12dp"
|
||||
android:text="@string/movies_label"
|
||||
android:textAppearance="@style/TextAppearance.Material3.TitleMedium"
|
||||
android:visibility="gone" />
|
||||
|
||||
<androidx.recyclerview.widget.RecyclerView
|
||||
android:id="@+id/movies_list"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginBottom="24dp"
|
||||
android:clipToPadding="false"
|
||||
android:orientation="horizontal"
|
||||
android:paddingHorizontal="12dp"
|
||||
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
|
||||
tools:itemCount="4"
|
||||
tools:listitem="@layout/base_item" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/show_label"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginHorizontal="24dp"
|
||||
android:layout_marginBottom="12dp"
|
||||
android:text="@string/shows_label"
|
||||
android:textAppearance="@style/TextAppearance.Material3.TitleMedium"
|
||||
android:visibility="gone" />
|
||||
|
||||
<androidx.recyclerview.widget.RecyclerView
|
||||
android:id="@+id/show_list"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:clipToPadding="false"
|
||||
android:orientation="horizontal"
|
||||
android:paddingHorizontal="12dp"
|
||||
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
|
||||
tools:itemCount="4"
|
||||
tools:listitem="@layout/base_item" />
|
||||
|
||||
</LinearLayout>
|
||||
|
||||
</LinearLayout>
|
||||
|
||||
</ScrollView>
|
||||
|
||||
<com.google.android.material.progressindicator.LinearProgressIndicator
|
||||
android:id="@+id/loading_indicator"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:indeterminate="true"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
|
@ -31,11 +31,11 @@
|
|||
|
||||
<com.google.android.material.imageview.ShapeableImageView
|
||||
android:id="@+id/person_image"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="210dp"
|
||||
android:layout_marginStart="24dp"
|
||||
android:layout_width="220dp"
|
||||
android:layout_height="345dp"
|
||||
android:scaleType="centerCrop"
|
||||
app:layout_constraintDimensionRatio="H,3:2"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Findroid.Image" />
|
||||
|
|
@ -45,24 +45,26 @@
|
|||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginHorizontal="24dp"
|
||||
android:layout_marginTop="16dp"
|
||||
android:gravity="center"
|
||||
android:textAppearance="@style/TextAppearance.Material3.HeadlineMedium"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@id/person_image"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@id/person_image"
|
||||
tools:text="Actor/Actress name" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/overview"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
android:layout_height="@dimen/person_detail_overview_height"
|
||||
android:layout_marginHorizontal="24dp"
|
||||
android:layout_marginTop="8dp"
|
||||
android:layout_marginTop="16dp"
|
||||
android:ellipsize="end"
|
||||
android:textAppearance="@style/TextAppearance.Material3.BodyMedium"
|
||||
app:layout_constraintBottom_toTopOf="@id/read_all"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@id/person_image"
|
||||
app:layout_constraintTop_toBottomOf="@+id/name" />
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@id/name" />
|
||||
|
||||
<FrameLayout
|
||||
android:id="@+id/overview_gradient"
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@
|
|||
<item name="server_columns" type="integer">6</item>
|
||||
<item name="collection_columns" type="integer">3</item>
|
||||
<item name="library_columns" type="integer">4</item>
|
||||
<dimen name="person_detail_overview_height">124dp</dimen>
|
||||
</resources>
|
||||
|
|
@ -2,4 +2,5 @@
|
|||
<resources>
|
||||
<item name="server_columns" type="integer">8</item>
|
||||
<item name="library_columns" type="integer">6</item>
|
||||
<dimen name="person_detail_overview_height">200dp</dimen>
|
||||
</resources>
|
||||
|
|
@ -7,4 +7,5 @@
|
|||
<item name="server_columns" type="integer">3</item>
|
||||
<item name="collection_columns" type="integer">2</item>
|
||||
<item name="library_columns" type="integer">2</item>
|
||||
<dimen name="person_detail_overview_height">72dp</dimen>
|
||||
</resources>
|
||||
Loading…
Reference in a new issue