A custom ViewPager title strip which gives continuous feedback to the user when scrolling

Overview

SmartTabLayout

Maven Central Android Arsenal Android Weekly

icon

A custom ViewPager title strip which gives continuous feedback to the user when scrolling.

This library has been added some features and utilities based on android-SlidingTabBasic project of Google Samples.

SmartTabLayout Demo1 SmartTabLayout Demo2 SmartTabLayout Demo3 SmartTabLayout Demo4 SmartTabLayout Demo5 SmartTabLayout Demo6 SmartTabLayout Demo7

Try out the sample application on the Play Store.

Get it on Google Play

Usage

(For a working implementation of this project see the demo/ folder.)

Add the dependency to your build.gradle.

// For androidx (1.0.0)
dependencies {
    compile 'com.ogaclejapan.smarttablayout:library:2.0.0@aar'

    //Optional: see how to use the utility.
    compile 'com.ogaclejapan.smarttablayout:utils-v4:2.0.0@aar'
}

// For legacy android support library (28.0.0)
dependencies {
    compile 'com.ogaclejapan.smarttablayout:library:1.7.0@aar'

    //Optional: see how to use the utility.
    compile 'com.ogaclejapan.smarttablayout:utils-v4:1.7.0@aar'

    //Deprecated since 1.7.0
    compile 'com.ogaclejapan.smarttablayout:utils-v13:1.7.0@aar'
}

Include the SmartTabLayout widget in your layout. This should usually be placed above the ViewPager it represents.

<com.ogaclejapan.smarttablayout.SmartTabLayout
    android:id="@+id/viewpagertab"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    app:stl_indicatorAlwaysInCenter="false"
    app:stl_indicatorWithoutPadding="false"
    app:stl_indicatorInFront="false"
    app:stl_indicatorInterpolation="smart"
    app:stl_indicatorGravity="bottom"
    app:stl_indicatorColor="#40C4FF"
    app:stl_indicatorThickness="4dp"
    app:stl_indicatorWidth="auto"
    app:stl_indicatorCornerRadius="2dp"
    app:stl_overlineColor="#4D000000"
    app:stl_overlineThickness="0dp"
    app:stl_underlineColor="#4D000000"
    app:stl_underlineThickness="1dp"
    app:stl_dividerColor="#4D000000"
    app:stl_dividerThickness="1dp"
    app:stl_defaultTabBackground="?attr/selectableItemBackground"
    app:stl_defaultTabTextAllCaps="true"
    app:stl_defaultTabTextColor="#FC000000"
    app:stl_defaultTabTextSize="12sp"
    app:stl_defaultTabTextHorizontalPadding="16dp"
    app:stl_defaultTabTextMinWidth="0dp"
    app:stl_distributeEvenly="false"
    app:stl_clickable="true"
    app:stl_titleOffset="24dp"
    app:stl_drawDecorationAfterTab="false"
    />

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/viewpagertab"
    />

In your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager. (If you use a utility together, you can easily add items to PagerAdapter)

e.g. ViewPager of v4.Fragment

FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
        getSupportFragmentManager(), FragmentPagerItems.with(this)
        .add(R.string.titleA, PageFragment.class)
        .add(R.string.titleB, PageFragment.class)
        .create());

ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(adapter);

SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
viewPagerTab.setViewPager(viewPager);

(Optional) If you use an OnPageChangeListener with your view pager you should set it in the widget rather than on the pager directly.

viewPagerTab.setOnPageChangeListener(mPageChangeListener);

(Optional) Using the FragmentPagerItemAdapter of utility, you will be able to get a position in the Fragment side.

int position = FragmentPagerItem.getPosition(getArguments());

This position will help to implement the parallax scrolling header that contains the ViewPager :P

Attributes

There are several attributes you can set:

