Creating tabs the right way on Android currently

Asked

Viewed 9,504 times

4

I’m trying to implement in the app I’m creating Tabs, like this:

inserir a descrição da imagem aqui

But always when I try to implement I face classes and methods deprecated, as an example, TabListener, ActionBarActivity and now I’m in doubt of how I’m going to create it, I don’t know the right way to create it and I’ve already researched examples on the Internet but it’s full of examples using these obsolete classes and methods.

I need it to work on older versions of SDK, the smaller the better version.

Thank you in advance.

  • 1

    In place of ActionBarActivity use AppCompatActivity

1 answer

8


The best way to implement a tab-based layout is by using the TabLayout of design library.

Unfortunately it requires you to have the trio in your dependency group:

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

But nowadays, if you want to make an app that has a good compatibility without much effort and that aggregates some elements of Material Design, there is no escape from it.

The basics to implement is:

Basic layout

<?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" />
</LinearLayout>

Setup in your Activity

public class MainActivity extends FragmentActivity {

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

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

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

That’s the basics. When you start combining the AppBarLayout + CoordinatorLayout + Toolbar + some component with NestedScroll you can have many variations that get very good.

A good source to see the possibilities: https://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32 and http://android-developers.blogspot.com.br/2015/05/android-design-support-library.html

Source: https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout

  • Thank you, and as for those who do not use Gandle for dependencies?

  • Hmmm, I should use :D but joking aside, I can not help so much because long ago I migrated to Android Studio and use Gradle that I do not know exactly the process in Eclipse and Ant. There’s this one: https://developer.android.com/tools/support-library/setup.html. but I can’t tell if it’s quiet.

  • 2

    I do not know if these tabs have the effect of rolling, I use a very cool that has this effect, a check on this link https://github.com/astuetz/PagerSlidingTabStrip, is very well explained how to use and is quite customizable.

  • @Skywalker If you want, assemble a basic answer with an example, you can help some people :D

Browser other questions tagged

You are not signed in. Login or sign up in order to post.