Creating Tabs Android – Icon Tabs

Creating Tabs Android – Icon Tabs

1. Add to build.gradle (Module: app)

compile 'com.android.support:appcompat-v7:24.1.1'
compile 'com.android.support:design:24.1.1'
compile 'com.android.support:support-v4:24.1.1'

2. Fix activity_main.xml

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

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

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"/>
        </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>

</android.support.v4.widget.DrawerLayout>

3. Khai báo các biến toàn cục trong file MainActivity.java

//import các thư viện sau:
import android.support.v7.widget.Toolbar;

private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

4. Ánh xạ các biến toàn cục trong phương thức onCreate

toolbar = (Toolbar) findViewById(R.id.toolbar);
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tabs);

5. Gán các biến toàn cục vào tham số của các phương thức tương ứng trong hàm onCreate

setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Home");
tabLayout.setupWithViewPager(viewPager);

6. Tạo class ViewPagerAdapter trong file MainActivity.java

//import các thư viện sau:
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = 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) {
        mFragmentList.add(fragment);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return null;
    }

}

7. Tạo package fragment và tạo 2 Fragment nằm trong package này (HomeFragment.class và AboutFragment.class)

8. Tạo phương thức setupViewPaper trong file MainActivity.java

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFrag(new HomeFragment());
    adapter.addFrag(new AboutFragment());
    viewPager.setAdapter(adapter);

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            switch (position){
                case 0:
                    getSupportActionBar().setTitle("Home");
                    break;
                case 1:
                    getSupportActionBar().setTitle("About");
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

9. Gọi phương thức setupViewPaper trong phương thức onCreate

setupViewPager(viewPager);

10. Tạo phương thức setIconForTabs trong file MainActivity.java

private void setIconForTabs() {
    //Chèn Icon vào thư mục res/mipmap
    int[] tabIcons = {
            R.mipmap.ic_1,
            R.mipmap.ic_2,
    };

    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
}

11. Gọi phương thức setIconForTabs trong hàm onCreate

setIconForTabs();

12. Add 2 item dưới đây vào file style.xml

<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>

Download project

Link Fshare | Link MediaFire | Link Cloudup

Advertisements

Posted on Thứ Bảy, 23 Tháng Bảy, 2016, in Android, Lập Trình and tagged , , , , , , . Bookmark the permalink. Để lại phản hồi.

💭 Comment:

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: