How to create new LinkedIn app style ActionBar with Tabs inside it?

Question

I'm trying to create an ActionBar with 5 tabs and a button/imageview that will open NavigationDrawer from the right side. Very similar to what LinkedIn have done in their new Android application, here is an image:

I tried two methods, but non of them went well for me:

I tried to created a new TabbedActivity project, the resulted layout included this:

Now I tried to remove ToolBar from here and set AppBarLayout orientation as horizontal in order to add to the action bar another icon for opening the drawer. But the AppBarLayout can't have horizontal orientation. So this solutions does not works.

Another way I tried to implement it is using an AppCompat with ActionBar and ActionBar.Tab. as it looks like it was created by LinkedIn when I looked at this layout using the AI Automator, using the following code:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Create the adapter that will return a fragment for each of the three primary sections
// of the app.
mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getSupportFragmentManager());

// Set up the action bar.
final ActionBar actionBar = getActionBar();

// Specify that the Home/Up button should not be enabled, since there is no hierarchical
// parent.
actionBar.setHomeButtonEnabled(false);

// Specify that we will be displaying tabs in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

// Set up the ViewPager, attaching the adapter and setting up a listener for when the
// user swipes between sections.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mAppSectionsPagerAdapter);
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {
        // When swiping between different app sections, select the corresponding tab.
        // We can also use ActionBar.Tab#select() to do this if we have a reference to the
        // Tab.
        actionBar.setSelectedNavigationItem(position);
    }
});

// For each of the sections in the app, add a tab to the action bar.
for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {
    // Create a tab with text corresponding to the page title defined by the adapter.
    // Also specify this Activity object, which implements the TabListener interface, as the
    // listener for when this tab is selected.
    actionBar.addTab(
            actionBar.newTab()
                    .setText(mAppSectionsPagerAdapter.getPageTitle(i))
                    .setTabListener(this));
}
}

but I could not reach the desired result. Has someone created something like this and can give me a push in the right direction?

Result: provided by Vikram answer works great and this is its result in landscape mode:

Portrait works as expected as well.

Vikram · Accepted Answer

Why not use the first option with the TabLayout placed inside the Toolbar? This is what I get by doing so:

Layout side:

Activity side:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);

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

tabLayout.getTabAt(0).setIcon(R.drawable.icon1);
....
....
tabLayout.getTabAt(5).setIcon(R.drawable.icon6);

You can also do without CoordinatorLayout, along with AppBarLayout, since they do not come into play. layout_scrollFlags & layout_behavior will go as well.

Edit:

I used UI Automator Viewer to check what LinkedIn was doing with their layout. They are not using an ActionBar/Toolbar. Instead, they have a horizontal LinearLayout with TabLayout as the first child, and a couple of independent icons as the second and third.

Next, I checked TabLayout's source to determine the exact layout that tabs use. TabLayout's tabs are defined by TabLayout.TabView which is a LinearLayout created programmatically:

class TabView extends LinearLayout implements OnLongClickListener {
    ....
}

I translated this to XML:

Note: The dimensions assigned above are not arbitrary. They are defined in the design support library.

So, the final ActionBar layout will be:

How to create new LinkedIn app style ActionBar with Tabs inside it?

Answers (1)

Related Questions