attr description
stl_indicatorAlwaysInCenter If set to true, active tab is always displayed in center (Like Newsstand google app), default false
stl_indicatorWithoutPadding If set to true, draw the indicator without padding of tab, default false
stl_indicatorInFront Draw the indicator in front of the underline, default false
stl_indicatorInterpolation Behavior of the indicator: 'linear' or 'smart'
stl_indicatorGravity Drawing position of the indicator: 'bottom' or 'top' or 'center', default 'bottom'
stl_indicatorColor Color of the indicator
stl_indicatorColors Multiple colors of the indicator, can set the color for each tab
stl_indicatorThickness Thickness of the indicator
stl_indicatorWidth Width of the indicator, default 'auto'
stl_indicatorCornerRadius Radius of rounded corner the indicator
stl_overlineColor Color of the top line
stl_overlineThickness Thickness of the top line
stl_underlineColor Color of the bottom line
stl_underlineThickness Thickness of the bottom line
stl_dividerColor Color of the dividers between tabs
stl_dividerColors Multiple colors of the dividers between tabs, can set the color for each tab
stl_dividerThickness Thickness of the divider
stl_defaultTabBackground Background drawable of each tab. In general it set the StateListDrawable
stl_defaultTabTextAllCaps If set to true, all tab titles will be upper case, default true
stl_defaultTabTextColor Text color of the tab that was included by default
stl_defaultTabTextSize Text size of the tab that was included by default
stl_defaultTabTextHorizontalPadding Text layout padding of the tab that was included by default
stl_defaultTabTextMinWidth Minimum width of tab
stl_customTabTextLayoutId Layout ID defined custom tab. If you do not specify a layout, use the default tab
stl_customTabTextViewId Text view ID in a custom tab layout. If you do not define with customTabTextLayoutId, does not work
stl_distributeEvenly If set to true, each tab is given the same weight, default false
stl_clickable If set to false, disable the selection of a tab click, default true
stl_titleOffset If set to 'auto_center', the slide position of the tab in the middle it will keep to the center. If specify a dimension it will be offset from the left edge, default 24dp
stl_drawDecorationAfterTab Draw the decoration(indicator and lines) after drawing of tab, default false

Notes: Both 'stl_indicatorAlwaysInCenter' and 'stl_distributeEvenly' if it is set to true, it will throw UnsupportedOperationException.

How to customize the tab

The customization of tab There are three ways.

  • Customize the attribute
  • SmartTabLayout#setCustomTabView(int layoutResId, int textViewId)
  • SmartTabLayout#setCustomTabView(TabProvider provider)

If set the TabProvider, can build a view for each tab.

public class SmartTabLayout extends HorizontalScrollView {

    //...

    /**
     * Create the custom tabs in the tab layout. Set with
     * {@link #setCustomTabView(com.ogaclejapan.smarttablayout.SmartTabLayout.TabProvider)}
     */
    public interface TabProvider {

        /**
         * @return Return the View of {@code position} for the Tabs
         */
        View createTabView(ViewGroup container, int position, PagerAdapter adapter);

    }

    //...
}

How to use the utility

Utility has two types available to suit the Android support library.

  • utils-v4 library contains the PagerAdapter implementation class for androidx.fragment.app.Fragment
  • (Deprecated) utils-v13 library contains the PagerAdapter implementation class for android.app.Fragment

The two libraries have different Android support libraries that depend, but implemented functionality is the same.

PagerAdapter for View-based Page

ViewPagerItemAdapter adapter = new ViewPagerItemAdapter(ViewPagerItems.with(this)
        .add(R.string.title, R.layout.page)
        .add("title", R.layout.page)
        .create());

viewPager.setAdapter(adapter);

//...

public void onPageSelected(int position) {

  //.instantiateItem() from until .destroyItem() is called it will be able to get the View of page.
  View page = adapter.getPage(position);

}

PagerAdapter for Fragment-based Page

Fragment-based PagerAdapter There are two implementations. Please differences refer to the library documentation for Android.

  • FragmentPagerItemAdapter extends FragmentPagerAdapter
  • FragmentStatePagerItemAdapter extends FragmentStatePagerAdapter
FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
        getSupportFragmentManager(), FragmentPagerItems.with(this)
        .add(R.string.title, PageFragment.class),
        .add(R.string.title, WithArgumentsPageFragment.class, new Bundler().putString("key", "value").get()),
        .add("title", PageFragment.class)
        .create());

viewPager.setAdapter(adapter);

//...

public void onPageSelected(int position) {

  //.instantiateItem() from until .destoryItem() is called it will be able to get the Fragment of page.
  Fragment page = adapter.getPage(position);

}

