CODEWITHSUNDEEP
androidmaterial-design
Em Ae
Em Ae

Reputation: 8734

Android material design - Creating Tool Bar

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

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 ?

Upvotes: 0

Views: 686

Answers (4)

Pooja
Pooja

Reputation: 2467

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.

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

Upvotes: 1

architjn
architjn

Reputation: 1482

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

Upvotes: 0

rahul.ramanujam
rahul.ramanujam

Reputation: 5628

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

    }

Upvotes: 0

Kyle Horkley
Kyle Horkley

Reputation: 1011

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.

Upvotes: 0

Related Questions