Develop Reference

Android: how to change color of back button, font family and text size of title in material tool bar?

I am using a custom material toolbar (showing a back button and activity's title) in my activity. I would like the back button and title to be black in color.
This activity's navigation and status bar (battery, time) is currently immersive. I have tried overriding the default color using material tool bar method using the link below but its not working. The back button is still white in color. And I am not sure why is that so. I even play around to see if the tool bar is showing me open sans, but it does not neither does the changing the textSize work.
How to change color of Toolbar back button in Android?
In my manifest file my activity is using the following theme.
<activity
android:name=".RegisterActivity"
android:theme="#style/CustomActivityTheme">
</activity>
In my custom action_bar_layout.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:fontFamily="#font/open_sans"
android:textSize="24sp"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:theme="#style/MyThemeOverlay_Toolbar2"
/>
</LinearLayout>
In my color file
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#00BEBA</color>
<color name="colorPrimaryDark">#00BEBA</color>
<color name="colorAccent">#F60606</color>
<color name="appBackgroundColor">#00BEBA</color>
<color name="textFieldColor">#000000</color>
</resources>
In my Style file
<resources>
<!-- Base application theme. -->
<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/textFieldColor</item>
</style>
<style name="CustomActivityTheme" parent="AppTheme">
<!-- Customize your theme here. -->
<item name="windowNoTitle">false</item>
<item name="windowActionBar">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowAnimationStyle">#android:style/Animation</item>
</style>
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/textFieldColor</item>
<item name="actionBarTheme">#style/MyThemeOverlay_Toolbar2</item>
<item name="colorControlNormal">#color/colorAccent</item>
</style>
<style name="MyThemeOverlay_Toolbar2" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- This attributes is used by title -->
<item name="android:textColorPrimary">#color/textFieldColor</item>
<!-- This attributes is used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/textFieldColor</item>
</style>
In my registerActivity java code
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
public class RegisterActivity extends AppCompatActivity implements View.OnClickListener{
Toolbar actionBar;
int currentApiVersion;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
Log.d("TestToolBar", "inside Register Activity");
//using custom toolbar instead of custom textView as action bar
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.action_bar_layout);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
actionBar = findViewById(R.id.tvTitle);
actionBar.setTitle(R.string.RegisterActionBar);
hideNavigationBar();
}
public void hideNavigationBar() {
currentApiVersion = android.os.Build.VERSION.SDK_INT;
Log.d("TestToolBar", "api version is " + currentApiVersion);
if (Build.VERSION.SDK_INT <= 21) {
View v = this.getWindow().getDecorView();
v.setSystemUiVisibility(View.GONE);
} else {
this.getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY |
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_FULLSCREEN);
getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimary));
getWindow().setNavigationBarColor(getResources().getColor(R.color.colorPrimary));
}
}
UPDATED.
After using setSupportActionBar(toolbar); It work. But I still need to amend my activity_register.xml. To include my action_bar_layout inside using include. If not my RegisterActivity.java cannot find my toolbar.(null exception error)
The font family can be changed by having a textview inside MaterialToolbar in action_bar_layout.xml

As far as I know, there are simpler ways. In your Toolbar, add the following attribute:
app:titleTextAppearance="#style/ToolbarTheme"
app:navigationIcon="#drawable/ic_back"
Then in styles.xml, add
<style name="ToolbarThemeC" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:fontFamily">#font/lato</item>
<item name="fontFamily">#font/lato</item>
<item name="android:background">#color/White</item>
<item name="android:textSize">24sp</item>
<item name="iconTint">#color/colorPrimary</item>
<item name="android:colorForeground">#color/colorPrimary</item>
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
<item name="actionOverflowButtonStyle">#style/OverFlowTheme</item>
<item name="actionOverflowMenuStyle">#style/OverFlowMenuTheme</item>
</style>
And whatever other attributes you want.

It's working for me.
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/teal_700"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/ic_back"
app:navigationIconTint="#color/purple_700"
app:title="Title" />
MyToolbarStyle:
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">#color/teal_200</item>
<item name="titleCentered">true</item>
<item name="titleTextAppearance">#style/MyTextAppearanceToolbarStyle</item>
</style>
MyTextAppearanceToolbarStyle:
<style name="MyTextAppearanceToolbarStyle" parent="#style/TextAppearance.MaterialComponents.Headline6">
<item name="android:fontFamily">#font/public_sans_italic</item>
<item name="fontFamily">#font/public_sans_italic</item>
<item name="android:textSize">30sp</item>
</style>
Result

