CustomView action bar screen too long

Question

Finally, after each CustomView completely wrapped the parent Tab element, I ran into a problem when the tabs are too long and turn the action bar into a slider. My drawings have a width of 150 pixels, which should be good, because I tested the width in pixels of the screen of the Samsung Galaxy S2 and got 480 pixels (480/3 tabs = 160 pixels each).

Screenshot:

Customization: Each tab is set using the same RelativeLayout, which has different draw resources attached to the layout. This layout is then passed to the setCustomView () tab. I do not think that there is a need for an ImageView for each tab, if this does not fix my problem. Some style-style changes, such as deleting the left and right TabView fill, were made to place custom views on a tab.

Code (not using ImageView, setting the resource to RelativeLayout)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="56dp" android:layout_margin="0dp" android:paddingBottom="2dp" > <!-- <ImageView android:id="@+id/ivCustomTab" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="2dp" android:contentDescription="@string/tabsDescription" android:duplicateParentState="true" /> --> </RelativeLayout> 

 //setting up tabs + custom views on tabs LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE); RelativeLayout discoverTabLayout = (RelativeLayout) inflater.inflate(R.layout.actionbar_tabs, null); RelativeLayout tagsTabLayout = (RelativeLayout) inflater.inflate(R.layout.actionbar_tabs, null); RelativeLayout badgeTabLayout = (RelativeLayout) inflater.inflate(R.layout.actionbar_tabs, null); //ImageView customTabImg = (ImageView) customTabLayout.findViewById(R.id.ivCustomTab); //re-setting this ImageView for each tab ActionBar.Tab discoverTab = actionBar.newTab();//.setText("Discover").setIcon(R.drawable.selector_tabicon_discover);//.setCustomView(drawable.selector_tab_discover); //customTabImg.setImageResource(R.drawable.selector_tab_discover); discoverTabLayout.setBackgroundResource(R.drawable.selector_tab_discover); discoverTab.setCustomView(discoverTabLayout); 

 <!-- Application theme. --> <style name="Theme.AppTheme" parent="AppBaseTheme"> <!-- All customizations that are NOT specific to a particular API-level can go here. --> <item name="android:textSize">18sp</item> <item name="actionBarTabStyle">@style/Theme.TabsNoPadding</item> <item name="android:actionBarTabStyle">@style/Theme.TabsNoPadding</item> </style> <style name="Theme.TabsNoPadding" parent="@style/Widget.Sherlock.ActionBar.TabView"> <item name="android:paddingLeft">0dp</item> <item name="android:paddingRight">0dp</item> <item name="android:minWidth">0dp</item> </style> 

What I tried:

• Adding android: layout_width = "120dp" to the RelativeLayout to reduce tabs, but the width remains the same.
• Resize images and reduce the total length of 45 pixels, unchanged. And if I set them too small, they will not close the tab.
• I also noticed that tabbing customView (s) in most cases disappears onCreate (). Not sure if this has anything to do with rendering with a tab scroll layout that I don't need.

I can post my main activity code if necessary.

Answer 1

• I would suggest thinking in dp (density independent pixel pixel) instead of px (pixels) when working in Android.

• If you want to create a custom tab, I would suggest just creating a LinearLayout with the width specified as match_parent and the height of your choice (e.g. 48dp). Orientation will be set to horizontal.

Inside LinearLayout, create as many ImageView or View images as you want, and set the width to 0dp, height to match_parent and, most importantly, weight to 1 (without dp or any other unit) for each View inside LinearLayout. This way the tabs will have the same width and they will remain inside the borders of the screen.

Hope this helps.