Showing posts with label android.support.v7.widget.Toolbar. Show all posts
Showing posts with label android.support.v7.widget.Toolbar. Show all posts

Tuesday, June 20, 2017

Add ProgressBar in ToolBar

This example show how to add android.support.v7.widget.Toolbar to layout and add ProgressBar to the ToolBar.


New a project of empty activity in Android Studio.

Edit res/values/styles.xml to change style to "Theme.AppCompat.Light.NoActionBar".
<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>

</resources>


Refer to the above video, add a ToolBar to the layout, and add a ProgressBar to the ToolBar, using Android Studio's graphical design tool.

res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.blogspot.android_er.toolbarprogressbar.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintVertical_bias="0.501" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:visibility="gone"/>

</android.support.constraint.ConstraintLayout>


MainActivity.java
package com.blogspot.android_er.toolbarprogressbar;

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    TextView tvTitle;
    ProgressBar myProgressBar;

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

        tvTitle = (TextView)findViewById(R.id.title);
        myProgressBar = (ProgressBar)findViewById(R.id.progressBar);

        tvTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getBaseContext(),
                        "ProgressBar start running",
                        Toast.LENGTH_LONG).show();
                tvTitle.setClickable(false);
                MyAsyncTask myAsyncTask = new MyAsyncTask();
                myAsyncTask.execute();
            }
        });
    }

    public class MyAsyncTask extends AsyncTask<Void, Integer, Void> {

        @Override
        protected void onPreExecute() {
            myProgressBar.setVisibility(View.VISIBLE);
            myProgressBar.setProgress(0);
        }

        @Override
        protected Void doInBackground(Void... voids) {
            for(int i=0; i<100; i++){
                publishProgress(i);
                SystemClock.sleep(100);
            }
            return null;
        }

        @Override
        protected void onProgressUpdate(Integer... values) {
            myProgressBar.setProgress(values[0]);
        }

        @Override
        protected void onPostExecute(Void aVoid) {
            myProgressBar.setVisibility(View.GONE);
            tvTitle.setClickable(true);
        }
    }
}


Result:

To replace the indeterminate ProgressBar to Horizontal Progress Bar, edit res/layout/activity_main.xml. (maybe you want to set android:visibility="gone" as in progressBarStyle, depends on your case)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.blogspot.android_er.toolbarprogressbar.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintVertical_bias="0.501" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar"
        app:layout_constraintLeft_toLeftOf="@+id/toolbar"
        app:layout_constraintRight_toRightOf="@+id/toolbar" />

</android.support.constraint.ConstraintLayout>



More examples of:
android.support.v7.widget.Toolbar
- ProgressBar

Friday, May 12, 2017

Add button inside Toolbar

This example modify from my old post "Implement checkable items in OptionsMenu of Toolbar" to add button to Toolbar.


Edit activity_main.xml to add Button inside android.support.v7.widget.Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidtoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#FFA000">
        <Button
            android:id="@+id/toolbarbtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_gravity="right"/>
    </android.support.v7.widget.Toolbar>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</LinearLayout>

MainActivity.java
package com.blogspot.android_er.androidtoolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button toolBarBtn;

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

        getSupportActionBar().setTitle("Toolbar example");
        toolbar.setSubtitle("Android-er.blogspot.com");
        toolbar.setLogo(android.R.drawable.ic_menu_info_details);

        toolBarBtn = (Button)findViewById(R.id.toolbarbtn);
        toolBarBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getBaseContext(),
                        "Button in ToolBar clicked",
                        Toast.LENGTH_LONG).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        Toast.makeText(this, item.getTitle(), Toast.LENGTH_LONG).show();

        int item_id = item.getItemId();
        switch(item_id){
            case R.id.item_checkable1:
                if(item.isChecked()){
                    item.setChecked(false);
                }else{
                    item.setChecked(true);
                }
                break;
            case R.id.item_checkable2:
                if(item.isChecked()){
                    item.setChecked(false);
                }else{
                    item.setChecked(true);
                }
                break;
        }

        return super.onOptionsItemSelected(item);
    }
}