Notes: If using fragment inside a ViewPager, Must be use Fragment#getChildFragmentManager().

Looking for iOS ?

Check WormTabStrip out.

LICENSE

Copyright (C) 2015 ogaclejapan
Copyright (C) 2013 The Android Open Source Project

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.
Comments
  • Why I can't add a instance of Fragment?

    Why I can't add a instance of Fragment?

    This can be a problem:

    add(int title, java.lang.Class<? extends android.support.v4.app.Fragment> clazz)
    

    I need to have a:

    add(int title, Fragment fragment)
    

    Why, If I need create a instance of the Fragment, I need use this.

    question 
    opened by ppamorim 10
  • getPage error

    getPage error

    Hi! If you change the position of an element can not be found.

        ..........
        ViewPagerItems.Creator items = ViewPagerItems.with(getActivity());
        for (String type : book_type) {
            items.add(ViewPagerItem.of(type, R.layout.books_list));
        }
        adaptertab = new ViewPagerItemAdapter(items.create());
    
        viewPager.setAdapter(adaptertab);
        viewPagerTab.setViewPager(viewPager);
    

    Everything works fine until it:

        viewPagerTab.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
            @Override
            public void onPageScrollStateChanged(int state) { }
    
            @Override
            public void onPageSelected(int position) {
                View page = adaptertab.getPage(position);
                RecyclerView cardList = (RecyclerView) page.findViewById(R.id.cardList);   // ERROR
                cardList.setHasFixedSize(true);
                GridLayoutManager llm = new GridLayoutManager(getActivity(), 3);
                cardList.setLayoutManager(llm);
                adapter = new EventsAdapter();
                cardList.setAdapter(adapter);
            }
        });
    

    Why?

    question 
    opened by crysan 8
  • Bug When I pop backstack

    Bug When I pop backstack

    When I pop backstack of fragments and smarttablayout in this fragment then I try to open this fragment again smart tab layout is not reset to first and not clear cache . I want to clear cache of smart tab layout, How I do ?

    Thank you so much and sorry for bad english.

    invalid 
    opened by kazixma 7
  • Problems with tabs in fragment

    Problems with tabs in fragment

    I have a navigation drawer, that has few items(that replace previous fragment). My MainActivity creates a fragment that has Sliding Tabs at start. I implement them this way:

      @Override
       public void onAttach(Activity activity) {
          myContext = (FragmentActivity) activity;
          super.onAttach(activity);
        }
    
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_blank, container, false);
        FragmentManager fragManager = myContext.getSupportFragmentManager();
        adapter = new FragmentPagerItemAdapter(
                fragManager, FragmentPagerItems.with(getActivity())
                .add("Каталог", Catalog.class)
                .add("Проекты", Projects.class)
                .create());
    
        ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        viewPager.setAdapter(adapter);
    
        SmartTabLayout viewPagerTab = (SmartTabLayout) view.findViewById(R.id.viewpagertab);
        viewPagerTab.setViewPager(viewPager);
        return view;
    }
    

    So after start in works super, but after working with items of Navigation Drawer, SlidingTabBar shows nothing, swipes becomes "flowing"...

    I suppose, that my problem appears because of using v4, instead of v13. So I wanna ask you to share a piece of code, where you implement SlidingTabBar in fragment (author gives example of v.4).

    question 
    opened by burnix 6
  • Multiple dex files define Lcom/ogaclejapan/smarttablayout/utils/BuildConfig

    Multiple dex files define Lcom/ogaclejapan/smarttablayout/utils/BuildConfig

    Hi,

    i'm using the gradle tool 1.4.0 and when i'm trying to use your library i'm getting the following error message:

    :app:transformClassesAndResourcesWithExtractJarsForDebug UP-TO-DATE
    
    UNEXPECTED TOP-LEVEL EXCEPTION:
    com.android.dex.DexException: Multiple dex files define Lcom/ogaclejapan/smarttablayout/utils/BuildConfig;
        at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
        at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554)
        at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535)
        at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
        at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
        at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:502)
        at com.android.dx.command.dexer.Main.runMonoDex(Main.java:334)
        at com.android.dx.command.dexer.Main.run(Main.java:277)
        at com.android.dx.command.dexer.Main.main(Main.java:245)
        at com.android.dx.command.Main.main(Main.java:106)
    
    
    :app:transformClassesWithDexForDebug FAILED
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':app:transformClassesWithDexForDebug'.
    > com.android.build.transform.api.TransformException: com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/Library/Java/JavaVirtualMachines/jdk1.8.0_31.jdk/Contents/Home/bin/java'' finished with non-zero exit value 2
    

    Does anybody know how to solve this?

    opened by T0bbes 6
  • tabView.getLayoutParams() is null

    tabView.getLayoutParams() is null

    if (distributeEvenly) { LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams(); lp.width = 0; lp.weight = 1; }

      if (internalTabClickListener != null) {
        tabView.setOnClickListener(internalTabClickListener);
      }
    
      tabStrip.addView(tabView);
    

    when "distributeEvenly" is true,"tabView.getLayoutParams()" get null,the answer is before "tabView.getLayoutParams()",you should set " tabStrip.addView(tabView);"

    opened by luyuan11233 5
  • Troubles with positioning on MIUI

    Troubles with positioning on MIUI

    I use this lib in my project to display custom tabs. All is ok with stock Android (screenshot). But on MIUI active tab indicator moves out of the bottom of the screen (screenshot). My layout looks like this:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.HostActivity">
    
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/pagerTabLayout" />
    
    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@id/pagerTabLayout"
        style="@style/BottomNavigationTabs"
        android:layout_alignParentBottom="true" />
    </RelativeLayout>
    

    Tabs style is here:

    <style name="BottomNavigationTabs">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/main_tab_height</item>
        <item name="android:background">@color/colorBottomNavigation</item>
        <item name="stl_indicatorWidth">@dimen/main_tabs_indicator_width</item>
        <item name="stl_indicatorThickness">@dimen/main_tabs_indicator_height</item>
        <item name="stl_indicatorInterpolation">linear</item>
        <item name="stl_indicatorColor">@color/colorBottomNavigationIndicator</item>
        <item name="stl_drawDecorationAfterTab">true</item>
        <item name="stl_dividerThickness">@dimen/zero_size</item>
        <item name="stl_distributeEvenly">true</item>
    </style>
    

    So, I assume that it could be a bug in MIUI, but... It's android and it's life:) I must support it and deal with this. So, I think the lib have to support MIUI.

    opened by Bringoff 5
  • Support for RTL locales

    Support for RTL locales

    Right now adding android:supportsRtl="true" to the manifest causes STL to behave weirdly. Tab indicator orders and viewpager order is reversed but scroll gesture direction is not.

    Manifest

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.mapck" >
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/LightTheme"
            android:supportsRtl="true" >
        .......
    

    STL setup

        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(null);
        SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
        setupTabs(viewPagerTab);
        FragmentPagerItems pages = new FragmentPagerItems(this);
        pages.add("a" A.class));
        pages.add("b", B.class));
        pages.add("c", C.class));
        pages.add("d", D.class));
        FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(getSupportFragmentManager(),
                pages);
        viewPager.addOnPageChangeListener(this);
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(2);
        viewPagerTab.setViewPager(viewPager);
    

    setUpTabs

    private void setupTabs(SmartTabLayout layout) {
        final LayoutInflater inflater = LayoutInflater.from(layout.getContext());
    
        layout.setCustomTabView(new SmartTabLayout.TabProvider() {
            @Override
            public View createTabView(ViewGroup container, int position, PagerAdapter adapter) {
                ImageView icon = (ImageView) inflater.inflate(R.layout.custom_tab_icon, container, false);
                switch (position) {
                    case 0:
                        icon.setImageResource(R.drawable.a);
                    case 1:
                        icon.setImageResource(R.drawable.b);
                    case 2:
                        icon.setImageResource(R.drawable.c);
                    case 3:
                        icon.setImageResource(R.drawable.d);
                        break;
                    default:
                        throw new IllegalStateException("Invalid position: " + position);
                }
                return icon;
            }
        });
    }
    
    bug 
    opened by royale1223 5
  • java.lang.IllegalStateException:  Fragment already added

    java.lang.IllegalStateException: Fragment already added

    Hi,

    I got this error when I tapped the 5th tab as soon as the UI rendered:

    E/AndroidRuntime(28502): java.lang.IllegalStateException: Fragment already added: GenericProductListFragment{3147a7ad #2 id=0x7f0d026f}
    E/AndroidRuntime(28502):    at android.support.v4.app.FragmentManagerImpl.addFragment(FragmentManager.java:1209)
    E/AndroidRuntime(28502):    at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:674)
    E/AndroidRuntime(28502):    at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1501)
    E/AndroidRuntime(28502):    at android.support.v4.app.FragmentManagerImpl.executePendingTransactions(FragmentManager.java:490)
    E/AndroidRuntime(28502):    at android.support.v4.app.FragmentStatePagerAdapter.finishUpdate(FragmentStatePagerAdapter.java:163)
    E/AndroidRuntime(28502):    at android.support.v4.view.ViewPager.populate(ViewPager.java:1072)
    E/AndroidRuntime(28502):    at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:554)
    E/AndroidRuntime(28502):    at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:513)
    E/AndroidRuntime(28502):    at android.support.v4.view.ViewPager.setCurrentItem(ViewPager.java:494)
    E/AndroidRuntime(28502):    at com.ogaclejapan.smarttablayout.SmartTabLayout$TabClickListener.onClick(SmartTabLayout.java:474)
    E/AndroidRuntime(28502):    at android.view.View.performClick(View.java:4780)
    E/AndroidRuntime(28502):    at android.view.View$PerformClick.run(View.java:19866)
    E/AndroidRuntime(28502):    at android.os.Handler.handleCallback(Handler.java:739)
    E/AndroidRuntime(28502):    at android.os.Handler.dispatchMessage(Handler.java:95)
    E/AndroidRuntime(28502):    at android.os.Looper.loop(Looper.java:135)
    E/AndroidRuntime(28502):    at android.app.ActivityThread.main(ActivityThread.java:5254)
    E/AndroidRuntime(28502):    at java.lang.reflect.Method.invoke(Native Method)
    E/AndroidRuntime(28502):    at java.lang.reflect.Method.invoke(Method.java:372)
    E/AndroidRuntime(28502):    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
    E/AndroidRuntime(28502):    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)
    

    Thanks, Siddharth

    opened by siddharth96 5
  • Don't understand how to attach fragment to activity

    Don't understand how to attach fragment to activity

    I am using this in my activity but activity only shows the tabs but no fragment content...

    Activity Class:

    public class ActivityUserProfile extends ActionBarActivity{
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_user_profile);
    
            FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
                    getSupportFragmentManager(), FragmentPagerItems.with(ActivityUserProfile.this)
                    .add(R.string.title_basic, FragmentProfileBasic.class)
                    .create());
    
            ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
            viewPager.setAdapter(adapter);
    
            SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
            viewPagerTab.setViewPager(viewPager);
        }
    }
    

    Fragment Class:

    public class FragmentProfileBasic extends Fragment {
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_profile_basic, container, false);
            return rootView;
        }
    }
    
    question 
    opened by ghost 5
  • Adapt my code to your library

    Adapt my code to your library

    @Override
          public Fragment getItem(int position) {
                switch (position % 5) {
                    case 0:
                        Intent myIntent = getActivity().getIntent();
                        Bundle bundle = myIntent.getExtras();
                        myIntent.putExtra("id", position);
                        Frag1 frag1 = new Frag1().newInstance();
                        frag1.setArguments(bundle);
                        return frag1;
                    case 1:
                        Intent myIntent1 = getActivity().getIntent();
                        Bundle bundle1 = myIntent1.getExtras();
                        myIntent1.putExtra("id", position);
                        Frag2 frag2 = new Frag2().newInstance();
                        frag2.setArguments(bundle1);
                        return frag2;
                        ...
    

    How can I adapt the above code so it will work with your library?

    FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
                getFragmentManager(), FragmentPagerItems.with(getActivity())
                .add("First tab", Frag1.class) 
                .add("Second tab", Frag2.class)
                .create());
    

    Thanks a lot for this library!

    question 
    opened by AlexandruDev 4
  • How Do I disable scrolling right and left.

    How Do I disable scrolling right and left.

    I asked my developer to turn the text tabs into icons, which he did. But there seems to be this issue when icons slightly move left and right. How do I make these icons to be fixed and not move while I am navigating through the tabs. Thank you! :)

    opened by Gradeslid 0
  • Only works for 2 tabs. the 3rd tab does not render content

    Only works for 2 tabs. the 3rd tab does not render content

    the 3rd tab is empty. Content does not render. Only showed up after onPause() (for example when a dialog activity shows up on top of the current activity).

    opened by muradmohdzain 1
  • Nested Tabs

    Nested Tabs

    Hello try to create double layer tabs. Each tab of the first layer should contain new tabs. Started with the icon/text example and create the first tab layer in Activtiy like in the example. In the first Fragment .inflate() a new layout in onCreate(), same as the acitvity_demo but without the toolbar and

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    
        <LinearLayout
            android:id="@+id/header2"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primary"
            >
    
            <FrameLayout
                android:id="@id/tab2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                />
    
        </LinearLayout>
    
        <androidx.viewpager.widget.ViewPager
            android:id="@id/viewpager2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/header2"
            />
    
    </RelativeLayout>
    

    In the first Fragment set the ViewPager like in the example but to my nested layout

    Demo demo = getDemo();
                ViewGroup tab = (ViewGroup) view.findViewById(R.id.tab2);
                tab.addView(LayoutInflater.from(getActivity()).inflate(demo.layoutResId, tab, false));
    
                ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager2);
                SmartTabLayout viewPagerTab = (SmartTabLayout) view.findViewById(R.id.viewpagertab);
                demo.setup(viewPagerTab);
    
                CharSequence[] tabs = {"Effects", "Transform"};
                FragmentPagerItems pages = new FragmentPagerItems(getActivity());
                for (int i=0; i<tabs.length; i++) {
                    pages.add(FragmentPagerItem.of(tabs[i], RemoteNestedFragment.class));
                }
    
                FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
                        getActivity().getSupportFragmentManager(), pages);
    
                viewPager.setAdapter(adapter);
                viewPagerTab.setViewPager(viewPager);
    

    Finally i want to create a ListView

    lView = (ListView) view.findViewById(R.id.androidList);
                lAdapter = new ListAdapter(getActivity(), version, versionNumber, images);
                lView.setAdapter(lAdapter);
                lView.setOnItemClickListener(this);
    

    Without the second tab layer it works great, but with the second one the ListView doesn´t appear, What i am doing wrong? Or is it impossible with multilayer tabs?

    Thanks, cheers

    opened by gsus24 0
  • Changing stl_defaultTabTextSize programmatically

    Changing stl_defaultTabTextSize programmatically

    Hi! First of all, thanks for the library.

    This smartab is working fine for me, but, if the width size of the device is small, the title size doesn't fit in the screen and this problem happens: https://i.imgur.com/xDESCPM.gif

    As you can see, both tabs don't fit entirely on the screen. I can solve this problem if I change stl_defaultTabTextSize to 16sp. However, 16sp is not the desired size and it's too small for tablets and big phones.

    In a bigger device, both tabs keep completely on the screen while switching them.

    So I have a question: how can I change stl_defaultTabTextSize programmatically? This way I can set size according to the screen width. Is there another way to solve this problem? Thanks!

    opened by danielandrioli 0