BottomSheet - Incorrect Design Behavior

I have been trying to set the Bottomsheet the way Google is using in their apps such as GOOGLE NEWS etc,
This is how Google's Bottomsheet looks like the following
Where my Bottomsheet looks like the following
Stright away you will notice two things,
There are no rounded corners
The navigation at the bottom is not blended
My code for bottomsheet is the following (i removed the controls for simplicity purposes)
MyBottomSheet.xml
<?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:id="#+id/bottom_sheet"
android:elevation="10dp"
android:minHeight="300dp"
app:behavior_peekHeight="120dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginBottom="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--controls here-->
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
And I am calling it in my code as follows
View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
How can I get Rounded corners and make sure the bottom navigation does not go transparent?

To get the Google's modal BottomSheet design, implement it the following way. Start by creating a shape drawable which will be used as background for the bottom sheet:
bg_bottomsheet.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="#dimen/bottom_sheet_corner_radius"
android:topRightRadius="#dimen/bottom_sheet_corner_radius" />
<padding android:top="#dimen/bottom_sheet_top_padding" />
<solid android:color="#color/white" />
Now create a custom style for the BottomSheet widget.
style-v21.xml
<resources>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#color/white</item>
</style>
</resources>
styles.xml
<resources>
<style name="BottomSheet" parent="#style/Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/bg_bottom_sheet_dialog_fragment</item>
</style>
<style name="BaseBottomSheetDialog" parent="#style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheet</item>
</style>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />
</resources>
Now, extend the BottomSheetDialogFragment and set the new theme on it. That's it!

Now, I use this
<!-- Stuff to make the bottom sheet with round top borders -->
<style name="BottomSheetShapeAppearance" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeTopRight">16dp</item>
</style>
<style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
<item name="shapeAppearance">#style/BottomSheetShapeAppearance</item>
<item name="behavior_peekHeight">140dp</item>
<item name="behavior_fitToContents">true</item>
<item name="behavior_halfExpandedRatio">0.5</item>
</style>
<style name="BaseBottomSheetMenu" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheetModal</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
<style name="BottomSheetMenuTheme" parent="#style/BaseBottomSheetMenu" />
You can change general theme support in Theme.MaterialComponents.DayNight.BottomSheetDialogextend by
Theme.MaterialComponents.DayNight.BottomSheetDialog for Dark Mode
In create BotoomSheet load specific theme
override fun getTheme(): Int = R.style.BottomSheetMenuTheme

Try to Use below code
View view = LayoutInflater.Inflate(Resource.Layout.MyBottomSheet, null);
Dialog dialog = new BottomSheetDialog(this);
dialog.SetContentView(view);
((View) view.getParent()).setBackgroundColor(getContext().getResources().getColor(android.R.color.transparent));
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) ((View) view.getParent())
.getLayoutParams();
((View) view.getParent()).setLayoutParams(layoutParams);

How to give the user the possibility to switch between different colors skin in your App

