Skip to content

Updated info page animation #36

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.

Sign up for GitHub

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

Open
gilgoldzweig wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Updated info page animation #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
625f501
Updated layout file
gilgoldzweig Mar 1, 2020
db495be
Updated MotionScene file
gilgoldzweig Mar 1, 2020
92ab3a8
Added Transition Listener for text change and modified github click a…
gilgoldzweig Mar 1, 2020
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
22 changes: 19 additions & 3 deletions android/app/src/main/kotlin/com/chicagoroboto/features/info/InfoFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ package com.chicagoroboto.features.info

import android.content.Intent
import android.content.Intent.ACTION_VIEW
import android.graphics.Typeface
import android.net.Uri
import android.os.Bundle
import android.view.View
import androidx.constraintlayout.motion.widget.MotionLayout
import androidx.constraintlayout.motion.widget.TransitionAdapter
import androidx.core.view.updateLayoutParams
import androidx.core.view.updatePadding
import androidx.fragment.app.Fragment
import androidx.lifecycle.lifecycleScope
import androidx.recyclerview.widget.LinearLayoutManager
Expand All @@ -17,6 +21,7 @@ import com.chicagoroboto.ext.presentations
import com.chicagoroboto.features.info.InfoPresenter.Event.ClickedLibrary
import com.chicagoroboto.features.shared.Presentation
import com.chicagoroboto.features.shared.startPresentation
import com.chicagoroboto.view.MotionLayoutInsetHelper
import dev.chrisbanes.insetter.doOnApplyWindowInsets
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.flow.collect
Expand All @@ -29,8 +34,10 @@ class InfoFragment : Fragment(R.layout.info) {
presenterProvider.get().startPresentation(Dispatchers.Main)
}

@Inject lateinit var presenterProvider: Provider<InfoPresenter>
@Inject
lateinit var presenterProvider: Provider<InfoPresenter>

