CODEWITHSUNDEEP
androidtabbar
Geek
Geek

Reputation: 8320

Remove bottom line from tab bar

I want to remove default line that appears on bottom of tab bar. I tried followings :

android:tabStripEnabled="false"  
tabHost.getTabWidget.setStripEnabled(false);

Also tried wrapping in LinearLayout as suggested on this question

How to remove that line?

Upvotes: 2

Views: 2354

Answers (4)

Laksh Lathiya
Laksh Lathiya

Reputation: 322

use this attribute in TabLayout

app:tabIndicatorColor="@android:color/transparent"

Full Example :

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_27sdp"
    android:layout_marginLeft="@dimen/_5sdp"
    android:layout_marginTop="@dimen/_10sdp"
    android:layout_marginRight="@dimen/_5sdp"
    android:background="@drawable/blue_button"
    app:tabIndicatorColor="@android:color/transparent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/challengeType"
    app:tabGravity="fill"
   >

Upvotes: 0

DEEPAK MITTAL
DEEPAK MITTAL

Reputation: 141

use this code and remove line from tabhost bottom

android:tabStripEnabled="true"  
tabHost.getTabWidget.setStripEnabled(true);

Upvotes: 0

Geek
Geek

Reputation: 8320

I used custom view to remove lines from tab bar.

Custom layout for tab view : 

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:contentDescription="@string/tab_desc"
        android:gravity="center" />

</LinearLayout>

Set tab view :

private void setUpTabs() {
    TabSpec spec0 = tabHost.newTabSpec("Tab");
    spec0.setContent(R.id.tab_list);
    spec0.setIndicator(tabView(R.drawable.image));
    tabHost.addTab(spec0);
}


// Return view for tab
private View tabView(int drawableId) {
    View view = LayoutInflater.from(this).inflate(R.layout.tab_image,
                                tabHost.getTabWidget(), false);
    ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon);
    imageView.setImageResource(drawableId);
    return view;
}

Upvotes: 1

Smogger
Smogger

Reputation: 553

I removed it using 

 // Create Child Tab1
    mTabHost.addTab(mTabHost.newTabSpec("child1").setIndicator("your text",getResources().getDrawable(R.drawable.your_image)),
            yourclass.class, null);

 mTabHost.getTabWidget().getChildAt(0).setBackgroundColor(getResources().getColor(R.color.your background color));
    mTabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.your_image);

I set the background color and then set the image on the tab using the code above the blue line automatically gone, hope this help to you.

Upvotes: 0

Related Questions