What is the name of the Tabs that are being used in the new apps?

5

It is a tab that when you slide from the content of the Tab to the side goes to the new tab. In the new update of Youtube implemented this and I wanted to know the name to implement in my app. Youtube tab link

Image of the update:

    
asked by anonymous 24.07.2015 / 15:23

2 answers

7

This is called TabLayout , after Google released Android 5.0 the ActionBar became deprecated below example of how to implement withdrawn here .

Tab Layout , you need to add support android.support.design.widget.TabLayout and android.support.v4.view.ViewPager .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="0px"
    android:layout_weight="1"
    android:background="@android:color/white" />

Fragment , you can have one or more depending on your demand

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" />

Fragment.java , logic for your fragment.

// In this case, the fragment displays simple text based on the page
 public class PageFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";

private int mPage;

public static PageFragment newInstance(int page) {
    Bundle args = new Bundle();
    args.putInt(ARG_PAGE, page);
    PageFragment fragment = new PageFragment();
    fragment.setArguments(args);
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mPage = getArguments().getInt(ARG_PAGE);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_page, container, false);
    TextView textView = (TextView) view;
    textView.setText("Fragment #" + mPage);
    return view;
}
 }

FragmentAdapter , this will control your ViewPager .

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 3;
private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
private Context context;

public SampleFragmentPagerAdapter(FragmentManager fm, Context context) {
    super(fm);
    this.context = context;
}

@Override
public int getCount() {
    return PAGE_COUNT;
}

@Override
public Fragment getItem(int position) {
    return PageFragment.newInstance(position + 1);
}

@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    return tabTitles[position];
}
 }

Configuring the tabs slide , here it will be done in two steps:

1- in the OnCreate to ViewPager method connects to the adapter. 2 - Set the ViewPager in TabLayout to assign the pager with the tabs.

public class MainActivity extends FragmentActivity {

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

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager(), 
        MainActivity.this));

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);
}

 }

Exit:

    
24.07.2015 / 16:26
4

At the beginning of Material Design this component is called Tabs , anyway.

In the case of Youtube, there is a ViewPager with the tab component, where each item of ViewPager has a representative tab.

If you use the support libraries ( support v4 and / or appcompat v7 ) you can use TabLayout of design library google, which has several components and classes with specific behaviors of Material Design.

If you use Android Studio, just include it as a dependency:

compile 'com.android.support:design:22.2.1'

Remembering that version 22.2.1 fixes several bugs in version 22.2.0.

Using the TabLayout component is very simple, the simplest is:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabMode="fixed"
    app:tabGravity="fill" />

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

Configuring in your Activity or Fragment :

TabLayout tabLayout = ...;
PagerAdapter adapter = ...;
ViewPager viewPager = ...;

tabLayout.setupWithViewPager(pager);
tabLayout.setTabsFromPagerAdapter(adapter);

A good source for knowing the other components of design library is link

    
24.07.2015 / 16:18