\n AppBar is an essential component that makes up the basic user interface in Android apps. It is typically positioned at the top of the screen, displaying the title of the current screen and providing users with tools to access the app’s main features. \n AppBar consists of several components:\n <\/p>\n \n This section explains how to actually implement an AppBar. First, create a new project in Android Studio and set up a basic layout for the AppBar.\n <\/p>\n \n 1. Open Android Studio and select “New Project”. \n There is no need to add `Toolbar` in the `build.gradle` file to use AppBar. The AndroidX library is included by default, so just ensure that the required SDK version is checked.\n <\/p>\n \n Next, add the AppBar in the `activity_main.xml` file. Refer to the code below:\n <\/p>\n \n Next, add the code related to the AppBar in the \n The next step is to add menu items to the AppBar. First, create a menu resource file.\n <\/p>\n \n 1. Right-click the \n Override the `onCreateOptionsMenu` method to add the newly created menu to the AppBar.\n <\/p>\n \n Next, we will add icons to the AppBar so that users can access more features. This section explains how to add and configure icons.\n <\/p>\n \n Add the icon image to the \n The AppBar provides default design, but it can be customized as needed.
\n The AppBar in Android is implemented through the Toolbar<\/code> class. It can include various buttons, logos, menu icons, and more, playing a significant role in enhancing user experience.\n <\/p>\n2. Basic Components of AppBar<\/h2>\n
\n
3. Implementing AppBar<\/h2>\n
3.1 Create a New Android Project<\/h3>\n
\n 2. Select “Empty Activity” and enter the project name.
\n 3. Choose Java as the language and click “Finish”.\n <\/p>\n3.2 Modify build.gradle File<\/h3>\n
3.3 Modify activity_main.xml<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n tools:context=\".MainActivity\">\n\n <androidx.appcompat.widget.Toolbar\n android:id=\"@+id\/toolbar\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"?attr\/actionBarSize\"\n android:background=\"?attr\/colorPrimary\"\n app:popupTheme=\"@style\/ThemeOverlay.AppCompat.Light\" \/>\n\n <TextView\n android:id=\"@+id\/textView\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Hello, World!\"\n android:layout_below=\"@id\/toolbar\"\n android:layout_centerInParent=\"true\" \/>\n\n<\/RelativeLayout><\/code><\/pre>\n3.4 Write Code in MainActivity.java<\/h3>\n
MainActivity.java<\/code> file. Refer to the example below:\n <\/p>\npackage com.example.myapplication;\n\nimport androidx.appcompat.app.AppCompatActivity;\nimport android.os.Bundle;\nimport androidx.appcompat.widget.Toolbar;\n\npublic class MainActivity extends AppCompatActivity {\n\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_main);\n\n \/\/ Setting up the toolbar\n Toolbar toolbar = findViewById(R.id.toolbar);\n setSupportActionBar(toolbar);\n getSupportActionBar().setTitle(\"AppBar Example\");\n }\n}<\/code><\/pre>\n4. Adding Menu Items<\/h2>\n
4.1 Create Menu Resource File<\/h3>\n
res\/menu<\/code> folder and select “New” > “Menu Resource File”.
\n 2. Name the file `menu_main.xml` and click “OK”.\n <\/p>\n4.2 Modify menu_main.xml File<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\n\n <item\n android:id=\"@+id\/action_settings\"\n android:title=\"Settings\"\n android:orderInCategory=\"100\"\n android:showAsAction=\"never\" \/>\n\n<\/menu><\/code><\/pre>\n4.3 Add Menu to MainActivity.java<\/h3>\n
import android.view.Menu;\nimport android.view.MenuItem;\n\n\/\/ Add to MainActivity.java\n@Override\npublic boolean onCreateOptionsMenu(Menu menu) {\n getMenuInflater().inflate(R.menu.menu_main, menu);\n return true;\n}\n\n@Override\npublic boolean onOptionsItemSelected(MenuItem item) {\n int id = item.getItemId();\n\n if (id == R.id.action_settings) {\n \/\/ Action when settings item is clicked\n return true;\n }\n\n return super.onOptionsItemSelected(item);\n}<\/code><\/pre>\n5. Adding Icons to AppBar<\/h2>\n
5.1 Add Icon to drawable Folder<\/h3>\n
res\/drawable<\/code> folder.
\n For example, create a file named `ic_settings.xml` and set it up as follows:\n <\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<vector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:width=\"24dp\"\n android:height=\"24dp\"\n android:viewportWidth=\"24\"\n android:viewportHeight=\"24\">\n <path\n android:fillColor=\"#FF000000\"\n android:pathData=\"M12,16.5c-1.33,0 -2.48,0.51 -3.41,1.41l-1.59,-1.59c-2.5,2.5 -2.5,6.57 0,9.08s6.57,2.5 9.08,0s2.5,-6.57 0,-9.08l-1.59,1.59C14.48,17.01,13.33,16.5,12,16.5z M12,8.5c1.33,0 2.48,-0.51 3.41,-1.41l1.59,1.59c2.5,-2.5 2.5,-6.57 0,-9.08s-6.57,-2.5 -9.08,0 -2.5,6.57 0,9.08l1.59,-1.59C9.52,8.99,10.67,8.5,12,8.5z\"\/>\n<\/vector><\/code><\/pre>\n5.2 Add Icon to Menu Item<\/h3>\n
<item\n android:id=\"@+id\/action_settings\"\n android:title=\"Settings\"\n android:icon=\"@drawable\/ic_settings\"\n android:orderInCategory=\"100\"\n android:showAsAction=\"ifRoom\" \/><\/code><\/pre>\n6. Design and Customizing the AppBar<\/h2>\n
\n The following section discusses how to modify the style of the AppBar and additional customization options.\n <\/p>\n6.1 Modify AppBar Style in styles.xml<\/h3>\n
<style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.DarkActionBar\">\n <item name=\"colorPrimary\">#3F51B5<\/item>\n <item name=\"colorPrimaryDark\">#303F9F<\/item>\n <item name=\"colorAccent\">#FF4081<\/item>\n <\/style><\/code><\/pre>\n6.2 Change Colors<\/h3>\n