MohanRaj S MohanRaj S - 10 days ago 5
Android Question

TabLayout ViewPager Icon Show at Corners in Android

I have Implemented the ViewPager with Three Tabs,Each Tab have only icons and it will show in left aligned. My expected output is tabs will equal space in width.Here is my necessary code and screen shot. please guid me to fix the problem,Thanks in advance.

layout.xml

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/colorTrade_2"
app:tabPaddingBottom="-10dp"
app:tabPaddingEnd="-10dp"
app:tabPaddingStart="-10dp"
app:tabPaddingTop="-10dp"
app:tabGravity="fill"/>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/parent_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />


JustTabActivity.Class

import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;

public class JustTabActivity extends AppCompatActivity {

private TabLayout tabLayout;
private ViewPager parent_viewpager;
ViewPagerAdapter pageAdapter;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.aaa_sms_layout);

parent_viewpager = (ViewPager) findViewById(R.id.parent_viewpager);
setupViewPager(parent_viewpager);

tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(parent_viewpager);
tabLayout.setFillViewport(true);
parent_viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(onTabSelectedListener(parent_viewpager));
setupTabIcons();
}


private void setupTabIcons() {
int[] tabIcons = {R.drawable.icon1,R.drawable.icon5,R.drawable.ic_settings };

tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);

tabLayout.getTabAt(0).getIcon().setColorFilter(Color.parseColor("#018FFD"), PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(1).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(2).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);

}

private void setupViewPager(ViewPager viewPager) {
pageAdapter = new ViewPagerAdapter(getSupportFragmentManager());
pageAdapter.addFrag(new fragment_home_new());
pageAdapter.addFrag(new fragment_userprofile());
pageAdapter.addFrag(new fragment_settings());
parent_viewpager.setAdapter(pageAdapter);
}


class ViewPagerAdapter extends FragmentStatePagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();

public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}

@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}

@Override
public int getCount() {
System.out.println(""+mFragmentList.size());
return mFragmentList.size();
}

public void addFrag(Fragment fragment) {
mFragmentList.add(fragment);

}


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

private TabLayout.OnTabSelectedListener onTabSelectedListener(final ViewPager mPager) {
return new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
mPager.setCurrentItem(tab.getPosition());
tab.getIcon().setColorFilter(Color.parseColor("#018FFD"), PorterDuff.Mode.SRC_IN);
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
}

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


Screenshot of my output, Please Help to set Tabs Equally

Answer
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
Comments