Search code examples
androidxmlandroid-tablayout

How fix icons in tab layout

I am trying to place icons to left of the text in tab layout. I have done it so far but alignment is problem. Can some of help me how to align them so that text should overflow. Here is how it looking enter image description here

I want to align icon and text to each other like this

enter image description here

How to fix this? Help

Here is the code and xml that i am using

tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#fff" />

Here is java code

TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.tab, null);
        tabOne.setText("Dashboard");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_action_action_account_balance, 0, 0, 0);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.tab, null);
        tabTwo.setText("Nearby");
        tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_action_action_account_balance, 0, 0, 0);
        tabLayout.getTabAt(1).setCustomView(tabTwo);

        TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.tab, null);
        tabThree.setText("Explore");
        tabThree.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_action_action_account_balance, 0, 0, 0);
        tabLayout.getTabAt(2).setCustomView(tabThree);

here is entire xml file

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


<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="fixed"

            app:tabTextColor="#fff"></android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

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

    </android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navigation"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:headerLayout="@layout/consumer_header"
    android:layout_gravity="start">

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

Solution

  • Try with following layout

    <?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="CENTER_VERTICAL|LEFT"
android:textSize="14sp"
android:textColor="#fff" />

    In case if still text is not fitting in one line or it's too small you may have to play with textSize