private val motionLayoutInsetHelper = MotionLayoutInsetHelper()
private lateinit var binding: InfoBinding
private val adapter = InfoAdapter { library ->
presentation.presenter.events.offer(ClickedLibrary(library))
Expand All @@ -39,16 +46,25 @@ class InfoFragment : Fragment(R.layout.info) {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding = InfoBinding.bind(view)

binding.motionLayoutRoot.setTransitionListener(object : TransitionAdapter() {

override fun onTransitionStarted(motionLayout: MotionLayout?, startId: Int, endId: Int) {
val typefaceStyle = if (endId == R.id.expanded) Typeface.BOLD else Typeface.NORMAL
binding.toolbarText.setTypeface(binding.toolbarText.typeface, typefaceStyle)
}
})

binding.list.apply {
layoutManager = LinearLayoutManager(context, VERTICAL, false)
adapter = this@InfoFragment.adapter
}

binding.inset.doOnApplyWindowInsets { view, insets, initialState ->
binding.inset.doOnApplyWindowInsets { _, insets, _ ->
Copy link
Copy Markdown
Collaborator

@rharter rharter Mar 7, 2020

Choose a reason for hiding this comment

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

This change looks like you're now setting the height of the wrong view. The height was being set on the inset view, not the fragment's view.

view.updateLayoutParams { height = insets.systemWindowInsetTop }
}

binding.contributorInvite.setOnClickListener {
binding.contributeImg.setOnClickListener {
startActivity(Intent(ACTION_VIEW, Uri.parse(getString(R.string.github_link))))
}
}
Expand Down
223 changes: 55 additions & 168 deletions android/app/src/main/res/layout/info.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<?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"
android:id="@+id/info_root"
android:layout_width="match_parent"
android:layout_height="match_parent">

Expand All @@ -14,215 +15,101 @@
app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/motion_layout_root"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/inset"
app:layoutDescription="@xml/scene_info"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layoutDescription="@xml/scene_info">

<TextView
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="200dp"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/inset" />

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/list"
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_toBottomOf="@+id/toolbar" />

<TextView
android:id="@+id/before_1"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />

<TextView
android:id="@+id/before_2"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chicago"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/inset">

<TextView
android:id="@+id/roboto"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Roboto"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary"
android:visibility="invisible"/>
<View
android:id="@+id/toolbar_background"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="@color/colorPrimary" />

<TextView
android:id="@+id/after_1"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/contribute_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="app"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />
android:layout_marginEnd="16dp" />

<TextView
android:id="@+id/after_2"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="is"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />
<ImageView
android:id="@+id/contribute_img"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_margin="16dp"
android:contentDescription="open github"
android:scaleType="centerInside"
android:elevation="6dp"
android:src="@drawable/ic_logo_github"
android:tint="@color/colorOnPrimary"/>

<TextView
android:id="@+id/after_3"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="open"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />

<TextView
android:id="@+id/after_4"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="source,"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />

<TextView
android:id="@+id/after_5"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="and"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />

<TextView
android:id="@+id/after_6"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="uses"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />

<TextView
android:id="@+id/after_7"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:id="@+id/start_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="these"
android:text="The Chicago "
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />
android:textColor="?attr/colorOnPrimary"
app:layout_constraintEnd_toStartOf="@id/toolbar_text_space_place_holder" />

<TextView
android:id="@+id/after_8"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="open"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />

<TextView
android:id="@+id/after_9"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:id="@+id/toolbar_text_space_place_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="source"
android:text="Roboto"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />
android:visibility="invisible"
app:layout_constraintHorizontal_bias="0.45" />

<TextView
android:id="@+id/after_10"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:id="@+id/toolbar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="libraries."
android:text="Roboto"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary" />

<Button
android:id="@+id/contributor_invite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="@+id/toolbar"
app:layout_constraintEnd_toEndOf="@+id/toolbar"
app:layout_constraintTop_toBottomOf="@+id/after_10"
app:layout_constraintBottom_toBottomOf="@+id/toolbar"
android:text="@string/contributor_invite"
android:textColor="?attr/colorOnPrimary"
style="@style/Widget.MaterialComponents.Button.TextButton" />
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/inset" />

<TextView
android:id="@+id/hider"
android:id="@+id/end_text"
android:layout_width="0dp"
android:layout_height="0dp"
android:alpha="0"
android:background="@color/colorPrimary"
app:layout_constraintEnd_toEndOf="@+id/toolbar"
app:layout_constraintStart_toStartOf="@+id/toolbar"
app:layout_constraintTop_toTopOf="@+id/toolbar"
app:layout_constraintBottom_toBottomOf="@+id/toolbar"/>

<TextView
android:id="@+id/title"
style="@style/TextAppearance.AppCompat.Medium.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Roboto"
android:gravity="start|center_vertical"
android:text=" app is open souce,"
Copy link
Copy Markdown
Collaborator

@rharter rharter Mar 7, 2020

Choose a reason for hiding this comment

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

These were intentionally broken up so the text would still flow on smaller devices (and larger ones). Does this mitigate that in some way?

android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary"
app:layout_constraintStart_toStartOf="@+id/roboto"
app:layout_constraintEnd_toEndOf="@+id/roboto"
app:layout_constraintTop_toTopOf="@+id/roboto"
app:layout_constraintBottom_toBottomOf="@+id/roboto"/>
app:layout_constraintStart_toEndOf="@id/toolbar_text_space_place_holder"
app:layout_constraintTop_toTopOf="@id/inset" />

<TextView
android:id="@+id/title_bold"
android:alpha="0"
style="@style/TextAppearance.MaterialComponents.Headline6"
android:id="@+id/underline_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Roboto"
android:gravity="center"
android:text="and uses these open source libraries"
android:textAppearance="?textAppearanceBody1"
android:textColor="?attr/colorOnPrimary"
android:gravity="start|center_vertical"
app:layout_constraintStart_toStartOf="@+id/roboto"
app:layout_constraintEnd_toEndOf="@+id/roboto"
app:layout_constraintTop_toTopOf="@+id/roboto"
app:layout_constraintBottom_toBottomOf="@+id/roboto"/>
android:textStyle=""
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/toolbar_text_space_place_holder" />

<androidx.constraintlayout.helper.widget.Flow
android:id="@+id/flow"
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginHorizontal="32dp"
app:constraint_referenced_ids="before_1,before_2,roboto,after_1,after_2,after_3,after_4,after_5,after_6,after_7,after_8,after_9,after_10"
app:flow_horizontalGap="4sp"
app:flow_horizontalStyle="packed"
app:flow_verticalAlign="center"
app:flow_verticalStyle="packed"
app:flow_wrapMode="chain"
app:layout_constraintBottom_toBottomOf="@+id/toolbar"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/toolbar" />
app:layout_constraintTop_toBottomOf="@+id/toolbar_background" />

</androidx.constraintlayout.motion.widget.MotionLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Loading