Sunday, February 19, 2017

Implement transparent status bar for android.support.v7.widget.Toolbar

Implement transparent status bar for android.support.v7.widget.Toolbar:

- Follow the steps in "Replace ActionBar with android.support.v7.widget.Toolbar" to implement a simplest toolbar.


- Edit styles.xml to add the item of "android:windowTranslucentStatus".
<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>
        <item name="android:windowTranslucentStatus">true</item>
    </style>

</resources>


Edit MainActivity.java to set the padding (with the height of status bar) of the status.
package com.blogspot.android_er.androidtoolbarex2;

import android.content.res.Resources;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

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

        toolbar.setPadding(0, getStatusBarHeight(), 0, 0);

    }

    private int getStatusBarHeight() {
        int height;

        Resources myResources = getResources();
        int idStatusBarHeight = myResources.getIdentifier(
                "status_bar_height", "dimen", "android");
        if (idStatusBarHeight > 0) {
            height = getResources().getDimensionPixelSize(idStatusBarHeight);
            Toast.makeText(this,
                    "Status Bar Height = " + height,
                    Toast.LENGTH_LONG).show();
        }else{
            height = 0;
            Toast.makeText(this,
                    "Resources NOT found",
                    Toast.LENGTH_LONG).show();
        }

        return height;
    }
}


After finished:




Wednesday, January 20, 2016

Implement checkable items in OptionsMenu of Toolbar

Example to implement checkable items in OptionsMenu of Toolbar, modify from last example"Set image on Toolbar".

Modify menu/menu_main.xml, to add checkable items:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_checkable1"
        android:orderInCategory="100"
        android:title="Checkable opt 1"
        android:checkable="true"
        android:checked="true"/>
    <item
        android:id="@+id/item_checkable2"
        android:orderInCategory="100"
        android:title="Checkable opt 2"
        android:checkable="true"
        android:checked="false"/>
    <item
        android:id="@+id/item_normal"
        android:orderInCategory="100"
        android:title="Normal item"/>

</menu>

Modify MainActivity.java, modify onOptionsItemSelected() to handle the item click.
package com.blogspot.android_er.androidtoolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setTitle("Toolbar example");
        toolbar.setSubtitle("Android-er.blogspot.com");
        toolbar.setLogo(android.R.drawable.ic_menu_info_details);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        Toast.makeText(this, item.getTitle(), Toast.LENGTH_LONG).show();

        int item_id = item.getItemId();
        switch(item_id){
            case R.id.item_checkable1:
                if(item.isChecked()){
                    item.setChecked(false);
                }else{
                    item.setChecked(true);
                }
                break;
            case R.id.item_checkable2:
                if(item.isChecked()){
                    item.setChecked(false);
                }else{
                    item.setChecked(true);
                }
                break;
        }

        return super.onOptionsItemSelected(item);
    }
}


Next:
Add button inside Toolbar

Tuesday, January 19, 2016

Set image on Toolbar

This post show how to set image on Toolbar:

Modify from last post "Add OptionsMenu to Toolbar".

To set background image of Toolbar, edit layout/activity_main.xml to set android:background of <android.support.v7.widget.Toolbar>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidtoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@mipmap/ic_launcher"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</LinearLayout>



Another method, add ImageView inside <android.support.v7.widget.Toolbar>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidtoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#FFA000">
        <ImageView
            android:id="@+id/toolbarimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
    </android.support.v7.widget.Toolbar>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</LinearLayout>



In this examples, also modify menu/menu_main.xml to set all app:showAsAction="ifRoom".
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_camera"
        android:icon="@android:drawable/ic_menu_camera"
        android:orderInCategory="100"
        android:title="camera"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/menu_compass"
        android:icon="@android:drawable/ic_menu_compass"
        android:orderInCategory="100"
        android:title="compass"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/menu_agenda"
        android:icon="@android:drawable/ic_menu_agenda"
        android:orderInCategory="100"
        android:title="agenda"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/menu_gallery"
        android:icon="@android:drawable/ic_menu_gallery"
        android:orderInCategory="100"
        android:title="gallery"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/menu_calendar"
        android:icon="@android:drawable/ic_menu_my_calendar"
        android:orderInCategory="100"
        android:title="calendar"
        app:showAsAction="ifRoom"/>
