Develop Reference

Android Toolbar Menu Item taking spaces . Don't Set Duplicate

My menu item are taking spaces. I know default padding is 56 dp but I don't know how to remove this. I followed this link but won't work for me.
I am using toolbar not action bar.
my toolbar is
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
I am getting the output like below image ..how to remove spaces between menu item
. ..

Just add this line to your Activity's theme
<item name="android:actionButtonStyle">#style/OptionMenuStyle</item>
and create new style in style resources
<style name="OptionMenuStyle" parent="AppBaseTheme">
<item name="android:minWidth">20dip</item>
<item name="android:padding">0dip</item>
</style>
The problem with setting only 0dp padding is - option menu item has default minimum width, so setting 0dp padding doesn't change anything.
result before applying this style is as below.
result after applying above style
Cheers!!!

Add margin to Appcompat actionbar popup menu

I am using appcompat actionbar. I want to add top margin to the overflow menu that opens on the top-right. Hence, increasing the spacing above it as you can see in the picture below. Right now the dropdown menu open on top of the 3 dots. How can I push it down?
Thank you.

If you are referring to Activity's default OptionItem menu, I guess you can't do it programmatically as the APIs just let you inflate it, thus adding/removing elements. Spacing should be fine tho, as the menu is standardized across every kind of layout.
What is the spacing problem you're having? Could you add a screenshot of your desired result?
A possible solution, not too dirty, would be using a custom style:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionButtonStyle">#style/MyStyle</item>
</style>
<style name="MyStyle" parent="AppBaseTheme">
<item name="android:minWidth">XXdip</item>
<item name="android:padding">XXdip</item>
</style>

You can Toolbar instead of ActionBar
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
android:background="#color/color_notification_toolbar"
android:layout_width="fill_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material">
<TextView
android:textSize="#dimen/abc_text_size_title_material_toolbar"
android:textStyle="bold"
android:textColor="#color/color_notification_title"
android:layout_gravity="center"
android:id="#id/tvTimeLineTitle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/title" />
/* add your menu items here as simple text views and
and give as much margins and paddings as you want */
</android.support.v7.widget.Toolbar>

Action Bar Tabs CustomView too long

