Skip to content

Commit

Permalink
Merge pull request #2356 from dimagi/fix-media-layout
Browse files Browse the repository at this point in the history 
Use RelativeLayout instead of ConstraintLayout for mediaview
  • Loading branch information
@ShivamPokhriyal
ShivamPokhriyal authored Sep 23, 2020
2 parents b027d36 + 1a5da2c commit b92554d
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 242 deletions.
1 change: 0 additions & 1 deletion app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ dependencies {
implementation 'com.github.dimagi:zebra-print-android:v1.2'
implementation 'com.simprints:LibSimprints:1.0.12'
implementation 'androidx.multidex:multidex:2.0.1'
implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
Expand Down
288 changes: 91 additions & 197 deletions app/res/layout/media_layout.xml
View file
Original file line number Diff line number Diff line change
@@ -1,205 +1,99 @@
<?xml version="1.0" encoding="utf-8"?>
<merge 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">

<!-- Used to shift barriers to the top of the layout. Needed for aligning media above text -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/top_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="0dp"/>

<!-- Helpful constraint to shift textContainer to the bottom of mediaView -->
<androidx.constraintlayout.widget.Barrier
android:id="@+id/media_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="top_guideline" />

<org.commcare.views.media.AudioPlaybackButton
android:id="@+id/audio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/media_barrier" />

<ImageButton
android:id="@+id/video_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:src="@android:drawable/ic_media_play"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/audio_button" />

<androidx.constraintlayout.widget.Barrier
android:id="@+id/buttons_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="audio_button, video_button" />

<FrameLayout
android:id="@+id/question_text_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
app:layout_constraintEnd_toStartOf="@id/buttons_barrier"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/buttons_barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/media_barrier" />

<androidx.constraintlayout.widget.Barrier
android:id="@+id/question_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="audio_button, video_button, question_text_container" />

<org.commcare.views.media.CommCareVideoView
android:id="@+id/inline_video_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/question_barrier" />

<ImageView
android:id="@+id/qr_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:adjustViewBounds="true"
android:padding="@dimen/standard_spacer"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/question_barrier" />

<ImageView
android:id="@+id/image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:padding="@dimen/standard_spacer"
android:scaleType="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/question_barrier" />

<org.commcare.views.ResizingImageView
android:id="@+id/resizing_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:adjustViewBounds="true"
android:padding="@dimen/standard_spacer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/question_barrier" />

<!-- Missing media view -->

<!-- Probably an easiest way to show a background color to the missing media view. -->
<View
android:id="@+id/missing_media_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="gone"
tools:visibility="visible"
android:background="@color/border_grey"
app:layout_constraintBottom_toBottomOf="@+id/missing_media_tv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/question_barrier" />

<ImageView
android:id="@+id/download_media_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:layout_marginTop="@dimen/dp40"
android:scaleType="center"
android:src="@drawable/update_download_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/question_barrier" />

<ProgressBar
android:id="@+id/progress_bar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:layout_marginTop="@dimen/dp40"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/question_barrier" />

<TextView
android:id="@+id/missing_media_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:layout_marginTop="@dimen/dp40"
android:gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/download_media_icon" />

<androidx.constraintlayout.widget.Barrier
android:id="@+id/divider_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="audio_button, video_button, question_text_container, missing_media_tv" />
<merge xmlns:android="http://schemas.android.com/apk/res/android">

<RelativeLayout
android:id="@+id/text_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">

<FrameLayout
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_toStartOf="@id/audio_video_button"
android:layout_toLeftOf="@id/audio_video_button"
android:gravity="start"
android:visibility="gone" />

<LinearLayout
android:id="@+id/audio_video_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:orientation="vertical">

<org.commcare.views.media.AudioPlaybackButton
android:id="@+id/audio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />

<ImageButton
android:id="@+id/video_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_media_play"
android:visibility="gone" />

</LinearLayout>
</RelativeLayout>

<RelativeLayout
android:id="@+id/media_pane"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text_container">

<org.commcare.views.media.CommCareVideoView
android:id="@+id/inline_video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />

<ImageView
android:id="@+id/qr_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="@dimen/standard_spacer"
android:scaleType="centerCrop"
android:visibility="gone" />

<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/standard_spacer"
android:scaleType="center"
android:visibility="gone" />

<org.commcare.views.ResizingImageView
android:id="@+id/resizing_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="@dimen/standard_spacer"
android:visibility="gone" />

<include
android:id="@+id/missing_media_view"
layout="@layout/missing_media_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
</RelativeLayout>

<ImageView
android:id="@+id/divider"
android:layout_width="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:layout_alignParentBottom="true"
android:background="@android:drawable/divider_horizontal_bright"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider_barrier" />
android:visibility="gone" />

</merge>
</merge>
38 changes: 38 additions & 0 deletions app/res/layout/missing_media_view.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/border_grey"
android:padding="20dp">

<ImageView
android:id="@+id/download_media_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:scaleType="center"
android:visibility="gone"
android:src="@drawable/update_download_icon" />

<ProgressBar
android:id="@+id/progress_bar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/missing_media_tv"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:visibility="gone" />

<TextView
android:id="@+id/missing_media_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/download_media_icon"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:gravity="center_horizontal"
android:visibility="gone"/>

</RelativeLayout>
Loading

0 comments on commit b92554d

Please sign in to comment.