I want to give the user the opportunity to select wich color skin will have the app. For example, i whould implement a black skin with black colours with different tonalities and also a white skin with withe tonalities.
Which whould be the best approach to achieve this?
For example i know that there is a colors.xml file in Android that should contain the colours of your app. Whould be a way to have two colors files or something and to use one or other depending of user selection? Maybe a styles.xml file?
Please tell me your opinion about which whould be the best approach to achieve this
Thank you
MY LAYOUT:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<RelativeLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingTop="4dp"
android:paddingBottom="4dp"
style="#style/CustomPagerTitleStrip"/>
</android.support.v4.view.ViewPager>
</RelativeLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu"
style="#style/NavigationDrawerStyle"/>
</android.support.v4.widget.DrawerLayout>
My styles.xml file:
<resources>
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarTheme">#style/CustomActionBar</item>
<item name="android:textColor">#color/colorFontMenus</item>
<item name="itemTextColor">#color/colorFontMenus</item>
<item name="itemIconTint">#color/colorFontMenus</item>
</style>
<style name="CustomActionBar">
<!-- title text color -->
<item name="android:textColorPrimary">#color/colorFontMenus</item>
<!-- subtitle text color -->
<item name="android:textColorSecondary">?android:textColorPrimary</item>
<!-- action menu item text color -->
<item name="actionMenuTextColor">?android:textColorPrimary</item>
<!-- action menu item icon color - only applies to appcompat-v7 icons :( -->
<item name="colorControlNormal">?android:textColorPrimary</item>
</style>
<style name="CustomPagerTitleStrip">
<item name="android:background">#color/mainColorWithAlpha</item>
</style>
<style name="CustomTextView">
<item name="android:textColor">#color/colorFontContent</item>
</style>
<style name="CustomScrollBar">
<item name="android:scrollbarThumbVertical">#drawable/scrollbar_green</item>
</style>
<style name="CustomDrawerHeader">
<item name="android:background">#drawable/drawer_header_background_green</item>
</style>
<style name="NavigationDrawerStyle">
<item name="android:background">#color/colorPrimaryDark</item>
</style>
</resources>

Regarding to #Joaquim Ley's answer we can change Theme before super.onCreate() .
In my app(at work) my styles.xml :
This is my default theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorAccent">#color/colorPrimary</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:colorFocusedHighlight">#color/colorPrimary</item>
<item name="android:colorControlNormal">#color/amber_300</item>
<item name="android:colorControlActivated">#color/amber_300</item>
<item name="android:colorControlHighlight">#color/colorControlHighlight</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="actionBarItemBackground">?attr/selectableItemBackground</item>
<item name="colorControlHighlight">#color/colorControlHighlight</item>
<item name="android:windowContentTransitions">true</item>
<!-- Customize your theme here. -->
</style>
And this is my Green Theme :
<style name="AppTheme.Green" parent="AppTheme">
<item name="colorPrimary">#color/green_500</item>
<item name="colorPrimaryDark">#color/green_700</item>
<item name="android:colorAccent">#color/green_300</item>
<item name="android:statusBarColor">#color/green_700</item>
<item name="android:colorFocusedHighlight">#color/green_500</item>
<item name="android:colorControlNormal">#color/green_300</item>
<item name="android:colorControlActivated">#color/green_300</item>
</style>
When changing theme :
#Override
protected void onCreate(Bundle savedInstanceState) {
mPrefs=getSharedPreferences(getResources().getString(R.string.preference_name),MODE_PRIVATE);
mEditor=mPrefs.edit();
mEditor.apply();
defaultColor=mPrefs.getInt(getResources().getString(R.string.default_color),0);
//you can do some switch case or if else of defaultColor and change theme
setTheme(R.style.AppTheme_Green);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add_voice_record);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
This is my first app in work, but in my personal app i created a BaseActivity and created a method handleColor(int color,int darkcolor). But this won't change entire theme just Toolbar, StatusBar, NavigationBar and EditText marker and underline colors:
public class BaseActivity extends AppCompatActivity {
public void handleColor(int color,int darkcolor){
//changing toolbar color
if(getSupportActionBar()!=null){
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(color));
}
//if bigger than Api 21 change status bar color
if(isLolipop()){
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(darkcolor);
}
}
public boolean isLolipop(){
return Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP;
}
}
When changing color i am using Material Dialogs Color Picker. Sample apk : sample.apk and Github: material-dialogs. If you want to see how it looks like i can give you a video of my app.
Colors from : Material Color Palette
Anyways i know 2 different approach , if you like one of them i can explain more.
#Edit : Good news for you, I found this Github repo : app-theme-engine and its working good. You can try sample apk. If you can't import it via gradle try this : compile 'com.github.naman14:app-theme-engine:0.5.1#aar'

This should be done in the styles/AppTheme.xml
It’s only possible to change the theme of an Activity in the onCreate() method and that to only before super() has been called. Changing the theme is fairly straight forward, something like below should do it:
setTheme(someBooleanFlag ? R.style.AppThemeOne : R.style.AppThemeTwo);
Read more here:
Ali Muzaffar's Medium post on this
Styles and Themes
Material Theme

How can I remove this extra space between the action bar icon in Android?

