Develop Reference

Cannot set TabItem text and icon size is always the same size

Basically I want to increase the size of the icon and maybe set text instead but I want to set text per xml or over the Tablayout to the current tab item I don't get anything and can't increase the image size of the tab item ?
How to make the text visible and how to change size of the icon in Tabitem ?
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabsMain"
android:layout_width="match_parent"
android:layout_height="56dp">
<com.google.android.material.tabs.TabItem
android:layout_width="56dp"
android:layout_height="56dp"
android:icon="#drawable/ic_testiranje"
android:text="SDSDSDS" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/ic_homeblue"
android:text="SDSDSDS" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>

You can give a style tag to default tab layout by providing its properties like textSize, fontFamily etc.
<style name="TabTheme">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">true</item>
<item name="android:fontFamily">#font/normal</item>
<item name="android:textColor">#color/colorDefault</item>
<item name="android:includeFontPadding">false</item>
</style>
and use in your activity/fragment.xml as
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabBackground="#android:color/transparent"
android:layout_gravity="center_horizontal"
app:tabMode="scrollable"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="#color/colorBlack"
app:tabTextAppearance="#style/TabTheme" />
OUTPUT

fitSystemWindows with windowTranlucentStatus and windowTranslucentNavigation makes Toolbar too tall

I'm trying to make my app bleed under the status bar and the navigation bar. I got the layouts to work using fitSystemWindows = true with just the status bar translucent but when I make the navigation bar as well, the toolbar appears to react as if it needs to fill under the status bar and the notification bar.
The toolbar appears to function normally when in landscape for some reason.
This double "translucent" bar effect also makes the NestedScrollView extends beyond the bottom of the page. I am also not sure how to make the FAB fit.
On another note, I originally wrote the layout with a CoordinatorLayout. This added the extra problem that the NestedScrollView then scrolls up to the bottom of where the toolbar should be, not where it is. I think, however, that the NestedScrollView respected the bottom screen boundary properly with CoordinatorLayout.
Here's the xml for the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="74dp"/>
</android.support.v4.widget.NestedScrollView>
<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="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/nav_color_1_bright"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:navigationContentDescription="#string/open_nav_menu"
app:navigationIcon="#drawable/ic_dehaze_white_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:onClick="createNew"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/darkAccent"
app:fabSize="normal" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:itemBackground="#drawable/nav_item">
<ListView
android:id="#+id/drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:fitsSystemWindows="true" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I apply the following 'Light Theme' to the Activity programmatically.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name ="android:windowTranslucentNavigation">true</item>
</style>
<style name="LightTheme" parent="AppTheme">
<item name="android:colorPrimary">#color/lightPrimary</item>
<item name="android:colorPrimaryDark">#color/lightPrimaryDark</item>
<item name="android:colorAccent">#color/lightAccent</item>
<item name="android:navigationBarColor">#color/lightPrimaryDark</item>
<item name="actionOverflowButtonStyle">#style/OverflowMenuButtonStyleDark</item>
</style>
Here's a preview of the layout: (bigger version here)

Translucent Status bar makes the layout out of bounds(showing view behind)

