Tab Stacker


Source link: https://github.com/smart-fun/TabStacker

Tab Stacker

Tab Stacker is an Android library that handles Multiple Fragment History, like it is done on iOS Apps.

Each Tab has its own stack of Fragments, that can be added, replaced or removed using animations. When the user presses back, the top Fragment from the current Tab stack is dismissed.

When a complete stack is removed and restored (during a Tab change, or a system cleanup like when rotating the device), a save and restore mechanism allows you to keep your Fragments up-to-date.

Tab Stacker uses Support Fragments. It is recommended to always use Support Fragments as they are compatible with older devices, and the last bugs are fixed for all devices. See how to migrate to Support Fragment in the wiki.

How to use##

Like any Tabbed application, you need a placeholder where put the Fragments.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >

<!-- This is the Fragment Holder -->
  <FrameLayout

android:id="@+id/fragmentHolder"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="100" />

<!-- Here you could include your bottom bar with tabs -->
  <include

android:layout_width="wrap_content"

android:layout_height="wrap_content"

layout="@layout/myCustomTabs" />  </LinearLayout> 

At Activity creation, you need to create the TabStacker, and restore its state by calling restoreInstance.

When the activity is saving its state, you also need to save the TabStacker state. Call the TabStacker.saveInstance() before super.saveInstance() so that the TabStacker takes the hand in the save / restore process of the Fragments.

public class MainActivity extends FragmentActivity {

private TabStacker mTabStacker;

 @Override
  protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

 setContentView(R.layout.main_activity);

 mTabStacker = new TabStacker(getSupportFragmentManager(), R.id.fragmentHolder);

if (savedInstanceState != null) {

 mTabStacker.restoreInstance(savedInstanceState);

 String selectedTab = mTabStacker.getCurrentTabName();

 // do something like highlight the selected tab...

}

  
}

 @Override
  protected void onSaveInstanceState(Bundle outState) {

// Keep this first

if (mTabStacker != null) {

 mTabStacker.saveInstance(outState);

}

 super.onSaveInstanceState(outState);

  
}

 // will be called by the Fragments when they build their view, so that the View hierarchy will be retored.
  public void restoreView(Fragment fragment, View view) {

mTabStacker.restoreView(fragment, view);

  
}

}

To handle the Back button it is quite simple:

 @Override
  public void onBackPressed() {

if (!mTabStacker.onBackPressed()) {

 super.onBackPressed();

}

  
}

Pushing Fragments

On Android there are 2 ways to push Fragments: Add or Replace (try the Sample App to better see the difference). When you Add a Fragment, the previous one stays in place and can be seen with transparency for example. When you Replace a Fragment, the previous one is removed from the screen and a new one is displayed instead. For both Add & Replace you can use animations.

 // optional animation
  AnimationSet animation = new AnimationSet(R.anim.slide_from_right, R.anim.slide_to_left, R.anim.slide_from_left, R.anim.slide_to_right);

mTabStacker.addFragment(fragment, animation);

  // OR
  mTabStacker.replaceFragment(fragment, animation);
  

Tab Switch

When the user clicks on a tab, the TabStack will save the stack of Fragments of the current Tab, and then restore the stack of Fragment of the new Tab. If the new Tab is empty, you'll have to push the 1st Fragment.

 private void onClickOnTab(String tabName) {

if (!mTabStacker.switchToTab(tabName)) {

 // Try to switch to the TAB STACK

 // no fragment yet on this stack -> push the 1st fragment of the stack

 MyFragment fragment = MyFragment.createInstance(some parameters if necessary);

 mTabStacker.replaceFragment(fragment, null);
  // no animation

}

  
}
 

I recommend to use the Fragment.createInstance pattern instead of new Fragment, so that all the logic for creating / saving / restoring the fragment parameters stays in the Fragment code.

Fragment Code

Your Fragment must inherit from Support Fragments and implement the TabStackInterface.

import android.support.v4.app.Fragment;

If your Fragment uses arguments, they will be automatically saved and restored.

The callbacks onSaveTabFragmentInstance and onRestoreTabFragmentInstance are replacing the Fragment.onSaveInstance() mechanism.

