Develop Reference

Android TabLayout Inconsistent Tab Label Size

Problem
To my understanding, the guidelines of material design mention that tab single-line labels should not be resized: https://www.google.com/design/spec/components/tabs.html#tabs-usage
However, my tabLayout changes the size of a label and looks awful as seen in this picture:
S6-TabMode-Fixed
TabLayout Code:
mTabLayout = (TabLayout) findViewById(R.id.company_tabs);
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.setBackgroundColor(actionbarColor);
mTabLayout.setTabTextColors(Color.WHITE, Color.WHITE);
mTabLayout.setSelectedTabIndicatorColor(Color.WHITE);
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
TabLayout XML:
<android.support.design.widget.TabLayout
android:id="#+id/company_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Attempted:
Changed tabmode to TabLayout.MODE_SCROLLABLE, this resulted in tabs having the correct text size, but being left-aligned.
Experimented with favorites label, shortening the text to "favorit" seemed to fix the tab size from being resized, but this is not an acceptable solution
Question: What is causing this behavior, and what can be done so that the tabs fit the full width of the screen, but the text size of the labels remains unchanged?

Set NavigationDrawer's ListView margin programmatically

I am currently struggling to design my application the way i want to.
In my app i am using a NavigationDrawer and different fragments. By clicking on an item in the NavigationDrawer i swap out the fragment that is currently active.
There is one main fragment which shows a map and doesn't show a toolbar. When I switch to another fragment I want to show my toolbar and let the user interact with it.
Now when I show the toolbar I have to set the top margin of the NavigationDrawer to the size of the toolbar so it doesn't get overlapped.
When I am showing the toolbar I set the margin of the NavigationDrawer's listview like this:
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) mDrawerListView.getLayoutParams();
params.setMargins(0, drawerMarginTop, 0, 0);
mDrawerListView.setLayoutParams(params);
mDrawerListView.requestLayout();
The outcome is like the complete opposite of what i expect. It seems like the margin is applied to the bottom of the view.
Screenshot:
Another thing that annoys me is that the toggle-arrow of the toolbar is not centered correctly. It's a little bit higher than it should be, so it overlaps the system bar in the top and doesn't fill the whole size of the toolbar. I tried to make this clear in the following picture:
If you need any xml or code just let me know and I will edit my question.
Thank you in advance!
EDIT 1+2:
My toolbar style:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/my_color"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
EDIT 3:
The Problem with the toggle-arrow not being centered is fixed now. Thanks to Alchete.
Unfortunately the NavigationDrawer is still buggy. I found out that if I open and close the NavigationDrawer many times it somehow changes its layout at one time and the margin is set correctly... Is there any way to force this top happen immediately?
After many times of opening and closing the drawer it looks like this: (Exactly what I want it to look like)
There must be a way to force this immediately, right?

Your alignment issue is most likely due to your toolbar height. You should be setting the toolbar height as follows:
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize">
Here's the same issue for reference: android.support.v7.widget.Toolbar icon alignment issue
I would also be using Google's IOSched app for reference on how to set these items up properly. You can find all the code on Github.
Here are their layout files. Scroll down to see their toolbar/navdrawer layouts: https://github.com/google/iosched/tree/dfaf8b83ad1b3e7c8d1af0b08d59caf4223e0b95/android/src/main/res/layout
And, also note that Google's reference design is to OVERLAP the toolbar with the navdrawer -- which is not how you have it. And, the right margin should be equivalent to the toolbar height.
See here: http://www.google.com/design/spec/patterns/navigation-drawer.html

I'm not 100% about this but it looks like you're setting the ViewGroup layout params to be of type MarginLayoutParams. Instead, set the margin on a 'normal' root ViewGroup type e.g. RelativeLayout and pass that to the View:
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT);
params.setMargins(0, drawerMarginTop, 0, 0);
mDrawerListView.setLayoutParams(params);
mDrawerListView.requestLayout();
You may want to change MATCH_PARENT to WRAP_CONTENT depending on your xml.

how to change the tab widget size in TabHost

In my application i use the tabhost in linear layout, tabhost contains 4 tabs. The size of the tabwidget is very very high and it shows title very small. Can any one help me how to reduce the size of tabwidget.

I would insist to create custom Tabs using setIndicator(View). So, create a TextView of your desired size and set it to the TabWidget. Here is an Tutorial for the same with Example.
You can just inflate a TextView and set it to the TabWidget using
View view = LayoutInflater.from(context).inflate(R.layout.your_custom_tab-layout,
null);
TextView tv = (TextView) view.findViewById(R.id.my_text_view);
TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tv).
setContent(intent);
mTabHost.addTab(setContent);