After finally getting each CustomView to wrap the Tab parent completely, I ran into a problem where the Tabs are too long and are turning the Action Bar into a slider. My drawables have widths of 150px , which should be fine because I tested the width in px of the Samsung Galaxy S2 screen and got 480px (480/3 tabs = 160px each).
Screenshot:
Set-up: Each Tab is set by the same RelativeLayout that has different drawawble resources attached to the layout. That layout is then passed to setCustomView() of the Tab. I don't think there is a need for an ImageView for each Tab, unless that would fix my problem. Some Style config changes such as removing left and right padding of the TabView have been made in order to place the custom views over the Tab.
Code (not using ImageView, setting drawable resource on 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've tried:
Adding android:layout_width="120dp" to RelativeLayout to shorten the Tabs, but the width stayed the same.
Re-sized the images and reduced a total length of 45px, no change. And if I set them too small they won't cover the tab host.
I've also noticed that the tabs customView(s) disappear onCreate() most of the time. Not sure if that has anything to do with the rendering off the tab scroll layout that I don't want.
I can post my Main Activity code if needed.

I would suggest to think in dp(Density-independent pixel) instead of px(pixels) when working in Android.
If you want a custom tabbar I would suggest to simply create a LinearLayout with a width being set to match_parent and a height by your choice (for ex. 48dp). The orientation would be set to horizontal.
Inside the LinearLayout create as many ImageView or View as many tab 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 the LinearLayout. This way the tabs will have the same width and they will remain inside the boundaries of the screen.
Hope this helps.

Android Navigation Drawer and windowActionBarOverlay = true

I'm trying to implement the new Android Navigation Drawer in my application. I have created a BaseActivity.java that handles the Drawer setup and listeners, and I have two subactivities that extend this base class. On the second activity, I plan to use a different action bar style, using the following attrs:
<item name="android:windowActionBarOverlay">true</item>
<item name="android:background">#android:color/transparent</item>
to make the action bar transparent, and make content richer, as there is a picture header in my layout.
I've achieved just that, but now the problem is, that because the content is expanding to take advantage of the extra space of using the ActionBar as overlay, the Navigation Drawer itself is expanding too and it overlaps the ActionBar, creating a pretty awful looking layout:
What I'd like to have done, is the actual content (frame layout that will be populated with a fragment) to take up the extra space, but have the nav drawer still go underneath the action bar, similar to the Play Music App:
Any ideas on what I can do to make that happen?
EDIT So, as per Ahmad's assistance I set the marginTop on the ListView only. Here's the layout:
<!-- The navigation drawer -->
<ListView android:id="#+id/left_drawer"
android:layout_marginTop="?android:attr/actionBarSize"
<!-- This was added after seeing the crazy effect, but does nothing -->
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_width="240dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:background="?attr/listviewBackground"
/>
And now, it works great for the top side, but for some reason there's also a margin at the bottom of the view, which doesn't make any sense to me at all. Here's a screenshot.
Not sure what's causing it :(

And now, it works great for the top side, but for some reason there's also a margin at the bottom of the view, which doesn't make any sense to me at all. Here's a screenshot.
If you set your ListView gravity to start|bottom it solves your problem. No additional margin is added at the bottom. Looks like the DrawerLayout default gravity is start|center
<ListView
android:id="#+id/left_drawer"
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start|bottom"/>

In case anyone is interested in another take to this question. Here's what happened.
I tried setting only the margin to the top of the list view like this:
android:layout_marginTop="?android:attr/actionBarSize"
But as mentioned on the edited question, that had a weird behaviour where there was also a margin on the bottom despite not being set on the layout resource file.
So, I was looking closely at the Play Music App and noticed that it's not actually a margin, but rather some padding, and additionally they are using a custom background that fills the space specified by the padding with a transparent color.
Here's what I did:
Set Padding at the top of the ListView, rather than margin:
android:paddingTop="?android:attr/actionBarSize"
As said before, it's important to not hard code the dimensions as they vary per device.
Create a custom drawable that has a top part transparent, and then rest of a solid color:
It looks somehow like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#80000000" />
</shape>
</item>
<item android:top="#dimen/action_bar_default_height">
<shape
android:shape="rectangle">
<solid android:color="#color/light_gray" />
</shape>
</item>
Note that I tried to use ?android:attr/actionBarSize on the drawable, but that made the app force close. Instead, I searched through grepcode and found a few dimen files with different sizes for the action bar, so I added those to my own project's dimen files.
For values: 48dp
For values-land: 40dp
For values-sw600dp: 56dp
And after that, I think I looks great, notice on the screenshot how the listview and the actionbar don't overlap, and the transparent part of the listview is just the right size.
Hope that helps anyone who was wondering how to achieve this.

You can set a margin at the top of your layout, so that the content draws itself below the ActionBar.
Just add this in your parent layout:
android:layout_marginTop="?android:attr/actionBarSize"
The attribute actionBarSize refers to, like you would have already guessed, to the size of the ActionBar. You can't set an absolute value as a margin, since the ActionBar does not always have the same size across all Android devices (It's bigger on tablets, smaller on handset devices).
Edit:
Set the margin to the ListView.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
The Google Music app does the same:

I solved this problem using paddingTop:
<FrameLayout
android:id="#+id/menu_frame"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingTop="?attr/actionBarSize" >
<ListView
android:id="#+id/left_drawer_list"
android:layout_width="240dp"
android:layout_height="match_parent" />
</FrameLayout>
Hope that helps

I have created a working demo following the above guide and tested on 2.x to 5.x
You can clone from Github
The important thing to play around is in Main Activity
toolbar = (Toolbar) findViewById(R.id.toolbar);
res = this.getResources();
this.setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
ScrimInsetsFrameLayout scrimInsetsFrameLayout = (ScrimInsetsFrameLayout)
findViewById(R.id.linearLayout);
scrimInsetsFrameLayout.setOnInsetsCallback(this);
}
and the call back
#Override
public void onInsetsChanged(Rect insets) {
Toolbar toolbar = this.toolbar;
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams)
toolbar.getLayoutParams();
lp.topMargin = insets.top;
int top = insets.top;
insets.top += toolbar.getHeight();
toolbar.setLayoutParams(lp);
insets.top = top; // revert
}
Absolutely the Theme for V21 does the magic
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- API 21 theme customizations can go here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/accent_material_light</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>

How do I remove the selected tab indicator from the TabWidget?

Here's what I'd like to remove :
How do I replace the indicator showing which tab is currently shown as well as the blue line that spans the entire tabwidget?
To Specify: All I want indicating which tab is selected is this :
tab_button_active.9.png should be shown as background if the tab is SELECTED
tab_button_inactive.9.png should be shown as the background if the tab is NOT SELECTED.
edit : Setting tabStripEnabled to false has no effect. Adding a style to it and having "#android:style/Widget.Holo.ActionBar" as its parent is also not possible since im targetting API level 7 and the ActionBar was implemented in API level 11.

