I have 5 tabs in all. This is how I am adding them :
for (int i = 0; i < tabs.length; i++) {
if (i == 0) {
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.activity)
.setTabListener(this));
} else if (i == 1) {
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.group)
.setTabListener(this));
} else if (i == 2) {
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.message)
.setTabListener(this));
} else if(i == 3){
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.notification)
.setTabListener(this));
}
else
{
actionBar.addTab(
actionBar.newTab()
.setText(null)
.setIcon(R.drawable.hamburger)
.setTabListener(this));
}
I tried this solution but this sets the width of the tab icon and not the tab itself.
Following are the styles I have applied :
App theme :
<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:actionBarTabStyle">@style/actionBarTabBarStyle</item>
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<style name="actionBarTabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
<item name="android:paddingLeft">1dp</item>
<item name="android:paddingRight">1dp</item>
<item name="android:minWidth">10dp</item>
<item name="android:maxWidth">15dp</item>
<item name="android:showDividers">none</item>
</style>
I also tried using customView for the tab but it didn't work.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabItemLayout"
android:gravity="center"
android:layout_width="wrap_content" android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:id="@+id/imageViewTab" />
</LinearLayout>
The tabs are too wide and the tabBar
is sliding. How can I make the tabs take dynamic width as per the screen width without the sliding effect. i.e. all tabs should fit in the screen width and should be of equal width.
There are 4 tabs visible here. The tabBar is scrollable so the fifth tab appears on scrolling which I don't want.
Use the following code for changing the size of tab and making tabs fit within the screenwidth. Make sure your are using the Custom View
Tab
view width is based on content/yourImage size, so to make tab view width smaller, we have to control the content/Image size. You can do this by puttingImageView
insideFrameLayout
, for example yourcustomView
can be:and custom style for tab:
[SCREENSHOT]
For
FrameLayout
size with24dp
:For
FrameLayout
size with40dp
As you're trying to achieve tabs on Actionbar which fits to width of device, one can use
PagerSlidingTabStrip
orSlidingTabLayout
which gives you more flexibility in achieving tabs and its related Fragment withViewPager
which gives your Uix more efficient and user friendly touch.Here I'm showing how to achieve it using
PagerSlidingTabStrip
PagerSlidingTabStrip.java
: Your Custom Tab ViewYour Activity Layout :
Your Activity :
ViewPagerAdapter
: which passes fragment on tab selection or swiping it. Pass on Fragment and drawables in here.