Material design fixed tabs without toolbar - tabs

Question

I have a slight problem figuring out a "bug" in my code. Im not sure if its a bug or not. However, as you can see in the picture 1, the fixed tabs' position is behind the curtain drawer. I cant find/understand why this is. Ive followed several tutorials and they dont seem to have the same problem.
Ive tried to google it up, but i cant find a similar problem. Anyone experienced something similar before?
In the android studio, the design layout seems to be on point, however, not when compiled.
Im using the neokree lib so i can use the icons and ripple effect when selecting tabs. I've tried to use the google's tab layout link here, but as soon as i tried to remove the actionbar and apply the icons, the same problem occurred.
Thanks!
activity_main
<?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">
<it.neokree.materialtabs.MaterialTabHost
android:id="#+id/materialTabHost"
android:layout_width="match_parent"
android:layout_height="48dp"
app:iconColor="#color/iconColor"
app:primaryColor="#color/primaryColor"
app:accentColor="#color/accentColor"
app:hasIcons="true"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"/>
</LinearLayout>
styles.xml
<resources>
<style name="AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="colorControlHighlight">#color/colorHighlight</item>
</style>
</resources>
styles.xml v21
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<!--Using same style as in default style.xml file-->
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:colorAccent">#color/accentColor</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:colorControlHighlight">#color/colorHighlight</item>
</style>
</resources>
MainActivity
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.ImageSpan;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import it.neokree.materialtabs.MaterialTab;
import it.neokree.materialtabs.MaterialTabHost;
import it.neokree.materialtabs.MaterialTabListener;
public class MainActivity extends ActionBarActivity implements MaterialTabListener
{
private Toolbar toolbar;
private ViewPager mPager;
private SlidingTabLayout mTabs;
private MaterialTabHost tabHost;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabHost = (MaterialTabHost) findViewById(R.id.materialTabHost);
viewPager = (ViewPager) findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
tabHost.setSelectedNavigationItem(position);
}
});
for (int i = 0; i < adapter.getCount(); i++) {
tabHost.addTab(
tabHost.newTab()
.setIcon(adapter.getIcon(i))
.setTabListener(this));
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item)
{
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings)
{
return true;
}
return super.onOptionsItemSelected(item);
}
#Override
public void onTabSelected(MaterialTab materialTab) {
viewPager.setCurrentItem(materialTab.getPosition());
}
#Override
public void onTabReselected(MaterialTab materialTab) {
}
#Override
public void onTabUnselected(MaterialTab materialTab) {
}
class ViewPagerAdapter extends FragmentStatePagerAdapter
{
int icons[] = {R.drawable.ic_home,
R.drawable.ic_graph,
R.drawable.ic_bell_mid,
R.drawable.ic_settings};
//String[] tabText = getResources().getStringArray(R.array.tabs);
public ViewPagerAdapter(FragmentManager fm)
{
super(fm);
//tabText = getResources().getStringArray(R.array.tabs);
}
#Override
public Fragment getItem(int position)
{
MyFragment myFragment = MyFragment.getInstance(position);
return myFragment;
}
//Attaching an image to a (spannable) string so we can show the image instead of text.
#Override
public CharSequence getPageTitle(int position){
/*Drawable drawable = getResources().getDrawable(icons[position]);
//icon bounds/size
drawable.setBounds(0,0,96,96);
ImageSpan imageSpan = new ImageSpan(drawable);
SpannableString spannableString = new SpannableString(" ");
spannableString.setSpan(imageSpan, 0, spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return spannableString;*/
return getResources().getStringArray(R.array.tabs)[position];
}
#Override
public int getCount()
{
return 4;
}
private Drawable getIcon(int position)
{
return getResources().getDrawable(icons[position]);
}
}
}

Answer 1

After accidentally getting over a youtube tutorial about making simple material design tabs, I made a new project and started to combine the one I found in youtube with my old one. Eventually, I found out that the following code line in the styles file was the cause of the problem.
<item name="android:windowTranslucentStatus">true</item>
It seems like it was something I added for testing and forgot to remove later on.

Answer 2

Try adding a Toolbar with a no actionbar theme..
In order to do this you have to make a new xml file called tool_bar.xml and paste the following code into it:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android" />
You have then add this to your activity_main.xml file:
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>