I am trying to style the material buttons using the new styles offered by the implementation 'com.google.android.material:material:1.0.0'
library. The issue is that the buttons are not styling properly. For example, I have 2 different activities using the exact same theme, with the exact same code for the button but on refuses to use the right style, on the Android preview screen it looks right but in the actual app its not.
Also, I am manually overriding the style of a group of buttons by setting style="myButtonStyleWhatever" but that just gets ignored as well. This is getting very frustrating so I would love if someone could help.
Styles-v11
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyMaterialTheme.Base" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="colorPrimary">#364c70</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<style name="WhiteButtons" parent="Widget.MaterialComponents.Button">
<item name="android:background">#ffff</item>
<item name="android:textColor">#000</item>
</style>
</resources>
Styles-v21
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyMaterialTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
<style name="MyMaterialTheme.Base" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
</resources>
Styles
<resources>
<style name="MyMaterialTheme.Base" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="colorPrimary">#364c70</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<style name="WhiteButtons" parent="Widget.MaterialComponents.Button">
<item name="android:background">#ffff</item>
<item name="android:textColor">#000</item>
</style>
</resources>
Code used for the button
<com.google.android.material.button.MaterialButton
android:id="#+id/get_suggestions"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="#dimen/_65sdp"
android:layout_height="wrap_content"
android:layout_marginStart="163dp"
android:layout_marginTop="83dp"
android:layout_marginEnd="163dp"
android:layout_marginBottom="219dp"
android:text="SEARCH"
android:textSize="#dimen/_9sdp"
app:cornerRadius="100dp" />
Not meant to look like that
<!-- MAIN CONTENT -->
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/xmlns:app="
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:windowSoftInputMode="adjustNothing"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoDragView="#+id/dragger"
sothree:umanoOverlay="true"
sothree:umanoScrollableView="#+id/dragView">
<androidx.drawerlayout.widget.DrawerLayout
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:focusableInTouchMode="true"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:id="#+id/parent"
android:layout_height="match_parent">
<com.mancj.materialsearchbar.MaterialSearchBar
android:id="#+id/search"
android:layout_width="#dimen/_233sdp"
android:layout_height="#dimen/_58sdp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:elevation="100dp"
android:imeOptions="actionSearch"
sothree:layout_constraintStart_toStartOf="parent"
sothree:layout_constraintTop_toTopOf="parent"
tools:ignore="UnusedAttribute" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:id="#+id/get_suggestions"
android:layout_width="#dimen/_65sdp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginTop="10dp"
app:cornerRadius="100dp"
android:text="SEARCH"
android:textSize="#dimen/_9sdp"
sothree:layout_constraintEnd_toEndOf="parent"
sothree:layout_constraintTop_toTopOf="parent" />
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/mapview"
android:layout_width="match_parent"
android:layout_height="match_parent"
mapbox:mapbox_cameraTargetLat="46.885"
mapbox:mapbox_cameraTargetLng="24.679"
mapbox:mapbox_cameraTilt="20"
mapbox:mapbox_cameraZoom="4"
mapbox:mapbox_styleUrl="mapbox://styles/sudafly/cjm89d4011nu02smk5a7e0d8h"
sothree:layout_constraintBottom_toBottomOf="parent"
sothree:layout_constraintEnd_toEndOf="parent"
sothree:layout_constraintStart_toStartOf="parent"
sothree:layout_constraintTop_toTopOf="parent">
</com.mapbox.mapboxsdk.maps.MapView>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/nav_menu"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/navigation_menu"
/>
</androidx.drawerlayout.widget.DrawerLayout>
<!-- SLIDING LAYOUT -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/dragView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:clickable="true"
android:focusable="false"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="68dp"
android:background="#2a2e41"
android:id="#+id/dragger"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="#string/search_for_airports"
android:textColor="#d2d4e0"
android:textSize="20dp" />
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
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:id="#+id/drag"
android:background="#eceff1">
<LinearLayout
android:id="#+id/Lin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eceff1"
android:elevation="#dimen/_20sdp"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.google.android.material.tabs.TabLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp">
<include layout="#layout/charts_v2" />
<include layout="#layout/content_main" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
The styles you've posted don't make a ton of sense.
You are showing ToolBarStyle and WhiteButtons styles but you're not using them anywhere.
You have MyMaterialTheme (as opposed to MyMaterialTheme.Base) in one of the files; I hope you aren't expecting this to be automatically inherited from by MyMaterialTheme.Base, since specifying a parent overrides the dot-notation inheritance.
All three files have the same contents for MyMaterialTheme.Base; why bother specifying it in three places?
Additionally, none of the styles you've posted seem like they would affect MaterialButton widgets (except for colorPrimary). So it's hard to know exactly where your problem lies.
All that said, the list of attributes supported by MaterialButton is available in the GitHub documentation. Notably, android:background is not supported by MaterialButton. From the JavaDoc:
Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.
I suspect that what you're seeing is a combination of different colorPrimary definitions on the two screens and the fact that android:background is not supported.
If you want to manually override the button's background color, use the app:backgroundTint attribute on your <MaterialButton> tag. If you want to specify that in a <style> tag, it doesn't use a namespace:
<item name="backgroundTint">#color/your_background_color</item>
Related
I'm pretty new to Android, and trying to define a style for my layout.
My layout is as follows:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="10dp"
app:cardCornerRadius="20dp"
app:cardPreventCornerOverlap="true">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/background_test"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/transparent_white"
android:orientation="vertical">
<TextView
android:id="#+id/title"
style="#style/TitleScrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
<TextView
android:id="#+id/subtitle"
style="#style/SubtitleScrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
In my style.xml:
<style name="Title" parent="#style/TextAppearance.MaterialComponents.Headline5">
<item name="android:text">Long Long Title</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">22sp</item>
<item name="android:textColor">#color/primaryDark</item>
</style>
<style name="TitleScrollable" parent="Title">
<item name="singleLine">true</item>
<item name="maxLines">1</item>
<item name="android:ellipsize">marquee</item>
<item name="android:marqueeRepeatLimit">marquee_forever</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
</style>
But my title is still wrapping to next lines.
When i use this style elsewhere it works fine.
When adding maxLines=1 in the layout it works fine.
How can I put the circular imageView on top of the cardView like in this design? I want to use XML to do this.
you can achieve something similar that you can extended or enhance using the blow code
XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:background="#2D2D2D"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:orientation="horizontal"
android:id="#+id/guideline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent=".3"
/>
<com.google.android.material.card.MaterialCardView
style="#style/CardViewStyle"
android:id="#+id/cardview"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="48dp"
app:cardBackgroundColor="#F3C623"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toBottomOf="#id/guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.8" />
<com.google.android.material.imageview.ShapeableImageView
app:shapeAppearanceOverlay="#style/circleImageView"
android:id="#+id/image"
android:src="#mipmap/ic_launcher"
android:padding="1dp"
android:elevation="5dp"
android:layout_marginEnd="12dp"
android:layout_width="220dp"
android:layout_height="220dp"
app:layout_constraintTop_toTopOf="#id/guideline"
app:layout_constraintBottom_toTopOf="#id/guideline"
app:layout_constraintEnd_toEndOf="#id/cardview"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
styles.xml
your Apptheme Should extend MaterialComponentstheme
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="CardViewStyle" parent="#style/Widget.MaterialComponents.CardView">
<item name="shapeAppearanceOverlay">#style/MaterialCardViewRounded</item>
</style>
<style name="MaterialCardViewRounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">48dp</item>
<item name="cornerSizeTopLeft">0dp</item>
<item name="cornerSizeBottomRight">48dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
<style name="circleImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
buid.gradle
add the matrial comonent dependance
implementation "com.google.android.material:material:1.2.1"
My title bar looks like this:
I'm trying to make it transparent to get only the navigation icon & map full screen into the map view, but every time I am trying the transparent code to make the bar transparent it's ended up showing the white color.
I also try ed NoAction bar but its still ended up showing a white title bar.
Home_activity.xml
<RelativeLayout 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:background="#android:color/transparent"
android:scrollbars="horizontal">
<RelativeLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:popupTheme="#style/Theme.AppCompat.NoActionBar">
</android.support.v7.widget.Toolbar>
<!-- The first child in the layout is for the main Activity UI-->
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignTop="#+id/drawer_layout"
android:scrollbars="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
</LinearLayout>
<!-- Side navigation drawer UI -->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:itemBackground="#drawable/naviagtionview_statecolor"
app:itemIconTint="#color/black"
app:itemTextColor="#color/black"
app:menu="#menu/my_navigation_items">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
style.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/hint</item>
<item name="drawerArrowStyle">#style/MyDrawerArrowToggle</item>
<item name="colorPrimaryDark">#color/hint</item>
<item name="colorAccent">#color/black</item>
<item name="actionBarStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="android:backgroundStacked">#android:color/transparent</item>
<item name="android:displayOptions">showTitle</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="drawerArrowStyle">#style/MyDrawerArrowToggle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/black</item>
</style>
<style name="MyDrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/black</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="EditText.Login" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#android:color/black</item>
<item name="android:textColorHint">#android:color/darker_gray</item>
<item name="colorAccent">#color/yellow</item>
<item name="colorControlNormal">#color/black</item>
<item name="colorControlActivated">#color/yellow</item>
</style>
But it's showing like this:
I had a similar issue,
I used different ways to implement it,
you may try this to make toolbar transperent.
I've been stuck with the follow issue. I have a 'normal' card view with is showing up in funny different grey colours. I don't know why.
It looks like this:
Why isn't it the normal white?
Here is the xml for the item_row
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="5dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp">
<TextView
android:id="#+id/textViewItemName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/checkBox"
android:layout_toStartOf="#+id/checkBox"
android:textColor="#000"
android:layout_centerVertical="true"
android:text="TextView" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Here is the layout_content for the activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/content_choose"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.apps.reuven.choosepicture.ChoosePicturesToDisplayActivity"
tools:showIn="#layout/activity_choose_to_display">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewToDisplay"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
The theme in the manifest
android:theme="#style/AppTheme">
Which is...
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Change your Theme to this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
You are using a Dark theme Theme.AppCompat.NoActionBar that's why your view background colors are showing darker.
Try using a Light theme Theme.AppCompat.Light.NoActionBar.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
If you don't want to change the theme for in case you need white toolbar icons (Back arrow, title color, overflow menu icon), you can change this behavior in your theme.
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="cardViewStyle">#style/CardView.Light</item>
</style>
Using android.support.v7.widget.Toolbar, I find that it displays a weird shadow in devices with API > 19.
How it looks in Android 4.4.2 API 19:
How it looks in anything with API >19:
I'd need it to look like it does with API 19, where it does not have any shadows and rather "integrates" with the background.
Since I'm using this Activity with a DrawerLayout, I have 2 layouts.
activity_main_tabbed.xml
<?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/main_tabbed_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="right">
<include
layout="#layout/activity_main_tabbed_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true" />
</android.support.v4.widget.DrawerLayout>
activity_main_tabbed_content.xml
<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:background="#drawable/activity_background_vertical"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="#android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
android:elevation="0dp"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/btn_toolbar_back"
android:src="#drawable/left_white_arrow"
android:visibility="gone"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/btn_back_toolbar_margin_right"
android:minHeight="#dimen/btn_back_toolbar_height"
android:minWidth="#dimen/btn_back_toolbar_width"
android:layout_gravity="left|center_vertical"/>
<rokk3rlabs.dingding.utils.views.FontTextView
android:layout_width="wrap_content"
android:textSize="#dimen/toolbar_text_size"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimary"
android:text="#string/toolbar_title"
android:layout_gravity="left"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
app:tabMode="fixed"
android:elevation="0dp"
app:tabGravity="fill"/>
</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" />
</android.support.design.widget.CoordinatorLayout>
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- 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:windowBackground">#drawable/activity_background</item>-->
<item name="android:textColorPrimaryInverse">#color/colorPrimary</item>
<item name="android:textColorSecondaryInverse">#color/colorPrimary</item>
<item name="android:colorBackground">#color/colorPrimaryDark</item>
<item name="android:colorForeground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
<item name="android:windowBackground">#color/colorPrimary</item>
</style>
styles.xml (v21)
<style name="AppTheme" parent="Theme.AppCompat">
<!-- 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:textColorPrimaryInverse">#color/colorPrimary</item>
<item name="android:textColorSecondaryInverse">#color/colorPrimary</item>
<item name="android:colorBackground">#color/colorPrimaryDark</item>
<item name="android:colorForeground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
<item name="android:navigationBarColor">#color/navigationBarColor</item>
<item name="android:statusBarColor">#color/statusBarColor</item>
<item name="android:windowBackground">#color/colorPrimary</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
Either make the AppBarLayout have a solid background or set its app:elevation="0dp" (not android:elevation).
Note: Why do you set every color to colorPrimary is puzzling. Purple text over purple background is not going to work. It also makes it impossible to know where the appbar layout ends and the activity background begins in the screenshot.