Android Studio Tab View gray theme color

Question

So I created tab view with fragments, everything went well, besides the whole layout color is dark gray (don't know why) and the tab line color is pink (also don't know why).

It looks like this enter image description here

Also, as you can see, iz has that weird spacing between action bar and tab bar (also don't know why).

Here is my code:

Vjezbe.java

package hr.app.liftme.liftmehr;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class Vjezbe extends AppCompatActivity {
    Toolbar toolbar;
    TabLayout tabLayout;
    ViewPager viewPager;
    ViewPagerAdapter viewPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_vjezbe);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        tabLayout = (TabLayout)findViewById(R.id.tabLayout);
        viewPager = (ViewPager)findViewById(R.id.viewPager);
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.addFragments(new HomeFragment(), "Prsa");
        viewPagerAdapter.addFragments(new TopFreeFragment(), "Leđa");
        viewPagerAdapter.addFragments(new TopPaidFragment(), "Ramena");

        viewPagerAdapter.addFragments(new TrapeziFragment(), "Trapezi");
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }

}

activity_vjezbe.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="hr.app.liftme.liftmehr.Vjezbe">

    <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" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_vjezbe" />



</android.support.design.widget.CoordinatorLayout>

styles.xml

<resources>

    <!-- Base application theme. -->
    <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>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

So if anyone can walk me through my errors I would really appreciate that!

Thank you!

Answer 1

besides the whole layout color is dark gray (don't know why) and the tab line color is pink (also don't know why).

Try changing your primary and accent colors in res/values/colors.xml like:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color> <!-- Tab color -->
    <color name="colorPrimaryDark">#303F9F</color> <!-- Status bar color -->
    <color name="colorAccent">#FF4081</color> <!-- Tab indicator color -->
</resources>

Also, as you can see, iz has that weird spacing between action bar and tab bar (also don't know why).

I don't know what ViewPagerAdapter is, but you should be using something like FragmentPagerAdapter or FragmentStatePagerAdapter like this:

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    public StorePagerAdapter(FragmentManager manager, String[] titles) {
        super(manager);
        mTitles = titles;
    }

    private String[] mTitles;

    @Override
    public Fragment getItem(int position) {
        if (position == 0) {
            return new HomeFragment();
        } else if (position == 1) {
            return new TopFreeFragment();
        } else if (position == 2) {
            return new TopPaidFragment();
        } else if (position == 3) {
            return new TrapeziFragment();
        }
        return null;
    }

    @Override
    public int getCount() {
        return mTitles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

and this in your activity's onCreate :

.
.
String[] titles = new String[] {"Prsa", "Leđa", "Ramena", "Trapezi"};
MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), titles);
.
.