Hey guys, Here we will learn how we create custom toolbar and menu in simple steps.
In Android, a toolbar is a basic part of the app. We can see a toolbar at the top of the activity in every app. We can easily add title, add your app logo, change color, add back button, and Menu list, and many more things. A toolbar is also part of the app UI so it’s must look good and attractive to users. Let’s follow the below step and create a Toolbar and Menu.
Step 1. Add Design Support Library:
To use Toolbar in Android app we need to add a design support library in build.gradle file.
Gradle Scripts>build.gradle(Module: app)> Inside dependencies
Add below dependency if you are using new version of Android Studio.
|
1 |
implementation 'com.google.android.material:material:1.1.0' |
Now add below dependency if you are using old version of Android Studio.
|
1 |
compile 'com.android.support:design:24.1.1' |
Step 2. Add colors in colors.xml
Open values>colors.xml and add below colors code. If you want to edit the toolbar color here you can put the hex code of the color.
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#6200EE</color> <color name="colorPrimaryDark">#000000</color> <color name="colorAccent">#03DAC5</color> <color name="startColor">#4CAF50</color> <color name="endColor">#F44336</color> <color name="white">#F1F1F1</color> </resources> |
Attributes use in colors:
- colorPrimary – color primary is the default color for toolbar and widgets. If you want to change the color of widgets you must change here. It’s become easy to change the color attire app.
- colorPrimaryDark – color is the default color of the action bar.
- colorAccent – color Accent color is used for the widgets default color like progress bar color and many more
Step 3: Add background xml file
Add a gradient_bg.xml file in drawable folder. Add code In gradient_bg.xml.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:type="linear" android:angle="225" android:startColor="@color/startColor" android:centerColor="@color/white" android:endColor="@color/endColor" /> <corners android:bottomLeftRadius="25dp" android:bottomRightRadius="25dp" /> </shape> |
Attributes in background xml file:
- shape – Used for shape. If you want to create any shape like oval, rectangle, etc.
- gradient – Used to create a gradient using 2 or 3 colors.
- angle – Used to set angle in gradient. It starts 0 to 360.
- startColor – Used to start color in the gradient.
- centerColor – Used to center color in the gradient.
- endColor – Used to end color in the gradient.
- corners – Used to create rounded corners.
Step 4. Add toolbar.xml
Create new xml file toolbar.xml file and add below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@drawable/gradient_bg" android:minHeight="?attr/actionBarSize" app:actionViewClass="androidx.appcompat.widget.SearchView" app:contentInsetLeft="0dp" app:contentInsetStart="0dp" app:contentInsetStartWithNavigation="0dp" app:popupTheme="@style/AppTheme.PopupOverlay" app:titleTextAppearance="@style/TextAppearance.AppCompat.Title" app:titleTextColor="@color/white"> </androidx.appcompat.widget.Toolbar> |
Attributes in toolbar.xml file
- background – Used to set a background color. If you want to change background-color change here.
- minHeight – Used to set min-height for toolbar.
- titleTextColor – Used to set title color.
Step 5. Add xml code MainActivity.xml
To include any xml file in activity we used include attribute.
|
1 2 3 |
<include layout="@layout/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content"/> |
Step 6. MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
package com.simplifiedtutorials.toolbarapp; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import android.os.Bundle; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.widget.Toast; public class MainActivity extends AppCompatActivity { Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //custom toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setTitle("Title"); setSupportActionBar(toolbar); toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_keyboard_arrow_left_black_24dp)); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { onBackPressed(); //What to do on back clicked } }); } @Override public void onBackPressed() { finish(); } } |
Step 7. Create Menu folder
Add menu folder, right-click on res folder and select New>Android Resources Directory>put menu name inside directory name.
Now create new file inside menu folder for menu item. Here we will add more menu items which we have need.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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_share" android:orderInCategory="4" app:showAsAction="never" android:title="@string/nav_share"/> <item android:id="@+id/menu_follow_us" android:orderInCategory="2" app:showAsAction="never" android:title="@string/follow_us" /> <item android:id="@+id/menu_more_app" android:orderInCategory="2" app:showAsAction="never" android:title="@string/more_app" /> <item android:id="@+id/menu_rate" android:orderInCategory="3" app:showAsAction="never" android:title="@string/app_rating"/> </menu> |
Step 8. Add Java code in MainActivity
Add java code in mainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
package com.dexterousdevelopers.toolbarapp; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import android.os.Bundle; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.widget.Toast; public class MainActivity extends AppCompatActivity { Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //custom toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setTitle("Title"); setSupportActionBar(toolbar); toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_keyboard_arrow_left_black_24dp)); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { onBackPressed(); //What to do on back clicked } }); } //code for menu @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.menu, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle item selection switch (item.getItemId()) { case R.id.menu_share: Toast.makeText(this, "Click", Toast.LENGTH_SHORT).show(); return true; case R.id.menu_follow_us: Toast.makeText(this, "Click", Toast.LENGTH_SHORT).show(); return true; case R.id.menu_more_app: Toast.makeText(this, "Click", Toast.LENGTH_SHORT).show(); return true; case R.id.menu_rate: Toast.makeText(this, "Click", Toast.LENGTH_SHORT).show(); return true; default: return true; } } //code back button @Override public void onBackPressed() { finish(); } } |
Thanks for reading.