How can I remove this extra space between the icon in action bar?
See the picture please.
Tried everything, nothing seems to work:
<style name="Widget.Toolbar" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:paddingRight">0dip</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:background">#color/actionBarBackgroundColor</item> <!-- v11 -->
<item name="background">#color/actionBarBackgroundColor</item>
<item name="android:width">48dip</item>
</style>

You can achieve this through style , Try this
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:actionButtonStyle">#style/ActionButtonStyle</item>
</style>
<style name="ActionButtonStyle" parent="#android:style/Widget.Holo.ActionButton">
<item name="android:minWidth">0dip</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:paddingRight">0dip</item>
</style>
Update your manifest as
android:theme="#style/AppTheme" >

You can do this my updating actionbar theme like I did, i was using appcomp theme. You need to play with Widget.Toolbar style, like I added padding on both side of actionbar.
<style name="AppTheme" parent="AppTheme.Base">
<item name="toolbarStyle">#style/Widget.Toolbar</item>
</style>
<style name="Widget.Toolbar" parent="#style/Widget.AppCompat.Toolbar">
<!-- 16dp padding on both sides of actionbar -->
<item name="android:paddingRight">16dp</item>
<item name="android:paddingLeft">16dp</item>
</style>
Update:
The padding on left will not work because Android set size for icon (if i am not wrong) to ~56dp, and actual image is scaled to fit centerInside, which leaves padding within image. So try reducing icon size (width) in style

This is how I solved using Toolbar from appcompat:
Style:
<style name="Theme.ProTaxi.Passageiro" parent="Theme.AppCompat.Light.NoActionBar"></style>
On the activity:
Toolbar actionBar = (Toolbar) findViewById(R.id.actionBar);
actionBar.setTitle("Title");
actionBar.setSubtitle("Subtitle");
actionBar.setTitleTextColor(Color.parseColor("#846A1A"));
Create a xml file in /layout folder with toolbar and included in each of activity xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:id="#+id/toolbarLayout"
android:layout_height="wrap_content"
android:orientation="vertical" >
<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/actionBar"
android:layout_width="fill_parent"
android:background="#color/actionBarBackgroundColor"
android:layout_height="?attr/actionBarSize"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp" >
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#A0A09F" />
</LinearLayout>
Including toolbar.xml in activity layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_telas" >
<LinearLayout
android:id="#+id/layoutTopToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include layout="#layout/toolbar" />
</LinearLayout>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listaTaxisLivres"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/layoutTopToolbar"
android:fastScrollEnabled="true" >
</ListView>
</RelativeLayout>

Overlay toolbar on top of activity content

I'm using the AppCompat v21 library to create a Lollipop-like interface in my android app. So far it's working great.
Now I want to have to toolbar appear on top of my content in one of my activities.
However, I cannot get it to work. This is what I have so far:
Layout of activity:
<LinearLayout
android:id="#+id/main_parent_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:theme="#style/myAppTheme">
<include layout="#layout/toolbar_setlist_top"/>
<ImageView
android:id="#+id/image"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
Layout of toolbar:
<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"
app:theme="#style/MyActionBar"
app:popupTheme="#style/MyActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_marginTop="0dp" />
Theme:
<resources>
<style name="myAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<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:activatedBackgroundIndicator">#drawable/list_selector</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#color/primaryColor2</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="background">#color/primaryColor2</item>
<item name="windowActionBarOverlay">true</item>
</style>
</resources>
Code:
#Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_setlist);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}

If you want to place the toolbar on top of your content you can use a FrameLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/main_parent_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_height="100dp"
android:layout_width="40dp"
android:background="#000"/>
</LinearLayout>
<include layout="#layout/toolbar_setlist_top"/>
</FrameLayout>

It doesn't appear that you're acquiring a reference to the toolbar view in your layout anywhere. You need to find the view first, then pass that reference to the setSupportActionBar method:
setContentView(R.layout.activity_setlist);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Assuming that when you say "Now I want to have to toolbar appear on top of my content in one of my activities" you are trying to use the Toolbar as your activity's ActionBar (instead of the old/original ActionBar) you must make your theme's parent theme "Theme.AppCompat.NoActionBar" instead of your current setting *.Light.DarkActionBar. Hope this helps.