Databases
StackOverflow2013
Postsdbo
POHow to manage UI state and the back stack in a single/dual-pane layout
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to manage UI state and the back stack in a single/dual-pane layout
    primarykey
    data
    text
    <p>I'm having trouble wrapping my head around how to properly manage <code>Fragment</code>s in a typical list-detail design pattern.</p> <p>My layout is working fine and is structured like this for the landscape view (dual pane):</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout ... &gt; &lt;FrameLayout android:id="@+id/list" ... /&gt; &lt;FrameLayout android:id="@+id/container" ... /&gt; &lt;/LinearLayout&gt; </code></pre> <p>And like this for the portrait view (single pane):</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;FrameLayout android:id="@+id/container" ... /&gt; </code></pre> <p>I also have a <code>refs.xml</code> in <code>res/values-w600dp/</code> to make sure the appropriate layout is loaded based on the screen width of the device.</p> <p>When a list item is selected, the landscape view should show the list and the details side-by-side, while the portrait view should show only the details fullscreen. When nothing has been selected, the landscape view should show the left on the left and blank space on the right, while the portrait view should show only the list fullscreen.</p> <p><img src="https://i.stack.imgur.com/IMMWt.png" alt="example"></p> <p>However, here's where I'm having trouble:</p> <ul> <li><p>Do I use a "main" <code>Activity</code> for the list + optional details layout, and another "details" <code>Activity</code> for the portrait, details-only layout? This seems to be what the <a href="http://developer.android.com/guide/components/fragments.html" rel="nofollow noreferrer">Fragments guide</a> example does. I've gotten this approah to work generally, but how do I maintain the state of my details fragment when the orientation changes?</p> <p>Consider the opposite case shown above -- rotating from portrait to landscape while the details are visible means the details <code>Activity</code> would need to be <code>finish()</code>ed so the main <code>Activity</code> could display the two-pane layout, but this also destroys the details fragment and its <code>savedInstanceState</code>. If the user has typed information into the <code>EditText</code> fields in the details fragment, then rotates the device, how do I preserve the entire UI state of the details fragment when I add it to the main (two-pane) <code>Activity</code>?</p></li> <li><p>Do I use only one <code>Activity</code> and manage the <code>Fragment</code>s myself? This allows me to retain the state of the details UI when the orientation changes (because Android takes care of this automatically), but it gets messy when it comes to the back stack.</p> <p>Consider the case in the image -- rotating from landscape to portrait when the details are visible should show show the details single-pane, but how do I properly manage the back stack and <code>ActionBar</code> home icon to show the list single-pane? Rotating back to landscape would also need to undo whatever back stack manipulation I did previously, as both fragments will be visible at once.</p></li> </ul> <p>After some more searching, I found two similar questions (<a href="https://stackoverflow.com/q/7604329/687315">Switch from dual pane to single pane on orientation change maintaining fragment stack</a> and <a href="https://stackoverflow.com/q/6034186/687315">Retain Fragment state between Activities</a>), but my situation is slightly different because I'm not trying to retrofit this functionality but best plan for it up front. What am I missing? Surely Android can manage both the back stack (as in the multiple <code>Activity</code> case) <strong>and</strong> the UI state (as in the single <code>Activity</code> case) at once, right?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USuser113215
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to manage UI state and the back stack in a single/dual-pane layout
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to manage UI state and the back stack in a single/dual-pane layout
      1. USLuksprog
      1. VTBountyStart
    3. VO
      singulars
      1. POHow to manage UI state and the back stack in a single/dual-pane layout
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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