Custom Toolbar in Android

Photo by Naufal Giffari on Unsplash

The benefit of creating an app for android OS is the customization that comes with it; and who doesn’t like custom views for their app. Here, we will be creating a custom view for the toolbar in simple steps. This is how our toolbar will look:

To achieve this, we will be creating a custom layout and adding that to our toolbar. This is a simple process and won’t take much time from your development process. Also, we can do many customizations with this method like:

1. Using custom font in the toolbar
2. Change text size
3. Edit toolbar text on runtime, etc.

Let’s start by creating our custom layout; in Android Studio, create a new project and go to

res > layout > New > Layout resource file

Enter the name ‘‘custom_toolbar’’ and press OK. Download the image given below and copy this to the drawable folder of your android project:

Now, write the below code in custom_toolbar.xml file:

<?xml version="1.0" encoding="utf-8"?> <androidx.appcompat.widget.Toolbar       xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical"    android:layout_width="match_parent"    
android:layout_height="56dp"    android:background="@color/colorPrimary">     
<RelativeLayout        
android:layout_width="match_parent"        android:layout_height="match_parent">     
<LinearLayout        
android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:layout_centerInParent="true">         
<ImageView            
android:layout_width="36dp"            
android:layout_height="36dp"            android:src="@drawable/youtube"            
/>         
<TextView            
android:id="@+id/toolbar_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textSize="18dp"            
android:textStyle="bold"            
android:layout_gravity="center"            android:layout_marginLeft="8dp"            
android:text="Inside Android"            
android:textColor="#fff"            
/>     
</LinearLayout>    
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>

Now, your MainActivity.java file should look like this:

public class MainActivity extends AppCompatActivity {     
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);         
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.custom_toolbar);    
}
}

Now run the app in the emulator and you will see the result. You can make other changes like font, size, color, etc in custom_toolbar.xml file. If you want to change the text of custom toolbar, you can do in this way:

....
TextView textView = getSupportActionBar().getCustomView().findViewById(R.id.toolbar_title);
textView.setText("My Custom Title");
...

Here is our result after changing the text:

That’s the beauty of android! Though there are some downsides to this method which we will discuss sometime later, this method saves our time and provide an easy solution. Cheers!