With the advent of Android‘s fragment support library, the
introduction of nested fragments, and fragment transitions, there isn’t a good reason to write a new application and not use
fragments. Android’s fragment model
provides superior flexibility when it comes to providing an optimal user
experience across devices, with displays ranging from less than 4 inches to over
10. However, with so much work put into allowing fragments to
run across such a variety of devices, the APIs still have some rough edges.

One particularly frustrating issue for me was
applying custom transitions to fragments that hosted child fragments. In other words, my activity hosted a fragment,
and that fragment hosted a child fragment. Whenever I did a replace of the fragment at the activity, the UI
framework dropped the child view before the animation happened. The result was a jarring white flash every
time I tried to slide in a new fragment (Figure A). Not pretty.

Figure A

 

 

After several hours of trial and error, I came up
with a workable solution (Figure B). 

Figure B

 

 

The code below demonstrates my approach in the most stripped
down way I could think of to present the material; that said, it is more advanced than most of my TechRepublic tutorials. If you find yourself struggling, or aren’t familiar with fragments, try starting with my introduction to fragments

1. Create a new Android project in Eclipse. Target Android 2.2 or better.

2. Right-click your newly created project in the Eclipse
package explorer, find Android Tools, and choose Add Support Library.

3. In the /res folder, create a new folder called
/anim. This is where we’ll add our slide in
translation animation.

 

~¶ ²Xz)ß®‰›¢Ûh›¥Æioz»"¢ 

4. In our /layout folder we have three layouts: one for the
activity, one for the parent fragment, and one for the child fragment. The layouts are pretty contrived
for the purpose of this demonstration; they largely consist of a frame to hold a subsequent layout.

 

iËb¾+r™¨§ÆiQzV­Š÷‹k*.·¥žÆ§vº"vm§ÿìr¦jƧvº"uÊ&ýªdþ·¬ý©Ý®ˆÆig²Ú(– 

5. We’re ready to start the actual programming. To keep things as simple as possible, I included all of the code in a single java file, which means I used a couple of inner classes where I might not otherwise
have.  Keep in mind I’m trying to
demonstrate the workaround with as little code as possible. The first thing we need to do is wire up the
on click handler so that when the button gets pressed, the fragment (and by
proxy, its child fragment) gets swapped out.

 

1¨§Ëb¾+r«Ú¥§$jœ¢f®¶+Â7ß­¨&jv z¸¦¦Šíjwk¢'h°§vW¢šš+µ©Ý®ˆ²êi¢»oáªi¶ ™éíŠjh®Ö§vº"vË©¦Ší¿†©¤Zڂg§´-Šø­Ê)©¢»ZÚè‰Û.¦š+¶þ¦‘kj žžÔëj{rبž)©¢»ZÚè‰Ûâ{Úʋ­"wåj׫Šjh®Ö§vº"vøžÁXžÂ)©¢»ZÚè‰Ûâ{b{§
Xœ¸¬µéÞ®)©¢»ZÚè‰Ûâ{b{«¢êbšš+µ©Ý®ˆ¾'°Z)Ý£¦¦Šíjwk¢'o‰ìŠwhÀƧj«Šjh®Ö§vº"wëS{U‰ì"šš+µ©Ý®ˆ‚¶©†',+fj˜¦¦Šíjwk¢'`­ªa‰Ë¢Z+Šjh®Ö§vº"v
Ú¦œ±œ¶)©¢»ZÚè‰Ø+j˜brÇkk›•àb¶f©¶°i¹^Šjh®Ö§vº"v
Ú¦œ±ÚÚÁ¦åx:ÚÁ¦åz››–'•«,1¨§Ëb¾+r{^Û­¨&z{@rدŠÜ©®+Úµë-j؜~)ڕ+kŠx
Á
 

6. Add in our two inner classes, and then you can go
ahead and run the code. It should
execute just fine; however, the transitions between screens are the pits.

 

1¨§Ëb¾+r«Ú²Ö­‰ÊnnXœrV¬°ö«z{E­¨&z{^ÆקvÁkj žžÚnnXœ=ªÞžÑkj žžÓ¯zºâuênnXœV'°¢p«y«^V'°-¬¨ºÒ'~V­z¸§~V­zµb{«¢ê\¢{ZŠw«éݕë½çHžËZÇ’µ«^V'°®Š-Šwåj׫Šwåjב•¬¨ºÚZ­éí~¶ ™éížée
¥tZڂg§µÈb•Ñkj
 

7. The workaround involves grabbing a screen shot of the
outgoing child fragment just prior to the transition and assigning it as the
background to the parent activity. First, add the following function to your main activity.

 

1¨§Ëb¾+r«Ú¦¸¯j׃­¬nW zԜ­ç§J-V'°¾'°ëVŠwh­
ç(­XžÂøžÂÇ­¶°ŠxiÈ^v›•çm®ç¯‰ìº)]¶°ŠxiÈ^+fj—kk§€&œ…
 

8. Go back to the anonymous click handler defined in
step 5 and insert the following line at the top of the function just before
the line that reads: “if (currentFrag<2) {“).

 

1¨§Ëb¾+r«Ú‰÷.®·§´ZڃGâÕb{r!ÔbuÊ'µ¨§z¶œ¶+â·+´œ’
èºwC­¬nW zԜ­ç§J-
 

I know this tutorial is a bit complicated, but it solves a
problem that I suspect will continue to plague Android developers for some time
to come. I recommend downloading the entire project and importing it into
Eclipse so you have a complete copy in your toolbox if you need it.