Owner
ogaclejapan
ogaclejapan
:octocat: AdaptiveController is a 'Progressive Reduction' Swift UI module for adding custom states to Native or Custom iOS UI elements. Swift UI component by @Ramotion

ADAPTIVE TAB BAR 'Progressive Reduction' module for adding custom states to Native or Custom UI elements. We specialize in the designing and coding of

Ramotion 2k Nov 9, 2022
This is a Review posting app that let user find interesting places near them

ColorMatchTabs Inspired by this project on Dribbble Also, read how it was done in our blog Installation CocoaPods pod 'ColorMatchTabs' Carthage github

Yalantis 1.4k Dec 5, 2022
ESTabBarController is a highly customizable TabBarController component, which is inherited from UITabBarController.

ESTabBarController is a highly customizable TabBarController component, which is inherited from UITabBarController. Why? In real-world developmen

Vincent Li 4.9k Jan 5, 2023
Different Styles of Custom Tab Bar

LightCardTabBar An expiremental project exploring different types of custom-tabbar styles, screenshots as below. Screenshots Implementation The implem

Hussein Ryalat 31 Dec 23, 2022
Custom segmented picker for SwiftUI

Custom segmented picker for SwiftUI

Sergey Kazakov 34 Dec 27, 2022
A prototype of custom tab bar using SwiftUI with techniques of mask + matchedGeometryEffect

