Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android 5.0 material design tabs [closed]

What is the best and easy way to implement material design style tabs just like in the latest Google NewsStand app? That is exactly what I'm looking for but don't know where to start. Any help/direction provided is greatly appreciated. Thanks.

like image 794
nomongo Avatar asked Oct 21 '14 11:10

nomongo


People also ask

What is tab layout?

TabLayout is used to implement horizontal tabs. TabLayout is released by Android after the deprecation of ActionBar. TabListener (API level 21). TabLayout is introduced in design support library to implement tabs. Tabs are created using newTab() method of TabLayout class.

What is the latest version of material design?

Material 3 is the latest version of Google's open-source design system. Design and build beautiful, usable products with Material 3.

What are tabs UI?

Tabs are a navigation element used in web design that allow users to easily access different areas of a site or different parts of an individual page. They're sort of like tabbed dividers in a filing cabinet – by clicking a tab, users can easily locate a page containing related content.

When did Material Design 3 come out?

Following the release of Android 12 in May 2021, Google announced in late October a complete overhaul of its design language: Material Design 3. Material Design 3 is the technical name of Material You, which was unveiled in early 2021 through a Pixel 6 ad, and it's a revolution for Android developers and designers.


1 Answers

This post of @ChrisBanes (Developer Programs Engineer for Android) explain the situation with the new Toolbar.

So this sample can help.

As well as this DevBytes video.

If you want a library, you can go for this one but It is not updated to material design (I forked it, and If I have some time, I will try to update it).

You can find more information about the new API 21 in @ChrisBanes blog as well as the official android blog

EDIT: You can find material design tabs in this repo jpardogo/PagerSlidingTabStrip :

I basically did 4 changes to the original library, so far (I will add Toolbar and fix some stuff tomorrow):

  1. Change the default parameters of the tabs layout to make it look like more material.
  2. The indicator is center by default while swiping tabs.
  3. The alpha value of the titles change depending the selected position.
  4. Ability to pass customTabs implementing the interface ´CustomTabProvider` in your adapter.

    • In case the customTab have a view with id @+id/tab_title, it will be use to place the title and alpha will act as usual.
    • If this interface is not implemented then, the default Tab layout will be use (TextView).

If you want you can use a custom tab with ripples using any of this libraries:

  • https://github.com/traex/RippleEffect
  • https://github.com/siriscac/RippleView
  • https://github.com/balysv/material-ripple
  • https://github.com/03uk/RippleDrawable

EDIT2: I changed the ActionBar for the new support library Tooolbar. I have also applied colors dynamically to the tabs,toolbar and statusBar. You can see the example working in android 4.4.3 on the following gif.

I sent a PR with my changes. If the original project owner doesn't update the maven library, and push it to maven I will push my library fork to maven central.

material_tabs

like image 189
jpardogo Avatar answered Oct 12 '22 06:10

jpardogo