public class MyFragment extends Fragment implements TabStacker.TabStackInterface {

@Override
  public void onTabFragmentPresented(TabStacker.PresentReason reason) {

  
}

@Override
  public void onTabFragmentDismissed(TabStacker.DismissReason reason) {

  
}

@Override
  public View onSaveTabFragmentInstance(Bundle outState) {

  
}

@Override
  public void onRestoreTabFragmentInstance(Bundle savedInstanceState) {

  
}
  
}
 

Let's put a concrete example with a Fragment that has:

  • a title that is defined by arguments
  • a String that is changed dynamically but you want to save & restore when necessary
  • a View hierarchy that you want to save and restore when necessary

Note that for saving the View hierarchy you'll have to keep a reference to that view, because getView() is always null when a cleanup occurs.

public class MyFragment extends Fragment implements TabStacker.TabStackInterface {

private static final String ARGUMENT_TITLE = "title";
  private static final String DYNAMIC_IMPORTANT = "important";

 private View mView;  // keep a reference to the inflated view

// createInstance() pattern with arguments
  public static MyFragment createInstance(String title) {

MyFragment fragment = new MyFragment();

Bundle bundle = new Bundle();

bundle.putString(ARGUMENT_TITLE, title);

fragment.setArguments(bundle);

return fragment;
  
}

 @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

mView = inflater.inflate(R.layout.testfragment, container, false);

return mView;
  
}

 @Override
  public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

 // retrieve the arguments to set the Title

Bundle arguments = getArguments();

String title = arguments.getString(ARGUMENT_TITLE);

TextView titleView = (TextView) view.findViewById(R.id.titleView);

titleView.setText(title);

// Restore the View hierarchy (the Activity holds the TabStacker)

MainActivity activity = (MainActivity) getActivity();

activity.restoreView(this, view);

  
}

  @Override
  public View onSaveTabFragmentInstance(Bundle outState) {

outState.putString(DYNAMIC_IMPORTANT, "my important string to save");

return mView; // so that the View hierarchy can be saved
  
}

@Override
  public void onRestoreTabFragmentInstance(Bundle savedInstanceState) {

String importantString = savedInstanceState.getString(DYNAMIC_IMPORTANT);

  
}
  
}
 

Okay that's it for a full implementation of Fragments with TabStacker.

See other potential tips in the wiki.

You can experiment and download the Tab Stacker Sample App on Google Play

Installation with gradle

Add the following maven{ } line to your PROJECT build.gradle file

allprojects {

  repositories {

jcenter()

maven {
 url "https://jitpack.io" 
}

 // add this line
  
}
 
}
 

Add the libary dependency to your APP build.gradle file

dependencies {

  compile 'com.github.smart-fun:TabStacker:1.0.3'
 // add this line 
}
 

Troubeshooting

I can click on the Fragment behind the top Fragment

You have called addFragment() so the previous Fragment is still behind and is clickable. If you don't want the previous Fragment to stay behind, call replaceFragment() instead. If you just don't want it to be clickable, set clickable="true" in the top fragment layout, so that all clicks that are not intercepted by buttons will be stopped.

I got an IllegalStateException (aka State Loss Exception)

When you do asynchronous calls and then you want to change the Fragment (for example after a webservice call), the Fragment may have been removed or the Activity finished. In these cases you should not try to change the Fragments. Add these tests before trying to change the Fragments:

// code in Activity if (isActive()) {
 // be sure that the Activity is still there
  mTabStacker.replaceFragment(...) 
}
  // or code in Fragment Activity activity = getActivity();
 if ((activity != null) && !isDetached()) {
 // be sure the fragment is still there
  activity.doSomethingWithTheFragment();
 
}
 

Note that there are known bugs in Android where this exception is thrown and should not.

Issue 207269

Issue 25517

A workaround to fix that is to catch the exception, but the Fragment won't be pushed anyway.

 try {

mTabStacker.replaceFragment(...);

  
}
 catch (IllegalStateException exception) {

// too bad but it did not crash at least
  
}

Library License

Copyright 2016 Arnaud Guyon

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Resources

