Title not visible in Custom Toolbar

Question

I'm trying to implement a Custom Toolbar, but i cant manage to get the title in it. I've tried many posts on StackOverflow but without succes.

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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include layout="@layout/toolbar"
        android:id="@+id/toolbar"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World!" />

</RelativeLayout>

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

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.diong.amyappname">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Styles.xml

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

MainActivity.java

package com.example.diong.amyApp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

I really tried a lot.

• Trying to set the title using getSupportActionBar().setTitle(title);
• I tried other pc's with new projects.
• I tried to user other methods

If someone could help me out that would be awesome!

UPDATE

I've found "a" fix, In the toolbar.xml add:

xmlns:app="http://schemas.android.com/apk/res-auto"
app:title="@string/app_name"

Now it works but.. I see that the code was suggested in the MainActivity.java is doing nothing

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

toolbar.setTitle("Your title here");

setSupportActionBar(toolbar);

Can someone help me out?

UPDATE 2.0

I found a error and i found out that the title is working fine on the virtual device or my phone, just not in the preview design

IDE Screenshot 1

IDE Screenshot 2

IDE Screenshot 3

IDE Screenshot 4

IDE Error Screenshot 5

IDE Error Screenshot 6

Answer 1

I think the problem is that your id toolbar is the id of your include tag, but not of the Toolbar . So try to delete the include tag and replace it with your Toolbar . Dont forget to add the id to your Toolbar . Then it should work.

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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

     <android.support.v7.widget.Toolbar          
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/colorPrimary"
     android:elevation="4dp"
     android:id="@+id/toolbar"
      >

 </android.support.v7.widget.Toolbar>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="Hello World!" />

  </RelativeLayout>

To change the title add getSupportActionBar.setTitle("Your title"); to your MainActivity.

Answer 2

Take the id set inside include tag and put it inside Toolbar tag. Here the include places the Toolbar.xml inside the Activity_Main.xml but does not affect the id to Toolbar . So your XMLs should be like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include layout="@layout/toolbar"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World!" />

</RelativeLayout>

And this for the toolbar:

<?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:id="@+id/toolbar"
    >

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

And remember to set your title, if you want it dynamically can proceed this way:

package com.example.diong.amyApp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 = findViewById(R.id.toolbar);

         toolbar.setTitle("Your title here");

        setSupportActionBar(toolbar);


    }
}

Answer 3

There is no way to get the real "live" title to appear in the IDE preview.

The preview doesn't know about the code executed in your activity's onCreate() method (even if you specify tools:context on your root view). That means that the preview doesn't know that this Toolbar is your activity's action bar , and so it doesn't know that it should display the title. Additionally, it won't know about any setTitle() calls made in your activity.

However, you could add tools:title to the toolbar itself, so that you see some text there. That will show you how the title would appear, so you can see text color/size/etc in the preview.

Answer 4

From my point of view, you need to make changes in your code like:

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(Html.fromHtml(
            "<font color='#673AB7'><b>Your Title</b></font>")