StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I am currently trying to do something like that, except that Fragment B scale to take the available space and that the 3 pane can be open at the same time if there is enough room. Here is my solution so far, but i'm not sure if i'm going to stick with it. I hope someone will provide an answer showing The Right Way.</p> <p>Instead of using a LinearLayout and animating the weight, I use a RelativeLayout and animate the margins. I'm not sure it's the best way because it require a call to requestLayout() at each update. It's smooth on all my devices though.</p> <p>So, I animate the layout, i am not using fragments transaction. I handle the back button manually to close fragment C if it is open.</p> <p>FragmentB use layout_toLeftOf/ToRightOf to keep it aligned to fragment A and C.</p> <p>When my app trigger an event to display fragment C, I slide-in fragment C, and i slide-out fragment A at the same time. (2 separate animation). Inversely, when Fragment A open, i close C at the same time.</p> <p>In portrait mode or on smaller screen, i use a slightly different layout and slide Fragment C over the screen. </p> <p>To use percentage for the width of Fragment A and C, i think you would have to compute it at run time... (?)</p> <p>Here is the activity's layout:</p> <pre><code><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rootpane" android:layout_width="fill_parent" android:layout_height="fill_parent">  <fragment android:id="@+id/fragment_A" android:layout_width="300dp" android:layout_height="fill_parent" class="com.xyz.fragA" />  <fragment android:id="@+id/fragment_C" android:layout_width="600dp" android:layout_height="match_parent" android:layout_alignParentRight="true" class="com.xyz.fragC"/>  <fragment android:id="@+id/fragment_B" android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_marginLeft="0dip" android:layout_marginRight="0dip" android:layout_toLeftOf="@id/fragment_C" android:layout_toRightOf="@id/fragment_A" class="com.xyz.fragB" /> </RelativeLayout> </code></pre> <p>The animation to slide FragmentC in or out:</p> <pre><code>private ValueAnimator createFragmentCAnimation(final View fragmentCRootView, boolean slideIn) { ValueAnimator anim = null; final RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) fragmentCRootView.getLayoutParams(); if (slideIn) { // set the rightMargin so the view is just outside the right edge of the screen. lp.rightMargin = -(lp.width); // the view's visibility was GONE, make it VISIBLE fragmentCRootView.setVisibility(View.VISIBLE); anim = ValueAnimator.ofInt(lp.rightMargin, 0); } else // slide out: animate rightMargin until the view is outside the screen anim = ValueAnimator.ofInt(0, -(lp.width)); anim.setInterpolator(new DecelerateInterpolator(5)); anim.setDuration(300); anim.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { Integer rightMargin = (Integer) animation.getAnimatedValue(); lp.rightMargin = rightMargin; fragmentCRootView.requestLayout(); } }); if (!slideIn) { // if the view was sliding out, set visibility to GONE once the animation is done anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { fragmentCRootView.setVisibility(View.GONE); } }); } return anim; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload