TabLayout Text Gravity

Question

I want to set the gravity of the text in my tablayout to start but i can't find any solution that is working. The image below is showing the design i want to achieve.

The image below is showing my actual result.

My Code:

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/llWildbret"
            style="@style/TabLayout">

            <com.google.android.material.tabs.TabItem
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Zutaten" />

            <com.google.android.material.tabs.TabItem
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Zubereitung" />

        </com.google.android.material.tabs.TabLayout>

styles.xml

<style name="TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorGravity">bottom</item>
    <item name="tabIndicatorFullWidth">true</item>
    <item name="tabSelectedTextColor">@color/textColorBeige</item>
    <item name="tabIndicatorColor">@color/colorPrimaryDark</item>
    <item name="tabMode">fixed</item>
    <item name="tabTextAppearance">@style/TabTextAppearance</item>
    <item name="tabBackground">@color/tableBackground</item>
</style>

<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
</style>

Answer 1

Setting the gravity for TextView in TabLayout.Tab worked for me

    TabLayout tabLayout = binding.slidingTabs;
    tabLayout.setupWithViewPager(viewPager);

    // iterate over all tabs and set the gravity
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.view.setGravity(Gravity.START | Gravity.CENTER_VERTICAL);
    }

Answer 2

after researching

okay i'm posting here as a demo(whole code for it)...you accordingly adjust in your code:)

basically what i did is , made a custom textview inside tablayout and inflated using

View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);

MainActivity

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PagerAdapter pagerAdapter =
            new PagerAdapter(getSupportFragmentManager(), MainActivity.this);
    viewPager.setAdapter(pagerAdapter);

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(viewPager);

    // Iterate over all tabs and set the custom view
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(pagerAdapter.getTabView(i));
    }

}


@Override
public void onResume() {
    super.onResume();
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.sv_search) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

class PagerAdapter extends FragmentPagerAdapter {

    String tabTitles[] = new String[]{"Tab One", "Tab Two", "Tab Three"};
    Context context;

    public PagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return new BlankFragment();
            case 1:
                return new BlankFragment();
            case 2:
                return new BlankFragment();
        }

        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        return tabTitles[position];
    }

    public View getTabView(int position) {
        View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) tab.findViewById(R.id.custom_text);
        tv.setText(tabTitles[position]);
        return tab;
    }

}}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">


<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="6dp">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:elevation="0dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        android:minHeight="?attr/actionBarSize"
        />

</com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_below="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

custom_tab:

<?xml version="1.0" encoding="utf-8"?>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
    android:id="@+id/custom_text"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="?attr/selectableItemBackground"
    android:gravity="center"
    android:textSize="16dip"
    android:textColor="#ffffff"
    android:singleLine="true"
    />
</LinearLayout>

BlankFragment: did nothing here

public class BlankFragment extends Fragment {

public BlankFragment() {
    // Required empty public constructor
}



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

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootView = inflater.inflate(R.layout.fragment_blank, container, false);



    return rootView;
}}

fragment_blank:

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

<androidx.appcompat.widget.SearchView
    android:id="@+id/sv_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Search!"
    android:singleLine="true"
    android:inputType="textNoSuggestions"
    android:layout_gravity="start"
    android:layout_marginRight="18dp"
    android:ems="10" >
</androidx.appcompat.widget.SearchView>

output: