DOCSEARCHbyAlgolia
Submit Docs

MagicIndicator Documentation

repository·main·Indexed 27 days ago

https://github.com/hackware1993/magicindicator

A customizable and extensible ViewPager indicator framework for Android, serving as a high-performance alternative to TabLayout and PagerSlidingTabStrip. It supports integration with ViewPager via ViewPagerHelper and fragment containers via FragmentContainerHelper, and allows for custom tab and indicator designs through the IPagerTitleView and IPagerIndicator interfaces.

Tokens
1.5K
Snippets
4
Records
5
Agent score
45%

What's inside MagicIndicator

  1. Integrate MagicIndicator with ViewPager

    main

    To use MagicIndicator with a ViewPager, follow these steps:

    1. Add to Layout XML: Include the net.lucode.hackware.magicindicator.MagicIndicator view and a ViewPager in your layout.
    2. Initialize Navigator: In your Activity/Fragment, create a CommonNavigator and set a CommonNavigatorAdapter. The adapter requires you to implement getCount(), getTitleView(), and getIndicator().
    3. Bind to ViewPager: Use ViewPagerHelper.bind(magicIndicator, mViewPager) to link the indicator to your ViewPager.
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="net.lucode.hackware.magicindicatordemo.MainActivity">

    <net.lucode.hackware.magicindicator.MagicIndicator
        android:id="@+id/magic_indicator"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

  2. Install MagicIndicator

    main

    You can integrate MagicIndicator into your Android project using either a local module dependency or via JitPack.

    Option 1: Local Module If you have checked out the source code, add the module directly:

    implementation project(':magicindicator')

    Option 2: JitPack (Recommended) Add the JitPack repository to your repositories block and then add the dependency. Choose the version based on whether you are using the Android Support Library or AndroidX.

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

dependencies {
    ...
    implementation 'com.github.hackware1993:MagicIndicator:1.6.0' // for support lib
    implementation 'com.github.hackware1993:MagicIndicator:1.7.0' // for androidx
}

  3. Integrate MagicIndicator with Fragment Container

    main

    If you are switching fragments using hide() and show() instead of a ViewPager, use FragmentContainerHelper to manage the indicator state.

    When a fragment switch occurs, call handlePageSelected(pageIndex) to update the indicator.

  4. Extend IPagerIndicator to customize indicators

    main

    To create a custom indicator (e.g., dots, lines, or custom shapes), implement the IPagerIndicator interface. You will receive callbacks for page selection, scrolling, and state changes.

    public class MyPagerIndicator extends View implements IPagerIndicator {

    public MyPagerIndicator(Context context) {
        super(context);
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    @Override
    public void onPositionDataProvide(List<PositionData> dataList) {
    }
}

  5. Extend IPagerTitleView to customize tabs

    main

    To create a custom tab appearance, implement the IPagerTitleView interface in your custom View. This allows you to control how the tab behaves during transitions (entering, leaving, selecting, and deselecting).

    public class MyPagerTitleView extends View implements IPagerTitleView {

    public MyPagerTitleView(Context context) {
        super(context);
    }

    @Override
    public void onLeave(int index, int totalCount, float leavePercent, boolean leftToRight) {
    }

    @Override
    public void onEnter(int index, int totalCount, float enterPercent, boolean leftToRight) {
    }

    @Override
    public void onSelected(int index, int totalCount) {
    }

    @Override
    public void onDeselected(int index, int totalCount) {
    }
}