SliderTabBar A prototype of custom tab bar using SwiftUI with techniques of mask

Ka Kui 1 Dec 24, 2021
A custom tab bar controller for iOS.

ESTabBarController ESTabBarController is a custom tab bar controller for iOS. It has a tab indicator that moves animated along the bar when switching

null 122 Oct 6, 2022
A custom tab bar controller for iOS written in Swift 4.2

A custom tab bar controller for iOS written in Swift 4.0 Screenshots Installation Cocoa Pods: pod 'AZTabBar' Swift Package Manager: You can use The Sw

Antonio Zaitoun 335 Dec 11, 2022
CustomUI in SwiftUI - Full Native Custom SwiftUI NavBar, TabBar, SearchBar, Dark mode, a little bit animations

CustomUI_in_SwiftUI Full Native Custom SwiftUI NavBar, TabBar, SearchBar, Dark m

Alexander Ryakhin 1 Jun 5, 2022
CustomTabBar - A Custom TabBar Built Using Swift

CustomTabBar Thanks to Riccardo Cipolleschi for his awesome tutorial. The TabBar

SM Arif Ahmed 1 Feb 14, 2022
🐛 WormTabStrip ViewPager for iOS written in Swift, which gives continuous feedback to the user when scrolling

Worm Tab Strip Worm Tab Strip is inspired by android SmartTabStrip, android view pager like library for iOS written in swift. Basically it was build u

