Develop Reference

TabLayout gravity center is not working

I have a TabLayout, where I want the tabs to be displayed in the center of the screen.
Below is the XML for my TabLayout.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />
However, my Tabs are still displayed to the left, and I'm unable to center them in the Activity.
What I'm getting is this:
What I really want is:
Can somebody please tell me what I'm doing wrong here? If you need additional information regarding the rest of the XML, please let me know.

Tab gravity only effects MODE_FIXED.
One possible solution is to set your layout_width to wrap_content and layout_gravity to center_horizontal

Ok, so the problem was with layout_width="match_parent"
When I changed that to layout_width="wrap_content", it solved my problem.
The final XML is:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />

android TabLayout how to show shadow top

android TabLayout how to show shadow top
im using tablayout is bottom how to make shadow as like this
please help me ? shadow show top
<RelativeLayout
android:id="#+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".GlobalHub.GlobalActivity">
<android.support.v4.view.ViewPager
android:id="#id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/tablayout" />
<android.support.design.widget.TabLayout
singleLine="true"
android:id="#id/tablayout"
app:tabTextColor="#color/black"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorColor="#color/jetColor"
app:tabTextAppearance="#style/MyCustomTabLayout"
app:tabIndicatorHeight="6dp"
android:layout_width="match_parent"
android:layout_height="#dimen/_46sdp"
android:layout_alignParentBottom="true"
android:background="#drawable/shadow_tablayout"
/>

To get the shadow, use android:elevation attribute on the TabLayout in your xml file :
android:elevation="10dp"
read more about using elevation and defining shadows in Android here
If you just want the top shadow then try these 2 solutions :
OR
Wrap the Tablayout in a LinearLayout and set the background of LinearLayout as the 9patch image with top shadow.
OR
Put an ImageView above your TabLayout and set its src to be a vertical GradientDrawable defined in XML, as explained here

Overlaying content above AppBarLayout using new Material Design

I want to achieve something like that. (not the FAB or the Snackbar). How can i create a layout, overlaying the AppBarLayout? Like this! (For Example)
Like Play Store:
My AppBarLayout with CoordinatorLayout and NestedScrollView with RelativeLayout as content looks like this:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_118sdp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/mpc_pink"
app:expandedTitleMarginStart="#dimen/_40sdp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<de.mypostcardstore.widgets.ItemImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#color/mpc_pink"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/article_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="#color/mpc_pink"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent".....>
It would be awesome if someone could help me out. I can not find anything on the internet...
Thanks in advance!

Just add something like
app:behavior_overlapTop="64dp"
to your NestedScrollView and it will be placed above the expanded toolbar.
In addition, you should add something like
app:expandedTitleMarginBottom="70dp"
to your CollapsingToolbarLayout so the title does not appear under your overlaid scroll content.

It's quite simple, really. You could achieve that by using a combination of ToolBar, FrameLayout, and your content view (could be a ListView like your first example, or anything).
The idea is to make your FrameLayout possess the same color as your ToolBar, giving the illusion of ToolBar being much larger than it is. Then all that is left to do is to make your content view be the last (or in API 21 and above: possess the highest elevation attribute) so that it would appear as if it floats above the aforementioned FrameLayout.
See my illustration below:
Now that you got the big idea, below is some real live XML snippet for doing such thing. (I actually use this layout in one of my apps) :
<!-- Somewhere in your layout.xml -->
....
<android.support.v7.widget.Toolbar
android:id="#+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="72dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
<FrameLayout
android:id="#+id/v_toolbar_extension"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_below="#+id/tb_toolbar"
android:background="?attr/colorPrimary"
android:elevation="2dp"/>
<!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
<FrameLayout
android:id="#+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tb_toolbar"
android:elevation="3dp"/>
....
Note that my ly_content has higher elevation value than that of v_toolbar_extension. This is what will give you that desired 'overlaid toolbar' effect.
Last but not least, you would want to add this line somewhere in your activity's onCreate() :
/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);
What that codes woud do is to set your ToolBar elevation to zero; removing preset shadows that were given as a default to ToolBars. If you don't do this, said shadow will create a "seam" between your ToolBar and your FrameLayout, thus breaking the illusion of those two being the same.
p.s., It is also important to give your content view a padding on each side. Doing so, your content view will not cover the entire width of the screen (which would render this effect useless).
Note: I see some good answers here that mentioned the absence of FrameLayout and instead making the ToolBar taller. While in theory it might work as well as my proposed solution, you might have problems when trying to manipulate scrolling; by doing that, you won't be able to separate ToolBar and its extension. You'll be forced to either make the Toolbar static or scroll all of the ToolBar altogether (makes scrolling a bit weird).
Add to that, the fact that you can't easily assign a custom drawable into a Toolbar. Hence makes it hard to follow the Google Play example you've given above. While if you're using my solution, all you'd need to do is just make your Toolbar transparent and assign the drawable to the FrameLayout instead.

