É uma tab que quando vc desliza do conteúdo da Tab para o lado vai para a nova tab. Na nova atualização do Youtube implementaram isso e eu queria saber o nome para implementar no meu app. Link da tab do youtube.
Imagem da atualização:
É uma tab que quando vc desliza do conteúdo da Tab para o lado vai para a nova tab. Na nova atualização do Youtube implementaram isso e eu queria saber o nome para implementar no meu app. Link da tab do youtube.
Imagem da atualização:
Isso é chamado de TabLayout
, depois que a Google liberou o Android 5.0 as ActionBar
ficaram deprecated segue abaixo exemplo de como implementar retirado daqui.
Tab Layout, precisa adicionar o suporte android.support.design.widget.TabLayout
e 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, você pode ter um ou mais dependendo da sua demanda
<?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, logica para seu 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, aqui será controlado sua 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];
}
}
Configurando o slide das tabs, aqui será feito em duas etapas :
1- no método OnCreate
a ViewPager
se conecta com o adapter.
2- Defina o ViewPager
no TabLayout
para atribuir o pager com as guias.
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);
}
}
Saida:
No princípio do Material Design esse componente se chama Tabs
, assim mesmo.
No caso do Youtube, ali tem um ViewPager
com o componente de tabs, onde cada item do ViewPager
tem uma tab representante.
Se você usa as bibliotecas de suporte (support v4
e/ou a appcompat v7
) você pode usar o TabLayout
da design library
do google, que tem vários componentes e classes com comportamentos específicos do Material Design.
Se tu usas o Android Studio, basta incluí-la como dependência:
compile 'com.android.support:design:22.2.1'
Lembrando que a versão 22.2.1 corrige diversos bugs da versão 22.2.0.
Usando o componente TabLayout
é bem simples, o mais simples é:
<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" />
Configurando na sua Activity
ou Fragment
:
TabLayout tabLayout = ...;
PagerAdapter adapter = ...;
ViewPager viewPager = ...;
tabLayout.setupWithViewPager(pager);
tabLayout.setTabsFromPagerAdapter(adapter);
Uma boa fonte para conhecer os demais componentes da design library
é http://android-developers.blogspot.com.br/2015/05/android-design-support-library.html