├── .gitignore ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── indicator │ │ └── ApplicationTest.java │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── indicator │ │ │ ├── MainActivity.java │ │ │ └── ShapeIndicatorView.java │ └── res │ │ ├── layout │ │ ├── activity_main.xml │ │ └── fragment_main.xml │ │ ├── menu │ │ └── menu_main.xml │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxxhdpi │ │ └── ic_launcher.png │ │ ├── values-v21 │ │ └── styles.xml │ │ ├── values-w820dp │ │ └── dimens.xml │ │ └── values │ │ ├── attrs.xml │ │ ├── colors.xml │ │ ├── dimens.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── com │ └── indicator │ └── ExampleUnitTest.java ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | *.iml 3 | .gradle 4 | /local.properties 5 | /.idea/workspace.xml 6 | /.idea/libraries 7 | .DS_Store 8 | /build 9 | /captures 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tablayoutindicator 2 | TabLayout indicator 3 | 4 | ![img](http://images2015.cnblogs.com/blog/585087/201512/585087-20151219155610584-2107679775.gif) 5 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 23 5 | buildToolsVersion "23.0.1" 6 | 7 | defaultConfig { 8 | applicationId "com.indicator" 9 | minSdkVersion 15 10 | targetSdkVersion 23 11 | versionCode 1 12 | versionName "1.0" 13 | } 14 | buildTypes { 15 | release { 16 | minifyEnabled false 17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 18 | } 19 | } 20 | } 21 | 22 | dependencies { 23 | compile fileTree(dir: 'libs', include: ['*.jar']) 24 | testCompile 'junit:junit:4.12' 25 | compile 'com.android.support:appcompat-v7:23.1.1' 26 | compile 'com.android.support:design:23.1.1' 27 | } 28 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /home/yjwfn/development/android-sdk-linux/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /app/src/androidTest/java/com/indicator/ApplicationTest.java: -------------------------------------------------------------------------------- 1 | package com.indicator; 2 | 3 | import android.app.Application; 4 | import android.test.ApplicationTestCase; 5 | 6 | /** 7 | * Testing Fundamentals 8 | */ 9 | public class ApplicationTest extends ApplicationTestCase { 10 | public ApplicationTest() { 11 | super(Application.class); 12 | } 13 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /app/src/main/java/com/indicator/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.indicator; 2 | 3 | import android.support.design.widget.FloatingActionButton; 4 | import android.support.design.widget.Snackbar; 5 | import android.support.design.widget.TabLayout; 6 | import android.support.v7.app.AppCompatActivity; 7 | import android.support.v7.widget.Toolbar; 8 | 9 | import android.support.v4.app.Fragment; 10 | import android.support.v4.app.FragmentManager; 11 | import android.support.v4.app.FragmentPagerAdapter; 12 | import android.support.v4.view.ViewPager; 13 | import android.os.Bundle; 14 | import android.view.LayoutInflater; 15 | import android.view.Menu; 16 | import android.view.MenuItem; 17 | import android.view.View; 18 | import android.view.ViewGroup; 19 | 20 | import android.widget.TextView; 21 | 22 | public class MainActivity extends AppCompatActivity { 23 | 24 | /** 25 | * The {@link android.support.v4.view.PagerAdapter} that will provide 26 | * fragments for each of the sections. We use a 27 | * {@link FragmentPagerAdapter} derivative, which will keep every 28 | * loaded fragment in memory. If this becomes too memory intensive, it 29 | * may be best to switch to a 30 | * {@link android.support.v4.app.FragmentStatePagerAdapter}. 31 | */ 32 | private SectionsPagerAdapter mSectionsPagerAdapter; 33 | 34 | /** 35 | * The {@link ViewPager} that will host the section contents. 36 | */ 37 | private ViewPager mViewPager; 38 | 39 | @Override 40 | protected void onCreate(Bundle savedInstanceState) { 41 | super.onCreate(savedInstanceState); 42 | setContentView(R.layout.activity_main); 43 | 44 | Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 45 | setSupportActionBar(toolbar); 46 | // Create the adapter that will return a fragment for each of the three 47 | // primary sections of the activity. 48 | mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); 49 | 50 | // Set up the ViewPager with the sections adapter. 51 | mViewPager = (ViewPager) findViewById(R.id.container); 52 | mViewPager.setAdapter(mSectionsPagerAdapter); 53 | 54 | TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 55 | ShapeIndicatorView shapeIndicatorView = (ShapeIndicatorView) findViewById(R.id.custom_indicator); 56 | 57 | tabLayout.setTabsFromPagerAdapter(mViewPager.getAdapter()); 58 | tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 59 | 60 | shapeIndicatorView.setupWithTabLayout(tabLayout); 61 | shapeIndicatorView.setupWithViewPager(mViewPager); 62 | } 63 | 64 | 65 | @Override 66 | public boolean onCreateOptionsMenu(Menu menu) { 67 | // Inflate the menu; this adds items to the action bar if it is present. 68 | getMenuInflater().inflate(R.menu.menu_main, menu); 69 | return true; 70 | } 71 | 72 | @Override 73 | public boolean onOptionsItemSelected(MenuItem item) { 74 | // Handle action bar item clicks here. The action bar will 75 | // automatically handle clicks on the Home/Up button, so long 76 | // as you specify a parent activity in AndroidManifest.xml. 77 | int id = item.getItemId(); 78 | 79 | //noinspection SimplifiableIfStatement 80 | if (id == R.id.action_settings) { 81 | return true; 82 | } 83 | 84 | return super.onOptionsItemSelected(item); 85 | } 86 | 87 | /** 88 | * A placeholder fragment containing a simple view. 89 | */ 90 | public static class PlaceholderFragment extends Fragment { 91 | /** 92 | * The fragment argument representing the section number for this 93 | * fragment. 94 | */ 95 | private static final String ARG_SECTION_NUMBER = "section_number"; 96 | 97 | public PlaceholderFragment() { 98 | } 99 | 100 | /** 101 | * Returns a new instance of this fragment for the given section 102 | * number. 103 | */ 104 | public static PlaceholderFragment newInstance(int sectionNumber) { 105 | PlaceholderFragment fragment = new PlaceholderFragment(); 106 | Bundle args = new Bundle(); 107 | args.putInt(ARG_SECTION_NUMBER, sectionNumber); 108 | fragment.setArguments(args); 109 | return fragment; 110 | } 111 | 112 | @Override 113 | public View onCreateView(LayoutInflater inflater, ViewGroup container, 114 | Bundle savedInstanceState) { 115 | View rootView = inflater.inflate(R.layout.fragment_main, container, false); 116 | TextView textView = (TextView) rootView.findViewById(R.id.section_label); 117 | textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER))); 118 | return rootView; 119 | } 120 | } 121 | 122 | /** 123 | * A {@link FragmentPagerAdapter} that returns a fragment corresponding to 124 | * one of the sections/tabs/pages. 125 | */ 126 | public class SectionsPagerAdapter extends FragmentPagerAdapter { 127 | 128 | public SectionsPagerAdapter(FragmentManager fm) { 129 | super(fm); 130 | } 131 | 132 | @Override 133 | public Fragment getItem(int position) { 134 | // getItem is called to instantiate the fragment for the given page. 135 | // Return a PlaceholderFragment (defined as a static inner class below). 136 | return PlaceholderFragment.newInstance(position + 1); 137 | } 138 | 139 | @Override 140 | public int getCount() { 141 | // Show 3 total pages. 142 | return 7; 143 | } 144 | 145 | @Override 146 | public CharSequence getPageTitle(int position) { 147 | 148 | return "SECTION " + position; 149 | } 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /app/src/main/java/com/indicator/ShapeIndicatorView.java: -------------------------------------------------------------------------------- 1 | package com.indicator; 2 | 3 | import android.annotation.TargetApi; 4 | import android.content.Context; 5 | import android.content.res.TypedArray; 6 | import android.graphics.Canvas; 7 | import android.graphics.Color; 8 | import android.graphics.CornerPathEffect; 9 | import android.graphics.Paint; 10 | import android.graphics.Path; 11 | import android.graphics.Rect; 12 | import android.graphics.RectF; 13 | import android.os.Build; 14 | import android.support.design.widget.TabLayout; 15 | import android.support.v4.view.ViewCompat; 16 | import android.support.v4.view.ViewPager; 17 | import android.util.AttributeSet; 18 | import android.util.Log; 19 | import android.view.View; 20 | import android.view.ViewGroup; 21 | import android.view.ViewTreeObserver; 22 | 23 | 24 | /** 25 | * Created by yjwfn on 15-12-16. 26 | */ 27 | public class ShapeIndicatorView extends View implements TabLayout.OnTabSelectedListener, ViewPager.OnPageChangeListener{ 28 | 29 | private Paint mShapePaint; 30 | private Path mShapePath; 31 | private int mShapeHorizontalSpace; 32 | private int mShapeColor = Color.GREEN; 33 | 34 | private TabLayout mTabLayout; 35 | private ViewPager mViewPager; 36 | 37 | 38 | 39 | public ShapeIndicatorView(Context context) { 40 | this(context, null); 41 | } 42 | 43 | public ShapeIndicatorView(Context context, AttributeSet attrs) { 44 | this(context, attrs, 0); 45 | } 46 | 47 | public ShapeIndicatorView(Context context, AttributeSet attrs, int defStyleAttr) { 48 | super(context, attrs, defStyleAttr); 49 | initViews(context, attrs, defStyleAttr, 0); 50 | } 51 | 52 | 53 | @TargetApi(Build.VERSION_CODES.LOLLIPOP) 54 | public ShapeIndicatorView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 55 | super(context, attrs, defStyleAttr, defStyleRes); 56 | initViews(context, attrs, defStyleAttr, defStyleRes); 57 | } 58 | 59 | private void initViews(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes){ 60 | 61 | TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ShapeIndicatorView ,defStyleRes, 0); 62 | mShapeHorizontalSpace = array.getInteger(R.styleable.ShapeIndicatorView_horizontalSpace, 15); 63 | mShapeColor = array.getColor(R.styleable.ShapeIndicatorView_fullColor, Color.GREEN); 64 | int radius = array.getInteger(R.styleable.ShapeIndicatorView_radius, 50); 65 | array.recycle(); 66 | 67 | mShapePaint = new Paint(); 68 | mShapePaint.setAntiAlias(true); 69 | mShapePaint.setDither(true); 70 | mShapePaint.setColor(mShapeColor); 71 | mShapePaint.setStyle(Paint.Style.FILL); 72 | mShapePaint.setPathEffect(new CornerPathEffect(radius)); 73 | mShapePaint.setStrokeCap(Paint.Cap.ROUND); 74 | 75 | } 76 | 77 | 78 | public void setupWithTabLayout(final TabLayout tableLayout){ 79 | mTabLayout = tableLayout; 80 | 81 | 82 | 83 | tableLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT); 84 | tableLayout.setOnTabSelectedListener(this); 85 | 86 | 87 | 88 | tableLayout.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { 89 | @Override 90 | public void onScrollChanged() { 91 | if (mTabLayout.getScrollX() != getScrollX()) 92 | scrollTo(mTabLayout.getScrollX(), mTabLayout.getScrollY()); 93 | } 94 | }); 95 | 96 | ViewCompat.setElevation(this, ViewCompat.getElevation(mTabLayout)); 97 | tableLayout.post(new Runnable() { 98 | @Override 99 | public void run() { 100 | if (mTabLayout.getTabCount() > 0) 101 | onTabSelected(mTabLayout.getTabAt(0)); 102 | 103 | } 104 | }); 105 | 106 | //清除Tab background 107 | for(int tab = 0; tab < tableLayout.getTabCount() ; tab++){ 108 | View tabView = getTabViewByPosition(tab); 109 | tabView.setBackgroundResource(0); 110 | } 111 | } 112 | 113 | public void setupWithViewPager(ViewPager viewPager){ 114 | mViewPager = viewPager; 115 | viewPager.addOnPageChangeListener(this); 116 | } 117 | 118 | 119 | @Override 120 | protected void onDraw(Canvas canvas) { 121 | super.onDraw(canvas); 122 | 123 | drawPath(canvas); 124 | } 125 | 126 | private void drawPath(Canvas canvas) { 127 | if(mShapePath == null || mShapePath.isEmpty()) 128 | return; 129 | 130 | int savePos = canvas.save(); 131 | canvas.drawPath(mShapePath, mShapePaint); 132 | canvas.restoreToCount(savePos); 133 | } 134 | 135 | private Path generatePath(int position, float positionOffset){ 136 | 137 | RectF range = new RectF(); 138 | View tabView = getTabViewByPosition(position); 139 | 140 | if(tabView == null) 141 | return null; 142 | 143 | int left, top, right, bottom; 144 | left = top = right = bottom = 0; 145 | 146 | if(positionOffset > 0.f && position < mTabLayout.getTabCount() - 1){ 147 | View nextTabView = getTabViewByPosition(position + 1); 148 | left += (int) ( nextTabView.getLeft() * positionOffset + tabView.getLeft() * (1.f - positionOffset) ); 149 | right += (int) ( nextTabView.getRight() * positionOffset + tabView.getRight() * (1.f - positionOffset) ); 150 | 151 | 152 | left += mShapeHorizontalSpace; 153 | right -= mShapeHorizontalSpace; 154 | top = tabView.getTop() + getPaddingTop(); 155 | bottom = tabView.getBottom() - getPaddingBottom(); 156 | range.set(left, top, right, bottom); 157 | } else { 158 | 159 | left = tabView.getLeft() + mShapeHorizontalSpace; 160 | right = tabView.getRight() - mShapeHorizontalSpace; 161 | top = tabView.getTop() + getPaddingTop() ; 162 | bottom = tabView.getBottom() - getPaddingBottom(); 163 | range.set(left, top, right, bottom); 164 | 165 | 166 | if(range.isEmpty()) 167 | return mShapePath; 168 | 169 | } 170 | 171 | if(mShapePath == null) 172 | mShapePath = new Path(); 173 | 174 | Rect tabsRect = getTabArea(); 175 | tabsRect.right += range.width(); 176 | tabsRect.left -= range.width(); 177 | 178 | mShapePath.reset(); 179 | mShapePath.moveTo(tabsRect.left, tabsRect.bottom); 180 | 181 | mShapePath.lineTo(range.left, range.bottom); 182 | mShapePath.lineTo(range.left, range.top); 183 | mShapePath.lineTo(range.right, range.top); 184 | mShapePath.lineTo(range.right, range.bottom); 185 | 186 | mShapePath.lineTo(tabsRect.right , tabsRect.bottom); 187 | mShapePath.lineTo(tabsRect.right, tabsRect.top); 188 | mShapePath.lineTo(tabsRect.left, tabsRect.top); 189 | mShapePath.close(); 190 | 191 | return mShapePath; 192 | } 193 | 194 | private Rect getTabArea(){ 195 | 196 | Rect rect = null; 197 | 198 | if(mTabLayout != null){ 199 | View view = mTabLayout.getChildAt(0); 200 | rect = new Rect(); 201 | view.getHitRect(rect); 202 | } 203 | 204 | return rect ; 205 | } 206 | 207 | private View getTabViewByPosition(int position){ 208 | if(mTabLayout != null && mTabLayout.getTabCount() > 0) { 209 | ViewGroup tabStrip = (ViewGroup) mTabLayout.getChildAt(0); 210 | return tabStrip != null ? tabStrip.getChildAt(position) : null; 211 | } 212 | 213 | return null; 214 | } 215 | 216 | 217 | 218 | @Override 219 | public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 220 | generatePath(position, positionOffset); 221 | invalidate(); 222 | } 223 | 224 | @Override 225 | public void onPageSelected(int position) { 226 | if(mTabLayout.getSelectedTabPosition() != position) 227 | mTabLayout.getTabAt(position).select(); 228 | 229 | } 230 | 231 | 232 | @Override 233 | public void onPageScrollStateChanged(int state) { 234 | 235 | } 236 | 237 | /** 238 | * 当已经有一个ViewPager后，当TabLayout的tab改变的时候在onTabSelected方法直接调用ViewPager的 239 | * setCurrentItem方法调用这个方法后会触发ViewPager的scroll事件也就是在onPageScrolled方法中调用 240 | * generatePath方法来更新Path，如果没有ViewPager的话直接在onTabSelected的方法中调用generatePath 241 | * 方法。 242 | **/ 243 | @Override 244 | public void onTabSelected(TabLayout.Tab tab) { 245 | if(mViewPager != null) { 246 | if (tab.getPosition() != mViewPager.getCurrentItem()) 247 | mViewPager.setCurrentItem(tab.getPosition()); 248 | }else{ 249 | generatePath(tab.getPosition(), 0); 250 | invalidate(); 251 | } 252 | } 253 | 254 | @Override 255 | public void onTabUnselected(TabLayout.Tab tab) { 256 | 257 | } 258 | 259 | @Override 260 | public void onTabReselected(TabLayout.Tab tab) { 261 | 262 | } 263 | } -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 17 | 18 | 25 | 26 | 27 | 28 | 31 | 32 | 39 | 40 | 41 | 45 | 46 | 47 | 48 | 49 | 50 | 55 | 56 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /app/src/main/res/layout/fragment_main.xml: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /app/src/main/res/menu/menu_main.xml: -------------------------------------------------------------------------------- 1 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yjwfn/TableLayoutIndicator/d22c2dc27e6ca1d7ce9d8ce94f7d36389ddf13ca/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yjwfn/TableLayoutIndicator/d22c2dc27e6ca1d7ce9d8ce94f7d36389ddf13ca/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yjwfn/TableLayoutIndicator/d22c2dc27e6ca1d7ce9d8ce94f7d36389ddf13ca/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yjwfn/TableLayoutIndicator/d22c2dc27e6ca1d7ce9d8ce94f7d36389ddf13ca/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yjwfn/TableLayoutIndicator/d22c2dc27e6ca1d7ce9d8ce94f7d36389ddf13ca/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/values-v21/styles.xml: -------------------------------------------------------------------------------- 1 | > 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /app/src/main/res/values-w820dp/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 64dp 6 | 7 | -------------------------------------------------------------------------------- /app/src/main/res/values/attrs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3F51B5 4 | #303F9F 5 | #FF4081 6 | 7 | -------------------------------------------------------------------------------- /app/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16dp 4 | 16dp 5 | 16dp 6 | 8dp 7 | 8 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | TabLayoutIndicator 3 | Settings 4 | Hello World from section: %1$d 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 15 | 16 |