I had a similar requirement and I achieved it as below.
Your activity theme should extend Theme.AppCompat.Light.NoActionBar.
I created a Layout XML File as:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the Activity should be something like this:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
setSupportActionBar(maintoolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
I got a view like this :

I did try to implement effects like you referred which is called Card Toolbar in Android, and it did work as expected. Here is my layout, Take a look at it:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_material_light" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_double_height"
android:background="?attr/colorPrimary" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/cardview_toolbar_spacer"
android:layout_marginRight="#dimen/cardview_toolbar_spacer"
android:layout_marginTop="?attr/actionBarSize"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.12"
android:background="#android:color/black" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Hope you'll be inspired.

Android API 21 Toolbar Padding

How do I get rid of the extra padding in the new Toolbar with Android SDK API version 21 (the support library)?
I am talking about the red arrows on this picture:
Here is the code I am using:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:padding="0dp"
android:layout_margin="0dp">
<RelativeLayout
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:padding="0dp"
android:background="#000000">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</Toolbar>
As you can see I've set all the relevant padding to 0, but there is still padding around the Spinner. What have I done wrong or what do I need to do to get rid of the extra padding?
Edit
Some have questioned why I am trying to do this.
As per the Material Design specs, the spinner should be 72dp from the left side
I need to neutralize the padding Google have put there in order to properly place my spinner:
Edit 2
As per Chris Bane's answer below I set the contentInsetStart to 0. For the support library you will need to use the app namespace:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="#dimen/action_bar_height"
android:background="?attr/colorPrimary"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v4.widget.DrawerLayout>

The left inset is caused by Toolbar's contentInsetStart which by default is 16dp.
Change this to 72dp to align to the keyline.
Update for support library v24.0.0:
To match the Material Design spec there's an additional attribute contentInsetStartWithNavigation which by default is 16dp. Change this if you also have a navigation icon.

Above answer is correct but there is still one thing that might create issues (At least it did create an issue for me)
I used the following and it doesn't work properly on older devices -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
The trick is here just use the following -
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
and get rid of -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
And now it should work fine throughout all the devices.

Simpley add this two line in toolbar. Then we get new removed left side space bcoz by default it 16dp.
android:contentInsetStart="0dp"
app:contentInsetStart="0dp"

In case someone else stumbles here... you can set padding as well, for instance:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
int padding = 200 // padding left and right
toolbar.setPadding(padding, toolbar.getPaddingTop(), padding, toolbar.getPaddingBottom());
Or contentInset:
toolbar.setContentInsetsAbsolute(toolbar.getContentInsetLeft(), 200);

A combination of
android:padding="0dp"
In the xml for the Toolbar
and
mToolbar.setContentInsetsAbsolute(0, 0)
In the code
This worked for me.

Here is what I did and it works perfectly on every version of Android.
toolbar.xml
<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"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/primary_color"
app:theme="#style/ThemeOverlay.AppCompat"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp" <!-- Add margin -->
android:layout_marginStart="16dp"
android:gravity="left|center"
android:text="Toolbar Title" <!-- Your title text -->
android:textColor="#color/white" <!-- Matches default title styles -->
android:textSize="20sp"
android:fontFamily="sans-serif-medium"/>
</android.support.v7.widget.Toolbar>
MyActivity.java (To hide default toolbar title)
getSupportActionBar().setDisplayShowTitleEnabled(false); // Hide default toolbar title
Result with Keylines Shown

Make your toolbar like:
<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/menuToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/white"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"></android.support.v7.widget.Toolbar>
You need to add
contentInset
attribute to add spacing
please follow this link for more - Android Tips

Update AndroidX toolbar:
<!-- TOOLBAR -->
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_account_title"
android:textColor="#color/color_dark_grey"/>
</androidx.appcompat.widget.Toolbar>

Ok so if you need 72dp, couldn't you just add the difference in padding in the xml file? This way you keep Androids default Inset/Padding that they want us to use.
So: 72-16=56
Therefor: add 56dp padding to put yourself at an indent/margin total of 72dp.
Or you could just change the values in the Dimen.xml files.
that's what I am doing now. It changes everything, the entire layout, including the ToolBar when implemented in the new proper Android way.
Dimen Resource File
The link I added shows the Dimen values at 2dp because I changed it but it was default set at 16dp. Just FYI...

((Toolbar)actionBar.getCustomView().getParent()).setContentInsetsAbsolute(0,0);

How to change the current tab highlighter color in Android ViewPager?

Here is my layout inside ViewPager. I would like to change the color of the current tab highlighter which is below the text. Actually it is showing in black color. But I don't know whether it is a color by default or not. And also I have one more doubt. If I use PagerTitleStrip this tab highlighter doesn't appear. Is there a way to bring that with titlestrip?
Here is my layout:
<android.support.v4.view.PagerTabStrip android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#color/pager_titlestrip_bg"
android:textColor="#color/pager_titlestrip_text"
android:paddingTop="5dp"
android:paddingBottom="4dp" >
</android.support.v4.view.PagerTabStrip>

This just works.
PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_title_strip);
pagerTabStrip.setDrawFullUnderline(true);
pagerTabStrip.setTabIndicatorColor(Color.RED);
Thanks!

It can be done in both programmatically with jAVA or with XML
By XML
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#android:color/white"
android:layout_height="wrap_content" />
Or more simply you can solve this Code aswell
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
Similarly to change the Height
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

This works in my project.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
app:tabGravity="fill"
app:tabIndicatorColor="#color/text3"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/text3"
app:tabTextColor="#000" />