Tuesday, March 28, 2017

Custom Smart Tab Indicator Thickness in android








In this example, you can create custom tab with animation in android

Please put following two libraries in build.gradle in app folder


dependencies {
compile fileTree(
include: ['*.jar'], dir: 'libs')
testCompile
'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.4.0' compile 'com.ogaclejapan.smarttablayout:library:1.6.1@aar' compile 'com.ogaclejapan.smarttablayout:utils-v4:1.6.1@aar'
}

and make class name as SmartTab Activity Class

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import com.ogaclejapan.smarttablayout.SmartTabLayout;

import java.util.ArrayList;
import java.util.List;


public class SmartTab  extends ActionBarActivity {

    Toolbar toolbar;
    ViewPager viewPager;
    SmartTabLayout tabLayout;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.contact_detail);


        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getSupportActionBar().getThemedContext();
        toolbar.setTitleTextColor(0xFFFFFFFF);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (SmartTabLayout) findViewById(R.id.viewpagertab);
        setupViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OneFragment(), "One");
        adapter.addFrag(new TwoFragment(), "Two");
        adapter.addFrag(new ThreeFragment(), "Three");
        adapter.addFrag(new FrourFragment(), "Four");
        viewPager.setAdapter(adapter);
        tabLayout.setViewPager(viewPager);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

    @Override
    public boolean onSupportNavigateUp() {
        onBackPressed();
        return true;
    }
}

smartTab layout

<android.support.design.widget.CoordinatorLayout 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">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:background="@android:color/holo_blue_dark"
            android:theme="@style/AppTheme.PopupOverlay" />

        <!--  <android.support.design.widget.TabLayout
              android:id="@+id/tabs"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              app:tabMode="scrollable"
              android:layout_gravity="center_horizontal"
              />-->

        <com.ogaclejapan.smarttablayout.SmartTabLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/viewpagertab"
            android:background="@android:color/holo_blue_dark"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:clipToPadding="false"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            app:stl_defaultTabTextColor="@android:color/white"
            app:stl_defaultTabTextHorizontalPadding="18dp"
            app:stl_dividerColor="@android:color/transparent"
            app:stl_dividerThickness="0dp"
            app:stl_indicatorColor="@android:color/holo_blue_light"
            app:stl_indicatorCornerRadius="18dp"
            app:stl_indicatorGravity="center"
            app:stl_indicatorInterpolation="smart"
            app:stl_indicatorThickness="36dp"
            app:stl_underlineColor="@android:color/transparent"
            app:stl_underlineThickness="0dp"
            />


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

</android.support.design.widget.CoordinatorLayout>

1 comment: