Android material design - Creating Tool Bar

Question

I am trying to follow this tutorial to create material design tool bar. I am at step 7 where my activity should have a color tool bar but my app looks like

for reference, here are my style.xml, color.xml, tool_bar.xml files

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorPrimary">@color/ColorPrimary</item>
        <item name="android:colorPrimaryDark">@color/ColorPrimaryDark</item>
        <!-- Customize your theme here. -->
    </style>

</resources>

There was another style.xml in the same folder which has (21) next to it. I didn't make any changes to it though.

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ColorPrimary">#FF5722</color>
    <color name="ColorPrimaryDark">#E64A19</color>
</resources>

tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:elevation="4dp">

</android.support.v7.widget.Toolbar>

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

UPDATE If i make changes in stylev21.xml file, I can see my app looks like whats in the tutorial. But if leave style-v21.xml unchanged and make changes in style.xml I don't see those changes. What style*.xml file shall i edit ?

Answer 1

Purpose of having different styles.xml is that you can add changes specific to the Android version. But then you need to maintain same changes in both the files.

If you are testing your application on device having Android version 5.0 lollipop then style defined in v21/styles.xml will reflect in your application. Otherwise common styles.xml

If you want the same output as displayed in tutorial then I would suggest few changes.

1. Edit your activity_main.xml

   <RelativeLayout   
   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    tools:context=".MainActivity">
   
    <include
         android:id="@+id/tool_bar"
         layout="@layout/tool_bar"/>
   
    <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/hello_world" />
   
    </RelativeLayout>
   

P.S. I have just removed margin from RelativeLayout.

2. Edit both styles.xml and define style which contain no Action bar. E.g. "Theme.AppCompat.Light.NoActionBar"

After doing these changes your app will work perfectly on all devices. I hope it help.

Answer 2

Your image has the three dots for the context menu , its still showing the action bar . You must have the following line for tool bar to take effect

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
        setSupportActionBar(toolbar);                   // Setting toolbar as the ActionBar with setSupportActionBar() call

    }

Answer 3

Change your theme to Theme.AppCompat.Light.DarkActionBar instead of NoActionBar.

Then you don't need to add add it in your layout XML file

Also change android:colorPrimary to colorPrimary (take off android:) and android:colorPrimaryDark to colorPrimaryDark.

Answer 4

Make your style.xml like this-

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <!-- Customize your theme here. -->
</style>

</resources>

Reason - AppCompat search for text without "android:"