Hướng dẫn thiết kế Tab Layout trong Android

Tab Layout trong Android được dùng để thiết kế màn hình với nhiều mục (tab) khác nhau trên một màn hình, giúp chuyển đổi qua lại giữa các màn hình một cách nhanh chóng và thuận lợi. Trong nội dung bài viết này hãy cùng tìm hiểu hướng dẫn thiết kế Tab Layout trong Android.

1.Sử dụng Tab Layout vào ứng dụng.

Bước 1: Đầu tiên, bạn cần tạo một số giao diện màn hình mà ở đây mình sẽ tạo ra 3 màn hình lần lượt là fragment_one.xml, fragment_two.xml và fragment_three.xml như sau

fragment_one.xml

<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=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ONE"
        android:textSize="40dp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>

</RelativeLayout>

<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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="ONE"

android:textSize="40dp"

android:textStyle="bold"

android:layout_centerInParent="true"/>

</RelativeLayout>

fragment_two.xml

<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=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TWO"
        android:textSize="40dp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>

</RelativeLayout>

<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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="TWO"

android:textSize="40dp"

android:textStyle="bold"

android:layout_centerInParent="true"/>

</RelativeLayout>

fragment_three.xml

<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=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="THREE"
        android:textSize="40dp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>

</RelativeLayout>

<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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="THREE"

android:textSize="40dp"

android:textStyle="bold"

android:layout_centerInParent="true"/>

</RelativeLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="0dp">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.AppBarLayout>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextColor="#FFFFFF" />

    </LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#EEEEEE"

tools:context=".MainActivity">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

tools:layout_editor_absoluteX="8dp"

tools:layout_editor_absoluteY="0dp">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.TabLayout

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorPrimary"

app:tabGravity="fill"

app:tabMode="fixed"

app:tabTextColor="#FFFFFF" />

</LinearLayout>

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

Bước 2: Tiếp theo, chúng ta sẽ xử lý thiết kế Tab Layout trong Android trong lớp MainActivity.java

– setupViewPager() dùng để gán số lượng tab cần hiển thị

– setupTabIcons() dùng để gán icon

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

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

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    TabLayout tabLayout;
    ViewPager viewPager;

    private int[] tabIcons = {
            R.drawable.ic_filter_1_white_24dp,
            R.drawable.ic_filter_2_white_24dp,
            R.drawable.ic_filter_3_white_24dp
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        viewPager= (ViewPager) findViewById(R.id.viewpager);

        setupViewPager(viewPager);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "One");
        adapter.addFragment(new TwoFragment(), "Two");
        adapter.addFragment(new ThreeFragment(), "Three");
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(3);
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

    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 addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

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

    }

}

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;

TabLayout tabLayout;

ViewPager viewPager;

private int[] tabIcons = {

R.drawable.ic_filter_1_white_24dp,

R.drawable.ic_filter_2_white_24dp,

R.drawable.ic_filter_3_white_24dp

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

tabLayout = (TabLayout) findViewById(R.id.tabs);

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

setupViewPager(viewPager);

tabLayout.setupWithViewPager(viewPager);

setupTabIcons();

}

private void setupViewPager(ViewPager viewPager) {

ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

adapter.addFragment(new OneFragment(), "One");

adapter.addFragment(new TwoFragment(), "Two");

adapter.addFragment(new ThreeFragment(), "Three");

viewPager.setAdapter(adapter);

viewPager.setOffscreenPageLimit(3);

}

private void setupTabIcons() {

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

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

tabLayout.getTabAt(2).setIcon(tabIcons[2]);

}

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 addFragment(Fragment fragment, String title) {

mFragmentList.add(fragment);

mFragmentTitleList.add(title);

}

@Override

public CharSequence getPageTitle(int position) {

return mFragmentTitleList.get(position);

}

Bước 3: Cuối cùng, bạn tạo 3 lớp OneFragment.java, TwoFragment.java và ThreeFragment.java kế thừa từ lớp Fragment.

OneFragment.java

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by TUNG DUONG on 05/08/2017.
 */

public class OneFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one, null);
        return view;
    }

}

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

/**

* Created by TUNG DUONG on 05/08/2017.

public class OneFragment extends Fragment {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_one, null);

return view;

}

TwoFragment.java

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by TUNG DUONG on 05/08/2017.
 */

public class TwoFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_two, null);
        return view;
    }

}

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

/**

* Created by TUNG DUONG on 05/08/2017.

public class TwoFragment extends Fragment {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_two, null);

return view;

}

ThreeFragment.java

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by TUNG DUONG on 05/08/2017.
 */

public class ThreeFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_three, null);
        return view;
    }

}

package net.kenhlaptrinh.androidtablayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

/**

* Created by TUNG DUONG on 05/08/2017.

public class ThreeFragment extends Fragment {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_three, null);

return view;

}

Video demo hướng dẫn thiết kế Tab Layout trong Android:

Download mã nguồn ngay tại đây.

Download link Google Drive

Download link Vipshare

Download link Mshare

Như vậy là bài hướng dẫn thiết kế Tab Layout trong Android của mình đã hoàn thành, bây giờ bạn hãy làm theo và chạy thử chương trình trên xem kết quả như thế nào.

Lời kết: Mong rằng qua bài viết này bạn có thể thiết kế Tab Layout trong Android. Ngoài ra, bạn có thể xem thêm các bài viết khác trong chuyên mục lập trình Android.

(Tác giả: Tùng Dương)

2 thoughts on “Hướng dẫn thiết kế Tab Layout trong Android”

Nguyễn Châu Thảo Quân
22/11/2018 at 9:07 Chiều - Edit
Bạn ơi, bạn cho mình hỏi là ThreeFragment làm sao để ép recyclerview vào ? có phải bước mình xử lý dữ liệu đổ vào recyclerview để vào hàm View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) trước cái View view = inflater.inflate(R.layout.fragment_three, null); phải ko
1. admin
  26/11/2018 at 10:11 Sáng - Edit
  Chào bạn,
  Nếu bạn muốn thêm recyclerview vào ThreeFragment thì viết mã trong onCreateView() chẳng hạn như:
  @Override
  public View onCreateView(LayoutInflater inflater, final ViewGroup container,
  Bundle savedInstanceState) {
  View view = inflater.inflate(R.layout.fragment_tab3, null);
  recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
  recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
  // code
  return view;
  }
  Chúc bạn một ngày vui!

Kênh Lập Trình

Hướng dẫn thiết kế Tab Layout trong Android

1.Sử dụng Tab Layout vào ứng dụng.

Video demo hướng dẫn thiết kế Tab Layout trong Android:

2 thoughts on “Hướng dẫn thiết kế Tab Layout trong Android”

Bình luận Hủy

Bài viết liên quan...

Hướng dẫn thiết kế Tab Layout trong Android

1.Sử dụng Tab Layout vào ứng dụng.

Video demo hướng dẫn thiết kế Tab Layout trong Android:

2 thoughts on “Hướng dẫn thiết kế Tab Layout trong Android”

Bình luận Hủy