Provides a tab switcher similar to the one, which is used in Google Chrome on Android
Provides a tab switcher similar to the one, which is used in Google Chrome on Android
THIS LIBRARY IS STILL WORK IN PROGRESS. THE LAYOUT OPTIMIZED FOR TABLETS IS NOT IMPLEMENTED YET.
"ChromeLikeTabSwitcher" is an Android-library, which provides a tab switcher similar to the one, which is used in the Android version of Google's Chrome browser. It provides layouts optimized for smartphone and tablet devices. The following GIFs illustrate the appearance of the library:
The library provides the following features:
This project is distributed under the Apache License version 2.0. For further information about this license agreement's content please refer to its full version, which is available at http://www.apache.org/licenses/LICENSE-2.0.txt.
The latest release of this library can be downloaded as a zip archive from the download section of the project's Github page, which is available here. Furthermore, the library's source code is available as a Git repository, which can be cloned using the URL https://github.com/michael-rapp/ChromeLikeTabSwitcher.git.
Alternatively, the library can be added to your Android app as a Gradle dependency by adding the following to the respective module's build.gradle file:
dependencies {
compile 'com.github.michael-rapp:chrome-like-tab-switcher:0.4.6'
}The library's tab switcher is implemented as a custom view TabSwitcher. It can be added to an activity or fragment by being declared programmatically or via a XML resource. The following XML code shows how the view can be added to a XML layout resource. A tab switcher should typically be shown fullscreen by setting the attributes layout_width and layout_height to match_parent. Furthermore, the view provides various custom attributes for customizing its appearance, which can as well be seen in the given example.
When instantiating a TabSwitcher programmatically, the following Java code can be used. For all XML attributes shown in the example above, corresponding setter methods are available.
…The tabs, which are contained by a TabSwitcher are represented by instances of the class Tab. The following Java code demonstrates, how a new tab can be created and added to a tab switcher. By setting a custom icon, background color, title color etc., the defaults, which are applied to the TabSwitcher can be overridden for that particular tab. The setParameters-method allows to associate a tab with a Bundle, which may contain additional information about the tab. By implementing the interface Tab.Callback and registering an instance at a Tab by using its addCallback-method, it can be observed, when the properties of a tab has been changed.
…In order to specify how the tabs of a TabSwitcher should look like, the abstract class TabSwitcherDecorator must be overridden and an instance of the implementing class must be applied to the tab switcher by using its setDecorator-method. This is very similar to the paradigm of adapters commonly used in Android developing for populating a ListView, RecyclerView, etc. Each custom implementation of the class TabSwitcherDecorator must override the onInflateView- and onShowTab-method. The first one is used to inflate the view, which should be used by a tab, the latter allows to customize the appearance of the inflated view, depending on the current state. Within the scope of the onShowTab-method the decorator's findViewById-method can be used to reference views. It uses a built-in view holder for better performance.
If different views should be inflated for different tabs, the getViewTypeCount- and getViewType-methods must be overridden as well. The first one should return the total number of different views, which are inflated by the onInflateView-method, the latter one must return a distinct integer value, which specifies the view type of a specific tab. The following code illustrates how the class TabSwitcherDecorator can be implemented.
Furthermore, the class TabSwitcherDecorator enables to override the onSaveInstanceState-method in order to store the current state of a tab within a Bundle. When the tab is shown again, the Bundle will be passed to the onShowTab-method in order to be able to restore the previously saved state. If you want to take care of clearing saved state by yourself, false can be passed to the clearSavedStatesWhenRemovingTabs-method. To manually clear the saved state of a single tab, the clearSavedState-method can be used. For clearing all saved states, the clearAllSavedStates-method is provided.
…In order to apply a decorator to a TabSwitcher its setDecorator-method must be used as shown below. If no decorator has been set, an IllegalStateException will be thrown as soon as the view should become visible.
tabSwitcher.setDecorator(new Decorator());In order to observe the state of a TabSwitcher, the interface TabSwitcherListener listener can be implemented. The interface provides methods, which are invoked, when tabs are added to or removed from a tab switcher, or if the tab switcher has been hidden or shown (only when using the smartphone layout). Instances of the type TabSwitcherListener can be added by using a TabSwitcher's addListener-method. In order to observe, when the close button of a tab has been clicked, the interface TabCloseListener can be implemented and added by using the addTabCloseListener-method accordingly.
As an alternative of the class TabSwitcherDecorator, the class StatefulTabSwitcherDecorator can be used. It is an extension of the class TabSwitcherDecorator, which allows to maintain arbitrary states for a TabSwitcher's tab (it is recommended to use the class AbstractState as a base class though). This is for example useful, if list items are shown within a tab and a reference to the used adapter should be stored to easy the modification of the list items. The states are kept even if the corresponding tab is currently not shown. However, they are not restored after orientation changes and may be vanished when the device is low on memory.
To create states, they must be returned by the decorator's onCreateState-method. When a state is about to be deleted, the onClearState-method is invoked.
By default, the states of tabs are automatically clear, when the corresponding tab is removed. However, when passing false to the clearSavedStatesWhenRemovingTabs-method, this mechanism is turned off. To manually remove states, the clearState- and clearAllStates-methods can be used.
The library's example app illustrates how the class StatefulTabSwitcherDecorator can be used for asynchronouly loading list items, which are shown in a tab using an ArrayAdapter and a Listener. Please refer to its code for further information.
The class TabSwitcher provides various methods to add or remove one or several tabs. If the tab switcher is currently shown, tabs are added or removed in an animated manner. In order to use custom animations, an instance of the class Animation can be passed to the methods.
When using the smartphone layout, a SwipeAnimation is used to add or remove tabs by default. It causes tabs to be swiped horizontally (or vertically in landscape mode). By specifying a value of the enum SwipeAnimation.SwipeDirection, it can be specified, whether the tab should be moved to/from the left or right (respectively to/from the top or bottom in landscape mode). The following code sample illustrates how instances of the class SwipeAnimation can be created by using a builder.
Animation animation = new SwipeAnimation.Builder().setDuration(2000)
.setInterpolator(new LinearInterpolator()).setDirection(SwipeAnimation.SwipeDirection.LEFT)
.create();When using the smartphone layout, a RevealAnimation can be used to add a single tab. Starting at a specific position, the size of the tab will be animated until it is shown fullscreen. Using a RevealAnimation causes the tab switcher to become hidden and the added tab is selected automatically. The following code shows, how a RevealAnimation can be instantiated. All of the builder's setter methods are optional. If they are not called, default values are used.
Animation animation = new RevealAnimation.Builder().setDuration(2000)
.setInterpolator(new LinearInterpolator().setX(20).setY(50)
.create();A PeekAnimation can be used to add a tab, if the smartphone layout is used and when the switcher is currently not shown. Similar to a RevealAnimation, the size of the added tab is animated, starting at a specific position. The tab is then shown at the bottom (or right in landscape mode) of the tab switcher for a short time. Unlike a RevealAnimation, a PeekAnimation does not cause the added tab to become selected. Its purpose is to give a preview of the added tab, while another tab is still shown fullscreen. This corresponds to the animation, which is used in the Google Chrome browser when opening a link in a new tab. A PeekAnimation can be created by using the builder pattern as shown below.
Animation animation = new PeekAnimation.Builder().setDuration(2000)
.setInterpolator(new LinearInterpolator().setX(20).setY(50)
.create();The library provides multiple drag gestures, which can be used to perform certain actions. They can be set to a TabSwitcher by using its addDragGesture-method. If a previously added drag gesture should be removed, the removeDragGesture-method can be used accordingly. Usually, a onscreen area is specified for each gesture in order to specify the area, where drag gestures should be detected. In the following, the available drag gestures are discussed.
Swipe gestures allow to switch between neighboring tabs, when the tab switcher is not currently shown, by swiping horizontally. Such gestures are represented by instances of the class SwipeGesture. In order to create a swipe gesture the builder pattern can be used as shown below. The setTouchableArea method call is used to specify the onscreen area, which should be taken into account for recognizing the gesture, the setAnimationDuration-method allows to set the duration of the swipe animation and the setThreshold-method call sets the distance in pixels, the gesture must last until it is recognized. All of these method calls are optional.
DragGesture gesture = new SwipeGesture.Builder().setTouchableArea(0, 0, 200, 100)
.setAnimationDuration(1000L).setThreshold(10)
.create();A PullDownGesture can be used on smartphones to show the tab switcher by pulling down from the top. It does not have any effects when using the tablet layout. Instances of the class PullDownGesture can be created as follows.
DragGesture gesture = new PullDownGesture.Builder().setTouchableArea(0, 0, 200, 100)
.setThreshold(10)
.create();The view TabSwitcher,
No open issues yet, or sync has not completed.