CODEWITHSUNDEEP
androidandroid-tablayout
Nouman
Nouman

Reputation: 132

add border around tabs in android

enter image description here

enter image description here

I am adding the border around tabs as shown in the second image. I am able to add the borders on top and the bottom as shown in first image but not able to add the border on left/right side of each tab individually.

main_activity.xml

          <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/tab_border"
            android:theme="@style/AppTheme.ActionBar"
            android:visibility="invisible"
            app:tabIndicatorColor="@color/colorPrimary">


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

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="50dp"
            app:layout_constraintTop_toTopOf="parent" />

@drawable/tab_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#efefef"/>
<stroke android:width="2dp" android:color="#c0c6cc"/>
<corners android:radius="0dp" />
<padding android:left="10dp" android:top="5dp"
    android:right="10dp" android:bottom="5dp" />
</shape>

I am adding the tabs programmatically in activity class as i have to decide the no of tabs on run-time.

Upvotes: 0

Views: 2485

Answers (1)

GianhTran
GianhTran

Reputation: 3701

Using CustomTabLayout:

public class CustomTabLayout extends TabLayout {

    public CustomTabLayout(Context context) {
        this(context, null);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    public void setupWithViewPager(@Nullable ViewPager viewPager) {
        super.setupWithViewPager(viewPager);
        initCustomTab();
    }

    @SuppressWarnings({ "ConstantConditions" })
    private void initCustomTab() {
        int totalTab = getTabCount();
        for (int i = 0; i < totalTab; i++) {
            Tab tab = getTabAt(i);
            if (tab == null) continue;
            View view = LayoutInflater.from(getContext())
                    .inflate(R.layout.item_custom_tab, this, false);
            tab.setCustomView(view);
        }
    }
}

item_custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/dp_48"
    android:background="@drawable/tab_border"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

hope this helps

Upvotes: 1

Related Questions