Create a Toolbar

## Introduction

This tutorial is a continuation to the tutorial Create an Activity with Layout. To start this tutorial, you must already have an compilable activity with layout. You will learn how to create a content layout and a CoordinatorLayout. You will learn how to create a Toolbar and how to change the text it displays.

## Create a Content layout

To have a working toobar, you must create another layout file. This file will contain the all the main content of your activity. The name format should be content\_"ClassName".xml. For this tutorial, it will be called content\_main.xml.

If you followed the Create an Activity with Layout tutorial, you can just copy the activity\_main.xml code to this file. Otherwise, follow the instructions below.

Right click your layout package, and add a new Layout Resource File. You can choose any Root element, but for this tutorial, we will use the LinearLayout, as it's simpler to use. The directory name should be "layout".

Your content\_main.xml should look like this:

```
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout\_width="match\_parent"
 android:layout\_height="match\_parent">
 </LinearLayout>

```
We will add a TextView, so our layout won't be blank when we run our application. Create a new TextView inside the LinearLayout, set its layout\_width and layout\_height to "wrap\_content" and set it's text to "Hello World!", or anything you'd like.

```
 <TextView
 android:layout\_width="wrap\_content"
 android:layout\_height="wrap\_content"
 android:text="Hello World!" />

```
When you are finished, your layout file should look like this:

```
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout\_width="match\_parent"
 android:layout\_height="match\_parent">
 <TextView
 android:layout\_width="wrap\_content"
 android:layout\_height="wrap\_content"
 android:text="Hello World!" />
 </LinearLayout>

```

## Create a Coordinator layout

If you already have an activty\_"ClassName".xml fle, its contents should be moved to the content\_"ClassName".xml file. After that, you can erase the layout file and follow the steps below.

Differently from the previous tutorial, here we will use the CoordinatorLayout. CoordinatorLayout is a super-powered FrameLayout. The CoordinatorLayout is intended for two primary use cases: As a top-level application decor or chrome layout; and as a container for a specific interaction with one or more child views.

Create a new CoordinatorLayout.

```
<?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="br.com.jeanknapp.helloworld.BasicActivity">

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

```

Inside the CoordinatorLayout, we will include two things. First, an AppBarLayout, to contain the Toolbar, and last, our content\_main.xml.

Create an AppBarLayout inside the CoordinatorLayout.

```
<android.support.design.widget.AppBarLayout
 android:layout\_width="match\_parent"
 android:layout\_height="wrap\_content"
 android:theme="@style/AppTheme.AppBarOverlay">

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

```

Below the AppBarLayout, include a reference to our content\_main.xml layout.

```
<include layout="@layout/content\_main" />

```

By now, our activity\_main.xml file should look like this:

```
<?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="br.com.jeanknapp.helloworld.BasicActivity">

 <android.support.design.widget.AppBarLayout
 android:layout\_width="match\_parent"
 android:layout\_height="wrap\_content"
 android:theme="@style/AppTheme.AppBarOverlay">

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

 <include layout="@layout/content\_main" />

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

```

## Create the Toolbar widget

Inside the AppBarLayout, create a Toolbar

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

```

After you are finished, your xml file should look like this:

```
<?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="br.com.jeanknapp.helloworld.BasicActivity">

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

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

```

## Importing

Import the following class:

```
import android.support.v7.widget.Toolbar;

```

## Complement the onCreate() method

Inside the onCreate() method, use findViewById to find our Toolbar. Then, use the method setSupportActionBar() to tell the application which view is our Toolbar.

When you are finished, your java class file should look like this:

```
package br.com.jeanknapp.helloworld;

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

 /\*\*
 \* Created by Jean on 08/10/2016.
 \*/
public class Mainctivity 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);
 }
}

```

## Setting the Toolbar title

By default, your toolbar will display your activity label. It is set in your AndroidManifest.xml file. To change the text displayed in the Toolbar, other than programmatically options, there are two ways. You can change the app\_name string, or you can change the the label of your activity.

### Changing the app name

Inside the values package, open the strings.xml file. There you should have a string called app\_name. The text you insert here will replace the text displayed by the Toolbar.

```
<string name="app\_name">Hello World</string>

```

It will also change the name of your application, so, if you want your activity to display a text and keep the application name, you should follow the next step.

### Changing the activity label

Inside the strings.xml file, create a new string. By naming conventions, you should call it activity\_"ClassName"\_title. In this tutorial, we will call it activity\_main\_title.

```
<string name="activity\_main\_title">My New Activity</string>

```

Now, open your AndroidManifest.xml file, and change your Activity label to the new string you created.

```
android:label="@string/activity_main_title"

```

Your AndroidManifest.xml file should look like this:

```
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="br.com.jeanknapp.helloworld">

 <application
 android:allowBackup="true"
 android:icon="@mipmap/ic\_launcher"
 android:label="@string/app\_name"
 android:supportsRtl="true"
 android:theme="@style/AppTheme">
 <activity
 android:name=".BasicActivity"
 android:label="@string/app\_name"
 android:theme="@style/AppTheme.NoActionBar">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />

 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 </application>

</manifest>

```

## Conclusion

Your activity now has a basic toolbar displaying the name of your activity.

For the next steps, you should learn how to add working action buttons to your Toolbar to give functions to your application.

You now know how to create a content layout, a CoordinatorLayout and a Toolbar.

## Next Steps

* Create a Scrolling Activity with a Collapsing Toolbar