This line app:tabIndicatorHeight="0dp" solve the problem for me in xml
<android.support.design.widget.TabLayout
android:id="#+id/view_bottom_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="0dp" //this line
app:tabGravity="fill"
app:tabMode="fixed" />

I have yet another hack.
TabLayout tabLayout = (TabLayout) fragmentView.findViewById(R.id.tabs);
tabLayout.setSelectedTabIndicatorHeight(0);
It's basically the same idea as Eleojasmil's.

If android:tabStripEnabled="false" did not work then I also assume calling setStripEnabled(boolean stripEnabled) will have no effect as well. If all of this is true then your problem is probably not in TabWidget.
I would suggest looking at your tab indicator. Try these modifications. This code is taken from a fragment that has tabs.
Here is the code that creates the tab indicator view.
View indicator = LayoutInflater.from(getActivity()).inflate(R.layout.tab,
(ViewGroup) mRoot.findViewById(android.R.id.tabs), false);
TabSpec tabSpec = mTabHost.newTabSpec(tag);
tabSpec.setIndicator(indicator);
tabSpec.setContent(tabContentId);
Your tab indicator view would probably like similar to this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/tabselector"
android:padding="5dp" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tab1icon"/>
</LinearLayout>
Now the important part here is the android:background="#drawable/tabselector" in the LinearLayout. Mine looks like this.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item
android:state_focused="false"
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/tab_unselected_light" />
<item
android:state_focused="false"
android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_selected_light" />
<!-- Focused states -->
<item
android:state_focused="true"
android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_focused_light" />
<!-- Pressed state -->
<item
android:state_pressed="true"
android:drawable="#drawable/tab_pressed_light" />
</selector>
This tabselector.xml is where you will swap #drawable/tab_pressed_light with your #drawable/tab_button_active and #drawable/tab_unselected_light with #drawable/tab_button_inactive
Be sure to check that all of your drawables that go into your tabselector.xml do not have the blue strips along the bottom. As I look at your image I can see little 5px gaps along that strip this is what gave me the idea that the strip was not from your TabWidget. Hope this helps.

For TabLayout:
Just Use app:tabIndicatorColor="#android:color/transparent"
<android.support.design.widget.TabLayout
android:id="#+id/profile_album_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:theme="#style/AppTheme.AppBarOverlay"
app:tabBackground="#drawable/tab_background"
app:tabIndicatorColor="#android:color/transparent"
app:tabPadding="#dimen/common_margin" />

Add this to your TabLayout XML:
app:tabIndicator="#null"

there is one line answer to that
you have only to change the color of the indicator into a transparent
color.xml
<color name="transparent2">#00000000</color>
and put this line to your tabwidget
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.transparent2));
or
app:tabIndicatorColor="#color/transparent2"

Try setting the Tab indicator height to zero:
tabLayout.setSelectedTabIndicatorHeight(0);

Use tabLayout.setSelectedTabIndicator(0).
tabLayout.setSelectedTabIndicatorHeight(0) is now deprecated and tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT) won't perform as well because it uses transparency.

Use
tabLayout.setSelectedTabIndicator(null);
This will set the selected indicator drawable to null.

Use this app:tabIndicator="#null"
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicator="#null"
app:tabMode="fixed" />

Set attribute android:tabStripEnabled="false" for your TabWidget.

I looked for a long time to remove the ugly holo menu bar
tried everything. accidentally used this code for another reason and it thank god removed it.
for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FF0000")); // unselected
TextView tv = (TextView)tabhost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); //Unselected Tabs
tv.setTextColor(Color.parseColor("#ffffff"));
}
Source: Android tabhost change text color style

You can simply use this method on your tablayout to hide the tab indicator.
tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);

here what I use, since the tabIndicator.setSelectedTabIndicatorHeight(0); is depcrecated
use tabIndicator.setSelectedTabIndicator(0);

For the best setting app:tabIndicatorHeight="0dp" worked for me.

I assume you are using ActionBarSherlock. The problem with using a TabWdiget is, that it is not part of ABS, so it will look "native" for each Android Version. For me, the best approach for tab navigtion with ABS is to use a ViewPager and ViewPagerIndicator and style the indicator. Downside is, that your tabs must be fragments. If you need your tabs to be activities then you should take a look if the guys at HoloEveryhwhere have managed to add the TabWidget.

tabHost.getTabWidget().setStripEnabled(false);
tabHost.getTabWidget().getChildAt(1).setBackgroundColor(getResources().getColor(R.color.tabcolor));
tabHost.getTabWidget().getChildAt(2).setBackgroundColor(getResources().getColor(R.color.tabcolor));
More info here