Android: Tablayout just like the latest Whatsapp Messenger

I have non-game creatures creating tabs like that of whatsapp messenger ... I want the camera icon to wrap its contents, but I tried everything I could but to no avail. I created a custom tab item and everything works fine, but the camera icon

My activity

public class MainActivity extends AppCompatActivity{
public TabLayout tabLayout;
Toolbar toolbar;
int toolbarMargin;
FloatingActionButton fab;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initUI();
    setupWindowAnimations();
}

private void setupWindowAnimations() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Re-enter transition is executed when returning to this activity
        Slide slideTransition = new Slide();
        slideTransition.setSlideEdge(Gravity.START);
        slideTransition.setDuration(getResources().getInteger(R.integer.anim_duration_long));
        getWindow().setReenterTransition(slideTransition);
        getWindow().setExitTransition(slideTransition);
    }
}

/**
 * method to initialize our views
 */
public void initUI() {
    fab = (FloatingActionButton) findViewById(R.id.fab);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    //  FAB margin needed for animation
    toolbarMargin = getResources().getDimensionPixelSize(R.dimen.fab_margin);

    final ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tab);
    tabLayout.setupWithViewPager(viewPager);

    viewPager.setAdapter(new TabsPagerAdapter(getSupportFragmentManager()));
    viewPager.setOffscreenPageLimit(1);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
    viewPager.setCurrentItem(0);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

    tabLayout.getTabAt(1).setCustomView(R.layout.custom_tab_chats);
    tabLayout.getTabAt(2).setCustomView(R.layout.custom_tab_status);
    tabLayout.getTabAt(3).setCustomView(R.layout.custom_tab_calls);
    tabLayout.getChildAt(0).getLayoutParams().width = 10;

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        findViewById(R.id.callCounter).setBackground(Main.getDrawable(MainActivity.this, R.drawable.bg_circle_tab_counter_unselected));
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        findViewById(R.id.statusDot).setBackground(Main.getDrawable(MainActivity.this, R.drawable.ic_dot_unselected));
    }
    ((TextView) findViewById(R.id.titleCalls)).setTextColor(Main.getColor(this, R.color.colorUnSelected));
    ((TextView) findViewById(R.id.titleStatus)).setTextColor(Main.getColor(this, R.color.colorUnSelected));
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            switch (tab.getPosition()) {
                case 0:
                    break;
                case 1:
                    break;
                case 2:
                    break;
                case 3:
                    break;
            }
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            switch (tab.getPosition()) {
                case 0:
                    break;
                case 1:
                    break;
                case 2:
                    break;
                case 3:
                    break;
            }

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            switch (tab.getPosition()) {
                case 0:
                    break;
                case 1:
                    break;
                case 2:
                    break;
                case 3:
                    break;
            }

        }
    });
    viewPager.setCurrentItem(1, false);
    setupTabIcons();
}

void showToast(String msg) {
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}

private void setupViewPager(ViewPager viewPager) {
    TabsPagerAdapter adapter = new TabsPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(adapter);
}

private void setupTabIcons() {

    ImageView camera = (ImageView) LayoutInflater.from(this).inflate(R.layout.custom_tab_icon, null);
    camera.setImageResource(R.drawable.ic_camera);
    tabLayout.getTabAt(0).setCustomView(camera);
    camera.setMaxWidth(R.dimen.statusbar_size);
}

/**
 * ViewPagerAdapter for our tab layout
 */
private static class TabsPagerAdapter extends FragmentPagerAdapter {

    TabsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    public Fragment getItem(int num) {

        Fragment frag=null;
        switch (num) {
            case 0:
                frag = new SelectStatusFragment();
                break;

            case 1:
                frag = new ChatsFragment();
                break;

            case 2:
                frag = new StatusFragment();
                break;

            case 3:
                frag = new CallsFragment();
                break;
        }
        return frag;
    }

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



    @Override
    public CharSequence getPageTitle(int position) {
        switch(position) {
            default: return null;
        }
    }
}

}

      

        
        
        
      

    

This is my implementation

I want to implement something like this ...

I want to implement something like this