Layout inflation library for Android which uses annotation processing to write the code you don't want to write and simplify your compound views.

Use the annotation @AfterInflate on your compound view's methods you want to run straight after the layout is inflated with Michelangelo.

TextChronometer is a very simple library offering a widget showing a live time formatted like "4 seconds ago": This library is very convenient if you are building apps with a live timeline.

A TextView that simulates the effect from the app Secret where the characters fade in/out at different speeds.

An animated path view following the methods in a blog post.

A highly configurable section based layout manager with headers and all that.

Features:

  • Section Headers
    • Sticky headers
    • Headers in content margins
    • Header overlays
  • Individual layouts for each section at the same time
    • Linear
    • Grid not yet implemented
    • Staggered Grid not yet implemented

A file picker fragment for Android that can be embedded in your app.

Topics


2D Engines   3D Engines   9-Patch   Action Bars   Activities   ADB   Advertisements   Analytics   Animations   ANR   AOP   API   APK   APT   Architecture   Audio   Autocomplete   Background Processing   Backward Compatibility   Badges   Bar Codes   Benchmarking   Bitmaps   Bluetooth   Blur Effects   Bread Crumbs   BRMS   Browser Extensions   Build Systems   Bundles   Buttons   Caching   Camera   Canvas   Cards   Carousels   Changelog   Checkboxes   Cloud Storages   Color Analysis   Color Pickers   Colors   Comet/Push   Compass Sensors   Conferences   Content Providers   Continuous Integration   Crash Reports   Credit Cards   Credits   CSV   Curl/Flip   Data Binding   Data Generators   Data Structures   Database   Database Browsers   Date &   Debugging   Decompilers   Deep Links   Dependency Injections   Design   Design Patterns   Dex   Dialogs   Distributed Computing   Distribution Platforms   Download Managers   Drawables   Emoji   Emulators   EPUB   Equalizers &   Event Buses   Exception Handling   Face Recognition   Feedback &   File System   File/Directory   Fingerprint   Floating Action   Fonts   Forms   Fragments   FRP   FSM   Functional Programming   Gamepads   Games   Geocaching   Gestures   GIF   Glow Pad   Gradle Plugins   Graphics   Grid Views   Highlighting   HTML   HTTP Mocking   Icons   IDE   IDE Plugins   Image Croppers   Image Loaders   Image Pickers   Image Processing   Image Views   Instrumentation   Intents   Job Schedulers   JSON   Keyboard   Kotlin   Layouts   Library Demos   List View   List Views   Localization   Location   Lock Patterns   Logcat   Logging   Mails   Maps   Markdown   Mathematics   Maven Plugins   MBaaS   Media   Menus   Messaging   MIME   Mobile Web   Native Image   Navigation   NDK   Networking   NFC   NoSQL   Number Pickers   OAuth   Object Mocking   OCR Engines   OpenGL   ORM   Other Pickers   Parallax List   Parcelables   Particle Systems   Password Inputs   PDF   Permissions   Physics Engines   Platforms   Plugin Frameworks   Preferences   Progress Indicators   ProGuard   Properties   Protocol Buffer   Pull To   Purchases   Push/Pull   QR Codes   Quick Return   Radio Buttons   Range Bars   Ratings   Recycler Views   Resources   REST   Ripple Effects   RSS   Screenshots   Scripting   Scroll Views   SDK   Search Inputs   Security   Sensors   Services   Showcase Views   Signatures   Sliding Panels   Snackbars   SOAP   Social Networks   Spannable   Spinners   Splash Screens   SSH   Static Analysis   Status Bars   Styling   SVG   System   Tags   Task Managers   TDD &   Template Engines   Testing   Testing Tools   Text Formatting   Text Views   Text Watchers   Text-to   Toasts   Toolkits For   Tools   Tooltips   Trainings   TV   Twitter   Updaters   USB   User Stories   Utils   Validation   Video   View Adapters   View Pagers   Views   Watch Face   Wearable Data   Wearables   Weather   Web Tools   Web Views   WebRTC   WebSockets   Wheel Widgets   Wi-Fi   Widgets   Windows   Wizards   XML   XMPP   YAML   ZIP Codes