Skip to content

Commit

Permalink
Fix clipping issue when drag returning from dribbble shot.
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickbutcher
nickbutcher committed Aug 2, 2016
1 parent e039a84 commit 07d53c3
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 89 deletions.
125 changes: 59 additions & 66 deletions app/src/main/res/layout/activity_dribbble_shot.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,81 +22,74 @@
android:id="@+id/draggable_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_light"
android:transitionName="@string/transition_shot_background"
android:transitionGroup="false"
app:dragDismissDistance="@dimen/drag_dismiss_distance"
app:dragDismissScale="0.95"
tools:context=".ui.DribbbleShot">

<FrameLayout
android:id="@+id/container"
<io.plaidapp.ui.widget.ParallaxScrimageView
android:id="@+id/shot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_light"
android:transitionName="@string/transition_shot_background"
android:transitionGroup="false">

<io.plaidapp.ui.widget.ParallaxScrimageView
android:id="@+id/shot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="@dimen/shot_collapsed_app_bar_height"
android:foreground="@drawable/mid_grey_ripple"
android:stateListAnimator="@animator/app_bar_pin"
android:transitionName="@string/transition_shot"
android:background="@color/light_grey"
app:scrimColor="@color/scrim"
app:scrimAlpha="0"
app:maxScrimAlpha="0.4"
app:parallaxFactor="-0.5"/>

<!-- We're 'faking' a toolbar here as we just want a back button.
This approach lets the borderless ripple extend beyond the back button's bounds,
toolbar clips it. Wrapping layout needed for the ripple. -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:elevation="@dimen/z_fab_over_touchable_app_bar">

<!-- animate alpha in DribbleShot#enterAnimation
margins push out parent for the borderless ripple -->
<ImageButton
android:id="@+id/back"
android:layout_width="?android:actionBarSize"
android:layout_height="?android:actionBarSize"
android:layout_marginEnd="@dimen/padding_normal"
android:layout_marginBottom="@dimen/padding_normal"
android:src="@drawable/ic_arrow_back"
android:alpha="0"
android:background="@drawable/mid_grey_ripple" />

</FrameLayout>
android:layout_height="wrap_content"
android:minHeight="@dimen/shot_collapsed_app_bar_height"
android:foreground="@drawable/mid_grey_ripple"
android:stateListAnimator="@animator/app_bar_pin"
android:transitionName="@string/transition_shot"
android:background="@color/light_grey"
app:scrimColor="@color/scrim"
app:scrimAlpha="0"
app:maxScrimAlpha="0.4"
app:parallaxFactor="-0.5"/>

<ListView
android:id="@+id/dribbble_comments"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/padding_normal"
android:clipToPadding="false"
android:listSelector="@android:color/transparent"
android:divider="@null"
android:dividerHeight="@dimen/divider_height"
android:headerDividersEnabled="false"
android:footerDividersEnabled="true"
android:nestedScrollingEnabled="true"
android:overScrollMode="never"
android:overScrollFooter="@android:color/transparent" /> <!-- http://stackoverflow.com/a/24394230 -->
<!-- We're 'faking' a toolbar here as we just want a back button.
This approach lets the borderless ripple extend beyond the back button's bounds,
toolbar clips it. Wrapping layout needed for the ripple. -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:elevation="@dimen/z_fab_over_touchable_app_bar">

<io.plaidapp.ui.widget.FABToggle
android:id="@+id/fab_heart"
android:layout_width="@dimen/fab_size"
android:layout_height="@dimen/fab_size"
android:elevation="@dimen/z_fab_over_touchable_app_bar"
android:background="@drawable/fab_dribbble_fav"
android:layout_gravity="end"
<!-- animate alpha in DribbleShot#enterAnimation
margins push out parent for the borderless ripple -->
<ImageButton
android:id="@+id/back"
android:layout_width="?android:actionBarSize"
android:layout_height="?android:actionBarSize"
android:layout_marginEnd="@dimen/padding_normal"
android:stateListAnimator="@animator/raise"
android:src="@drawable/fab_heart" />
android:layout_marginBottom="@dimen/padding_normal"
android:src="@drawable/ic_arrow_back"
android:alpha="0"
android:background="@drawable/mid_grey_ripple" />

</FrameLayout>

<ListView
android:id="@+id/dribbble_comments"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/padding_normal"
android:clipToPadding="false"
android:listSelector="@android:color/transparent"
android:divider="@null"
android:dividerHeight="@dimen/divider_height"
android:headerDividersEnabled="false"
android:footerDividersEnabled="true"
android:nestedScrollingEnabled="true"
android:overScrollMode="never"
android:overScrollFooter="@android:color/transparent" /> <!-- http://stackoverflow.com/a/24394230 -->

<io.plaidapp.ui.widget.FABToggle
android:id="@+id/fab_heart"
android:layout_width="@dimen/fab_size"
android:layout_height="@dimen/fab_size"
android:elevation="@dimen/z_fab_over_touchable_app_bar"
android:background="@drawable/fab_dribbble_fav"
android:layout_gravity="end"
android:layout_marginEnd="@dimen/padding_normal"
android:stateListAnimator="@animator/raise"
android:src="@drawable/fab_heart" />

</io.plaidapp.ui.widget.ElasticDragDismissFrameLayout>
2 changes: 1 addition & 1 deletion app/src/main/res/transition/dribbble_shot_return.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<fade
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:duration="@android:integer/config_mediumAnimTime">
android:duration="300">
<targets>
<target android:targetId="@android:id/navigationBarBackground" />
<target android:targetId="@android:id/statusBarBackground" />
Expand Down
18 changes: 6 additions & 12 deletions app/src/main/res/transition/dribbble_shot_shared_enter.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,19 @@

<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:duration="350"
android:transitionOrdering="together">

<transitionSet>
<!-- can't use a pathMotion here as it causes the frame and the shot
to separate while moving which looks bad :( -->
<changeBounds android:interpolator="@android:interpolator/fast_out_slow_in">
<targets>
<target android:targetId="@id/container" />
<target android:targetId="@id/draggable_frame" />
</targets>
<changeBounds
android:duration="300"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<transition
class="io.plaidapp.ui.transitions.LiftOff"
android:duration="400"
app:initialElevation="@dimen/touch_raise" />
</transitionSet>
</changeBounds>

<transition
class="io.plaidapp.ui.transitions.ShotSharedEnter"
android:duration="300"
android:interpolator="@android:interpolator/fast_out_slow_in">
<targets>
<target android:targetId="@id/shot" />
Expand Down
20 changes: 10 additions & 10 deletions app/src/main/res/transition/dribbble_shot_shared_return.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,23 @@
limitations under the License.
-->

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="220"
android:interpolator="@android:interpolator/fast_out_slow_in"
<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:transitionOrdering="together">

<changeBounds>
<transitionSet>
<targets>
<target android:targetId="@id/container" />
<target android:targetId="@id/draggable_frame" />
</targets>
</changeBounds>
<changeBounds android:interpolator="@android:interpolator/fast_out_slow_in" />
<changeTransform />
</transitionSet>

<transitionSet>
<changeBounds android:interpolator="@android:interpolator/fast_out_slow_in">
<targets>
<target android:targetId="@id/shot" />
</targets>
<changeBounds/>
<changeTransform/>
</transitionSet>
</changeBounds>

</transitionSet>

0 comments on commit 07d53c3

Please sign in to comment.