I want to achieve a translucent status bar, and I found this,
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
yes it made my status bar translucent when my collapsing toolbar/appbar is expanded
but the problem is the one of the views(imageView) became behind on one of the other views(seems like its parent layout went out of bounds, please see the attach image)
opaque status bar, please see the image at the bottom
before that I didnt have any issues at all like this
non-translucent status bar
this is my xml, i tried to remove as much as possible, please bear with me,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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="#android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/mHomeAppBar"
android:layout_width="match_parent"
android:layout_height="430dp"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/image_view_on_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="#drawable/ic_near_me_white_18dp"/>
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/mHomeToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/mHomeScrollView"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/mLayoutTabComponents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<android.support.design.widget.TabLayout
android:id="#+id/mHomeTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/mHomeViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
and this is the style
<style name = "AppThemeNoActionBar" parent =
"Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="android:subtitle">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:background">#null</item>
<!-- Support library compatibility -->
<item name="background">#null</item>
</style>
Im trying everything around, I tried to put app:layout_behavior="#string/appbar_scrolling_view_behavior" in every parent container and layout, and I tried to remove the TabLayout's tabGravity from fill to nothing, but still no luck :(, can anyone help me figure whats wrong, I know Im missing something on the style, but please put me in the right direction, again, I apologise if the xml code is a bit long, thanks in advance!
Update: I removed all the unnecessary view contents on the layout xml. anyone? :(

I manage to solve my problem by setting
fitSystemWindows
to false
that resulted the status bar to remove the padding it generates, then I add a 25dp top padding on the next layout which is the AppBarLayout that contains all the child views, now it works perfectly as I wanted.
thanks to these posts, if everyone encounters the same, or related issue with translucent status bar, please have a look here
Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment
Using windowTranslucentStatus with CollapsingToolbarLayout

Hide Toolbar on scroll wont work properly [CoordinatorLayout]

I have a viewpager with 3 fragments which are using recyclerviews. I am trying to hide the toolbar when the user scrolls the recycled view. My problem is that the toolbar hides/shows when the user scrolls but it does not hide fully. I don't understand what I am doing wrong. To illustrate what exactly is happening I am including two pictures with the two states of the toolbar (hidden and shown).
NOTE: one thing that I noticed when the toolbar is hiding. It does not go "under" the system status bar like it should but goes above it.
shown:
hidden:
As it can be seen, the toolbar is not fully hidden. I can see parts of the Toolbar title and overflow icon at the right.
This is my main_layout xml:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="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="com.studentsins.lust.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/NavigationTab"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<include layout="#layout/content_main"/>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="#+id/floatingActionMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
fab:fab_addButtonColorNormal="#color/blood_orange"
fab:fab_addButtonColorPressed="#color/dirtyWhite"
fab:fab_addButtonPlusIconColor="#color/dirtyWhite"
fab:fab_addButtonSize = "normal"
fab:fab_labelStyle="#style/menu_labels_style"
fab:fab_labelsPosition="left"
app:layout_anchor="#id/viewpager"
app:layout_anchorGravity="bottom|end">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/createPlanBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_title="Create a plan"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_event_white_48dp"
fab:fab_colorPressed="#color/dirtyWhite"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/changeStatusBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_textsms_white_48dp"
fab:fab_title="Change status"
fab:fab_colorPressed="#color/dirtyWhite"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>

Found a workarround to the problem. in v21/Styles.xml
I had to change the "android:statusBarColor" from "transperant" to any color.
<resources>>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/tab_bg</item>
</style>

The overlap is occurring because your tabLayout height is greater than your toolbar height. You can fix it by setting the tabLayout height to:
android:layout_height="?attr/actionBarSize"

Material Design - AppCompat toolbar without showing shadow

I am using the toolbar from AppCompat V7 to replace the previous action bar and want to have the shadow of toolbar like the previous actionbar. but the toolbar doesn't have shadow by default, and I have tried the fixes mentioned from reddit. but without luck.
the code to set the shadow:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
The toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="?attr/actionBarSize"
android:background="#F1F1F1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
foreground="?android:windowContentOverlay">
the activity layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:id="#+id/drawer_layout"
android:layout_height="match_parent">
<!-- activity view -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout android:id="#+id/fragment_container"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<!-- navigation drawer -->
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_gravity="start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:divider="#eee"
android:background="#EEE"
android:id="#+id/drawer_header">
<ImageView
android:id="#+id/user_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/user_icon"
android:src="#drawable/ic_action_person"
android:paddingTop="0dp"
android:paddingLeft="0dp"/>
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/user_icon"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:textSize="14sp"
android:text="#string/not_logged_in"
android:paddingTop="0dp"
android:paddingBottom="0dp"/>
</RelativeLayout>
<ListView
android:id="#+id/drawer_list"
android:layout_below="#+id/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="0dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Setting in the style.xml:
<style name="myAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowContentOverlay">#drawable/drawer_shadow</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/black</item>
</style>
Can anyone help?
thanks!
update 1: with the suggestion from Willis, I get the shadow displayed, but it is not below the toolbar, instead it is to the left of the toolbar.
Update 2: I have noticed that if I don't set the windowContentOverlay in toolbar.xml and styles.xml, the shadow is actually on the top of the toolbar.

Those two are completely different shadows. The vertical one is that of DrawerLayout. It's supposed to be showing beside expanded drawer. The horizontal one is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.
Note: Use the same gradient but horizontal as the drawer shadow for best results.

You can set the amount of shadow by using the setElevation method. For example:
getSupportActionBar().setElevation(25);
Increasing/decreasing the value passed to setElevation will consequently increase/decrease the presence of the shadow effect.

To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
To use Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'