</menu>

Next:
- Implement checkable items in OptionsMenu of Toolbar

Monday, January 18, 2016

Add OptionsMenu to Toolbar


Modify from last example of "Set title, subtitle and logo of Toolbar", to add OptionsMenu to Toolbar.


Create /res/menu/menu_main.xml to define our OptionsMenu.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_camera"
        android:icon="@android:drawable/ic_menu_camera"
        android:orderInCategory="100"
        android:title="camera"
        app:showAsAction="always"/>
    <item
        android:id="@+id/menu_compass"
        android:icon="@android:drawable/ic_menu_compass"
        android:orderInCategory="100"
        android:title="compass"
        app:showAsAction="always"/>
    <item
        android:id="@+id/menu_agenda"
        android:icon="@android:drawable/ic_menu_agenda"
        android:orderInCategory="100"
        android:title="agenda"
        app:showAsAction="always"/>
    <item
        android:id="@+id/menu_gallery"
        android:icon="@android:drawable/ic_menu_gallery"
        android:orderInCategory="100"
        android:title="gallery"
        app:showAsAction="always"/>
    <item
        android:id="@+id/menu_calendar"
        android:icon="@android:drawable/ic_menu_my_calendar"
        android:orderInCategory="100"
        android:title="calendar"
        app:showAsAction="always"/>
</menu>

Modify MainActivity.java, override onCreateOptionsMenu() and onOptionsItemSelected().
package com.blogspot.android_er.androidtoolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setTitle("Toolbar example");
        toolbar.setSubtitle("Android-er.blogspot.com");
        toolbar.setLogo(android.R.drawable.ic_menu_info_details);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        Toast.makeText(this, item.getTitle(), Toast.LENGTH_LONG).show();
        return super.onOptionsItemSelected(item);
    }
}


Next:
Set image on Toolbar

Set title, subtitle and logo of Toolbar


Last post show how to "Replace ActionBar with Toolbar". Here show how to set title subtitle and logo of Toolbar.


Edit MainActivity.java
package com.blogspot.android_er.androidtoolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setTitle("Toolbar example");
        toolbar.setSubtitle("Android-er.blogspot.com");
        toolbar.setLogo(android.R.drawable.ic_menu_info_details);

    }
}


In the example, also modify layout/activity_main.xml to use LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidtoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#FFA000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</LinearLayout>


Next:
Add OptionsMenu to Toolbar

Sunday, January 17, 2016

Replace ActionBar with android.support.v7.widget.Toolbar

A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setSupportActionBar() method.

This example show how to replace ActionBar with android.support.v7.widget.Toolbar.


- Create a new project with Minimum SDK of API 16, select template of Empty Activity.

- Edit res/values/styles.xml to use style of "Theme.AppCompat.Light.NoActionBar".
<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>

</resources>

- Add <android.support.v7.widget.Toolbar> to /res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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="com.blogspot.android_er.androidtoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#FFA000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>


- Edit MainActivity.java to call setSupportActionBar(toolbar) method.
package com.blogspot.android_er.androidtoolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}


- To make the Toolbar fill the width of the layout, edit /res/values/dimens.xml to set both "activity_horizontal_margin" and "activity_vertical_margin" to 0dp.
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">0dp</dimen>
    <dimen name="activity_vertical_margin">0dp</dimen>
</resources>


This video show how-to in Android Studio, and how it shown on Android Emulator of API 16 and 23.


More:
Set title, subtitle and logo of Toolbar
Add OptionsMenu to Toolbar
Set image on Toolbar
- Implement checkable items in OptionsMenu of Toolbar
Add button inside Toolbar
Implement transparent status bar for android.support.v7.widget.Toolbar
- ToolBar with ProgressBar (with video show the steps to place ToolBar using Android Studio graphical Design Tool)