Skip to content

fix: about event view on collapsing layout #1490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 5, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,21 @@ import android.view.LayoutInflater
import android.view.MenuItem
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.isVisible
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.navigation.fragment.navArgs
import com.google.android.material.appbar.AppBarLayout
import com.google.android.material.snackbar.Snackbar
import com.squareup.picasso.Picasso
import kotlinx.android.synthetic.main.fragment_about_event.view.appBar
import kotlinx.android.synthetic.main.fragment_about_event.view.progressBarAbout
import kotlinx.android.synthetic.main.fragment_about_event.view.aboutEventContent
import kotlinx.android.synthetic.main.fragment_about_event.view.aboutEventDetails
import kotlinx.android.synthetic.main.fragment_about_event.view.eventName
import kotlinx.android.synthetic.main.fragment_about_event.view.detailsHeader
import kotlinx.android.synthetic.main.fragment_about_event.view.aboutEventCollapsingLayout
import kotlinx.android.synthetic.main.fragment_about_event.view.aboutEventImage
import org.fossasia.openevent.general.R
import org.fossasia.openevent.general.event.Event
import org.fossasia.openevent.general.event.EventUtils
Expand All @@ -26,12 +28,10 @@ import org.fossasia.openevent.general.utils.stripHtml
import org.koin.androidx.viewmodel.ext.android.viewModel
import org.fossasia.openevent.general.utils.Utils.setToolbar

class AboutEventFragment : Fragment(), AppBarLayout.OnOffsetChangedListener {
class AboutEventFragment : Fragment() {
private lateinit var rootView: View
private val aboutEventViewModel by viewModel<AboutEventViewModel>()
private var isHideToolbarView: Boolean = false
private lateinit var eventExtra: Event
private var title: String = ""
private val safeArgs: AboutEventFragmentArgs by navArgs()

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
Expand All @@ -46,8 +46,6 @@ class AboutEventFragment : Fragment(), AppBarLayout.OnOffsetChangedListener {
loadEvent(it)
})

rootView.appBar.addOnOffsetChangedListener(this)

aboutEventViewModel.error
.nonNull()
.observe(viewLifecycleOwner, Observer {
Expand All @@ -67,30 +65,29 @@ class AboutEventFragment : Fragment(), AppBarLayout.OnOffsetChangedListener {

private fun loadEvent(event: Event) {
eventExtra = event
title = eventExtra.name
rootView.aboutEventContent.text = event.description?.stripHtml()
val startsAt = EventUtils.getEventDateTime(event.startsAt, event.timezone)
val endsAt = EventUtils.getEventDateTime(event.endsAt, event.timezone)

rootView.aboutEventDetails.text = EventUtils.getFormattedDateTimeRangeBulleted(startsAt, endsAt)
rootView.eventName.text = event.name
}

override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
val maxScroll = appBarLayout.totalScrollRange
val percentage = Math.abs(verticalOffset).toFloat() / maxScroll.toFloat()
Picasso.get()
.load(event.originalImageUrl)
.placeholder(R.drawable.header)
.into(rootView.aboutEventImage)

if (percentage == 1f && isHideToolbarView) {
// Collapsed
rootView.detailsHeader.visibility = View.GONE
rootView.aboutEventCollapsingLayout.title = title
isHideToolbarView = !isHideToolbarView
}
if (percentage < 1f && !isHideToolbarView) {
// Not Collapsed
rootView.detailsHeader.visibility = View.VISIBLE
rootView.aboutEventCollapsingLayout.title = " "
isHideToolbarView = !isHideToolbarView
}
rootView.appBar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, offset ->
val thisActivity = activity
if (thisActivity is AppCompatActivity) {
if (Math.abs(offset) == appBarLayout.getTotalScrollRange()) {
rootView.detailsHeader.isVisible = false
thisActivity.supportActionBar?.title = event.name
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was referring to this part. Never mind, I will send a PR to fix this.

} else {
rootView.detailsHeader.isVisible = true
thisActivity.supportActionBar?.title = ""
}
}
})
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
Expand Down
7 changes: 7 additions & 0 deletions app/src/main/res/drawable/scrim_shape.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#00000000"
android:startColor="#FF000000"/>
</shape>
32 changes: 15 additions & 17 deletions app/src/main/res/layout/fragment_about_event.xml
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:id="@+id/aboutEventCoordLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
android:fitsSystemWindows="false">

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
Expand All @@ -28,15 +27,14 @@
android:layout_height="wrap_content"
android:layout_gravity="center" />

<FrameLayout
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/aboutEventImage"
android:layout_width="match_parent"
android:layout_height="@dimen/collapsing_toolbar_height">

<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" />
</FrameLayout>
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:foreground="@drawable/scrim_shape"
app:layout_collapseMode="parallax"
app:srcCompat="@drawable/header" />

<LinearLayout
android:id="@+id/detailsHeader"
Expand All @@ -51,7 +49,7 @@
android:id="@+id/eventName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textColor="@android:color/white"
android:textSize="@dimen/text_size_extra_large"
tools:text="New York Event" />

Expand All @@ -60,7 +58,7 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/padding_small"
android:textColor="@android:color/black"
android:textColor="@android:color/white"
android:textSize="@dimen/text_size_large"
tools:text="Thu, Jun 14 - Sat, Jun 23 | 8:00 AM" />

Expand Down Expand Up @@ -90,14 +88,14 @@

<TextView
android:id="@+id/aboutEventContent"
android:layout_width="wrap_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/layout_margin_medium"
android:padding="@dimen/padding_medium"
android:textColor="@color/black"
android:textSize="@dimen/text_size_medium"
tools:text="Lorem ipsum ipsum ipsum " />

</androidx.cardview.widget.CardView>

</androidx.core.widget.NestedScrollView>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
4 changes: 2 additions & 2 deletions app/src/main/res/values/dimens.xml
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@
<dimen name="event_details_divider">1.2dp</dimen>
<dimen name="divider_margin_bottom">20dp</dimen>
<dimen name="divider_margin_top">12dp</dimen>
<dimen name="collapsing_toolbar_height">220dp</dimen>
<dimen name="details_header_margin_top">40dp</dimen>
<dimen name="collapsing_toolbar_height">320dp</dimen>
<dimen name="details_header_margin_top">100dp</dimen>
Copy link
Member

@liveHarshit liveHarshit Apr 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrong review

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@liveHarshit this is dimensions inside dimens.xml file... Can you please clarify your review?

<dimen name="event_name_divider_height">2dp</dimen>
<dimen name="event_name_divider_width">200dp</dimen>
<dimen name="logo_icon_width">40dp</dimen>
Expand Down