Reputation: 5313
I am working on an Android project in which I am using TabLayout to show tabs as shown in the image below. As you can see in the screenshot, the tabs are all aligned on the left side. How can I add spaces properly so the three tabs fill out the entire width instead of getting clubbed in on left side. Thank you.
Screenshot :
XML :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="0dp"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fillViewport="false" />
</RelativeLayout>
<EditText
android:id="@+id/emailEditText"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="60dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginBottom="5dp"
android:alpha="0.4"
android:gravity="center"
android:layout_gravity="center"
android:background="@drawable/layout_bg"
android:ellipsize="end"
android:hint="Search...."
android:textColor="@color/nliveo_black"
android:textColorHint="@color/nliveo_black"
android:inputType="textEmailAddress"
android:maxLines="1"
/>
<ImageView
android:id="@+id/imageView"
android:layout_width="25dp"
android:layout_height="25dp"
android:alpha="0.8"
android:src="@drawable/search"
android:layout_above="@+id/productList"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp"
android:layout_marginBottom="15dp"
/>
<ImageView
android:id="@+id/cancel"
android:layout_width="25dp"
android:layout_height="25dp"
android:alpha="0.8"
android:src="@drawable/xblack"
android:layout_above="@+id/productList"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="22dp"
android:layout_marginBottom="15dp"
/>
<ListView
android:id="@+id/productList"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="@+id/emailEditText"
android:layout_marginTop="5dp"
android:layout_above="@+id/relativeLayout3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/common_signin_btn_dark_text_default"
android:orientation="horizontal"
android:id="@+id/relativeLayout3">
<ImageView
android:id="@+id/trashImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="46dp"
android:layout_marginStart="46dp"
android:src="@drawable/swappossible" />
<ImageView
android:id="@+id/swapImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/trashImage"
android:layout_centerHorizontal="true"
android:src="@drawable/footerheart" />
<ImageView
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="@+id/swapImage"
android:layout_marginBottom="5dp"
android:layout_marginEnd="41dp"
android:layout_marginRight="41dp"
android:src="@drawable/footermessages" />
</RelativeLayout>
</RelativeLayout>
Activity :
public class Products extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.products);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tinder"));
tabLayout.addTab(tabLayout.newTab().setText("List"));
tabLayout.addTab(tabLayout.newTab().setText("Maps"));
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.getTabAt(1).select();
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
switchIntentsForTabs(tab.getText().toString().toLowerCase());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
switchIntentsForTabs(tab.getText().toString().toLowerCase());
}
});
}
PageAdapter.java :
public class PageAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public PageAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new FirstTab();
case 1:
return new SecondTab();
case 2:
return new ThirdTab();
default:
return null;
}
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
FirstTab.java :
public class FirstTab extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_fragment_1, container, false);
}
}
tab_fragment_1.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
// Tried adding layout_marginLeft=150 in TextView below, nothing changed.
<TextView
android:id="@+id/textView"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:singleLine="true"
/>
</RelativeLayout>
Thank you.
Upvotes: 3
Views: 6115
Reputation: 1
for (int a= 0; a< tabLayout.getTabCount(); a++) {
View tabView = LayoutInflater.from(context)
.inflate(LayoutInflater.from(this), R.layout.item_main_tabview, null, false);
tabView.setLayoutParams(new TableLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tabView.setPadding(0, 0, 0, 0);
tabLayout.getTabAt(a).setCustomView(tabViewBinding.getRoot());
}
Thus You can add space between tabs in tablayout
Upvotes: 0
Reputation: 588
Please remove below line in your activity file
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
and Change your tablayout
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="0dp"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:tabMode="fixed"
app:tabGravity="fill"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fillViewport="false" />
Upvotes: 1