Mark Ben Mark Ben - 4 months ago 22
Android Question

Dark theme android app

I'm trying to create a dark theme similar to the one in OxygenOS on OnePlus devices.

enter image description here

I changed the window background to black but the problem is the action bar is not becoming pure black.

<style name="DarkTheme" parent="Theme.AppCompact">
<item name="android:colorPrimary">@color/black</item>
<item name="android:colorPrimaryDark">@color/black</item>
<item name="android:textColorPrimary">@color/white</item>
<item name="android:colorAccent">@color/white</item>
<item name="android:color">@color/white</item>
<item name="android:windowBackground">@color/black</item>
<item name="android:navigationBarColor">@color/black</item>
<item name="android:actionBarStyle">@color/black</item>
</style>

Answer

Replace these values in your colors.xml

<color name="colorPrimary">#101010</color>
<color name="colorPrimaryDark">#000000</color>

This would be enough to change the Toolbar's color.


If you don't want to change the whole app primary color (which seems it is what you were trying to do in the first place), try creating a new Toolbar by:

Add this to your app's build.gradle

compile 'com.android.support:design:23.1.1'

Add this to your main layout (activity_main.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="mx.evin.apps.startingtemplate.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/a_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/black"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

Set this in your styles (styles.xml):

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

And set the new toolbar (MainActivity.java).

Toolbar toolbar = (Toolbar) findViewById(R.id.a_main_toolbar);
setSupportActionBar(toolbar);
Comments