Ticker

6/recent/ticker-posts

How to use create a Custom Toolbar in Android Studio

How to use create a Custom Toolbar in Android Studio

How to use create a Custom Toolbar in Android Studio


Hi Android Developers,

DO YOU WANT A CUSTOM TOOLBAR IN YOUR ANDROID APP?

In this blog, we are going to see how to use a custom toolbar in the android app. Before going to implement it first let’s discuss what Toolbar is.

public class Toolbar
extends ViewGroup

A toolbar is used within the application. The toolbar is a generalization of Action Bar for use inside the application. An app may prefer to select a Toolbar as an Action bar for an activity using the setActionBar() method. The Toolbar supports more features than an Action bar. We can use texts and images on Toolbar

Follow these books:



STEPS

First, we are going to create a new android project, if you don't know how to create a new project in the android studio then see the previous blog about how to create a new android project. Then open the style.xml file inside res > values > styles.xml. Change the App Theme to NoActionBar, (Fig 1) so that we are going to create a custom Toolbar as we want.

NoActionBar theme
Fig 1


Then go our XML file where we are going to create our custom Toolbar. Change the parent layout to a Relative Layout. In the Android Tutorial section of my blog we will discuss the various layout of android. After the parent layout, we type androidx.appcompat.widget.Toolbar and set layout width as match_parent and layout heigh as actionBarSize. As we already mentioned that Toolbar is a generalization of Action Bar, so we set the height of our Toolbar to the same height of ActionBar. And set the theme to android:theme="@style/ThemeOverlay.AppCompat.DayNight.ActionBar". We can also change the background of the Toolbar simply write android:background=” whatever you want to add”. And give an ID to the Toolbar (Fig 2).

Toolbar
Fig 2
preview of above code:

custom Toolbar



We already created a Custom Toolbar, but now we are going to see how to add Images and Texts in the Toolbar. Here we see how to add a Back Button (also we can use your App Logo here) and how to add a Title (your App Title) on Toolbar.

Before going to add the back button, we need to import the image of the back button. For that go the drawable folder, right-click on it > select New > select Image asset (Fig 3). Then a screen will have appeared. Where we need to select Icon Type to Action Bar and Tab Icons. Click on the Clip Art icon. (Fig 4), Search as back in the search bar then select back arrow and click OK (Fig 5). Give a name of the image, here back_button, then click NEXT and FINISH (Fig 6).

add image asset
Fig 3

Fig 4

Fig 5

Fig 6


Now we are ready to use it as Image. Inside Toolbar Widget we are going to create an ImageView. ImageView is a view where we basically used to display images in Android Applications. We are also going to discuss about different views of android in later Android Tutorial Section. Now write ImageView and set the layout width and height as wrap_content, and add the back image as source (android:src=”@drawable/back_button”) from drawable folder. And give an ID to it (Fig 7)

Fig 7
 preview of above code:




Now we are going to add the Text i.e. title. So create a TextView and set the title inside android:text=”” . We set the height and width as wrap content and color of the text white. Here we see that the text is in the middle of the Toolbar because we used layout_gravity as “center” (Fig 8). If we use gravity as “start” then it will display at the starting of the bar. And give an id to it.

Fig 8
preview of above code:




Then go to Java class and initialize Toolbar, ImageView and TextView and create the hooks for them, so that we would add functionality with these views (Fig 9).

Fig 9




That’s it. We finally created a Custom Toolbar with one Image and Text. If you find any difficulty then comment below.



In the Next UI blog, we are going to see how to create a Splash screen with Animation.


Post a Comment

1 Comments

Please do not enter any types of spam links in the comment section.