We are Borg We are Borg - 4 months ago 12
Java Question

Android : Adding space in between tab layout

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 :

enter image description here

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.

Answer

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