EzimetYusup 176 Dec 13, 2022
Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.

FloatLabelFields Overview Installation Via Interface Builder Via Code Credits Additional References Questions Overview FloatLabelFields is the Swift i

Fahim Farook 1.2k Jan 4, 2023
Infinite paging controller, scrolling through contents and title bar scrolls with a delay

PageController PageController is infinite paging controller, scrolling through contents and title bar scrolls with a delay. Then it provide user inter

Hirohisa Kawasaki 408 Nov 28, 2022
Infinite paging controller, scrolling through contents and title bar scrolls with a delay

PageController PageController is infinite paging controller, scrolling through contents and title bar scrolls with a delay. Then it provide user inter

Hirohisa Kawasaki 408 Nov 28, 2022
The elegant yet functional dropdown menu, written in Swift, appears underneath the navigation bar to display a list of defined items when a user clicks on the navigation title.

Introduction The elegant yet functional dropdown menu, written in Swift, appears underneath the navigation bar to display a list of defined items when

Tho Pham 2.7k Dec 28, 2022
Timetinerary is an iOS app that allows you to create, save, and share continuous schedules.

Timetinerary is an iOS app that allows you to create, save, and share continuous schedules. These schedules can be converted into a widget and notifications.

Ben Koppe 1 Feb 14, 2022
❤️ Continuous heart rate measurement during workouts with watchOS 3.

Heart Control Monitor your heart rate on the apple watch - continuously and easy. What is it? Heart Control is a standalone watch app to monitor conti

Thomas Paul Mann 189 Dec 16, 2022
An App that gives a nice interface where the user can type in their start location and destination

SixtCarSummoner What it does We developed an App that gives a nice interface where the user can type in their start location and destination. The user

Dominik Schiwietz 1 Nov 21, 2021
Pendo captures product usage data, gathers user feedback, and lets you communicate in-app to onboard, educate, and guide users to value

Pendo SDK for IOS The Pendo Mobile SDK is a code-less, retro-active analytics collector across all of your app's versions. The SDK also allows present

Pendo 30 Jan 4, 2023
BMI-Calculator - An app which calculates the BMI and gives suggestion

BMI-Calculator An app which calculates the BMI and gives suggestion with MVC pat

null 0 Jan 19, 2022