I'm not clear on exactly what you're looking to do here, but I'll make a guess at it.
If you don't want space to be taken up by graphics (in other words, have text only) you can set the height and graviy of the widget to effectively remove the space that is used by the graphic, making for a much more compact tab label (vertically).
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:gravity="bottom" />

How do I layout a button bar with buttons of different heights?

How do I go about implementing a button bar with buttons of different shapes and heights? As an example (please excuse my poor drawing skills for this quick mockup):
The example bar has 3 buttons, with the middle button (3) a different shape and height than the other 2 buttons (1,2). The button bar will be a view that is included and merged into other views so as to seem to float on top of the parent view.
I was thinking of implementing buttons 1 and 2 into a layout, and then button 3 as another layout that I then merge with the first two button's layout.

like my previous comrades said, you need some kind of layout or container that can have a background (if you wish for button #3 to hoover above it) then use relative layout for mixing the two the disadvantage of this other than complexity is that youcannot relate to the other two buttons since they reside in a different layout.
More elegant solution may be to have a special background drawable that can:
have a method setCurrentHeight() that will specify the height the actual viewable section should have the rest will be filled with transparent color.
override it's own draw so just before it's drawing it will have a callback called, call back you can register yourself to.
then you can register the callback in your activity to take the current position of the #3 button and set the height accordingly, this way you are still with one layout with special drawable as background.
A customized LevelDrawable might do the trick.

I would layout this bar as follows:
A RelativeLayout as a container for the rest, with height set to wrap_content and alignparentbottom = true
An ImageView for the bar
2 Buttons with a transparent background (Button 1 and 2)
Button 3 is a custom Button with a custom Image of a trapezoid as background
So you will have a Layout similar to this:
<RelativeLayout
...>
<ImageView
.../>
<Button
... Button 1 />
<Button
... Button 2 />
<Button
... Button 3 />
</RelativeLayout>

I don't exactly know that this will work, and I can't test it, but you might give something like this a try; I believe it can all be done elegantly through XML.
Have a RelativeLayout (id:mainLayout) that will contain all of your views, wrap_content for both dimensions.
Have a blank View as your first child that will serve as your background bar
Set the View's background color/image to what you want; layout_width to fill_parent; layout_height to wrap_content; layout_alignTop="#id/leftButton"; layout_alignBottom="#id/leftButton".
Add an ImageButton for your center button (id:bigButton), wrap_content for both dimensions; layout_centerInParent="true".
Add an ImageButton for your left button (id:leftButton), wrap_content for both dimensions; layout_toLeftOf="#id/bigButton"; layout_centerInParent="true".
Add an ImageButton for your right button (id:rightButton), wrap_content for both dimensions; layout_toRightOf="#id/bigButton"; layout_centerInParent="true".
In my head, I believe this works, but I could be off. Regardless, something to think about, and I hope it helps you find a solution. :)

Better you can tablelayout with different button styles or relative layout for button "3"

TabHost on Facebook for Android

Anyone know how facebook did this:
From what I know we cannot change the height of tabhost. I'm guessing that they laid the "Frank Cho" view over the tabhost to give it the appearance of being shorter but I may be wrong. Anyone know what's going on?

You actually can have custom looking tab widgets. You need to set the tab indicator to some custom layout (with your drawables) and you should be good to go.
Here's an semi-example:
final TabHost host = getTabHost();
final TextView indicator = (TextView) getLayoutInflater().inflate(
R.layout.tab_indicator,
getTabWidget(), false);
indicator.setText("Tab title");
host.addTab(host.newTabSpec("The tab tag")
.setIndicator(indicator)
.setContent([put your content here]));
}
Where the tab_indicator layout can look like this:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab_label"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:textSize="14sp"
android:textStyle="bold"
android:minHeight="38dp"
android:background="#drawable/minitab" />
The minitab drawable is a drawable item selector (so you need to have an image for selected, default, pressed, and unselected). The facebook app used some white drawable image for the default tab and the blue gradient drawable for the unselected tabs.
Check out the Google IO Schedule app for a full working example: http://code.google.com/p/iosched/ (and specifically the TrackDetailActivity.java)

Somebody else had what I think is the correct answer, but deleted it for some reason...
The height in question is not that of the TabHost, but of the TabWidget.
Try using the version of setIndicator() that takes a View instead of just a String or String plus drawable resource. While I have not played with this yet, my understanding is that it solves this problem nicely.
Be careful, though, that you don't wind up with tabs that are too tough to tap.