1. What is AppBar?
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.
The AppBar in Android is implemented through the Toolbar class. It can include various buttons, logos, menu icons, and more, playing a significant role in enhancing user experience.
2. Basic Components of AppBar
AppBar consists of several components:
- Title: Displays the title of the current screen.
- Navigation Icon: An icon that helps users return to the previous screen.
- Menu Items: Icons that provide additional features.
- Action Buttons: Buttons that provide frequently used functionalities.
3. Implementing AppBar
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.
3.1 Create a New Android Project
1. Open Android Studio and select “New Project”.
2. Select “Empty Activity” and enter the project name.
3. Choose Java as the language and click “Finish”.
3.2 Modify build.gradle File
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.
3.3 Modify activity_main.xml
Next, add the AppBar in the `activity_main.xml` file. Refer to the code below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"
android:layout_below="@id/toolbar"
android:layout_centerInParent="true" />
</RelativeLayout>3.4 Write Code in MainActivity.java
Next, add the code related to the AppBar in the MainActivity.java file. Refer to the example below:
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.appcompat.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Setting up the toolbar
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("AppBar Example");
}
}4. Adding Menu Items
The next step is to add menu items to the AppBar. First, create a menu resource file.
4.1 Create Menu Resource File
1. Right-click the res/menu folder and select “New” > “Menu Resource File”.
2. Name the file `menu_main.xml` and click “OK”.
4.2 Modify menu_main.xml File
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_settings"
android:title="Settings"
android:orderInCategory="100"
android:showAsAction="never" />
</menu>4.3 Add Menu to MainActivity.java
Override the `onCreateOptionsMenu` method to add the newly created menu to the AppBar.
import android.view.Menu;
import android.view.MenuItem;
// Add to MainActivity.java
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
// Action when settings item is clicked
return true;
}
return super.onOptionsItemSelected(item);
}5. Adding Icons to AppBar
Next, we will add icons to the AppBar so that users can access more features. This section explains how to add and configure icons.
5.1 Add Icon to drawable Folder
Add the icon image to the res/drawable folder.
For example, create a file named `ic_settings.xml` and set it up as follows:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#FF000000"
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"/>
</vector>5.2 Add Icon to Menu Item
<item
android:id="@+id/action_settings"
android:title="Settings"
android:icon="@drawable/ic_settings"
android:orderInCategory="100"
android:showAsAction="ifRoom" />6. Design and Customizing the AppBar
The AppBar provides default design, but it can be customized as needed.
The following section discusses how to modify the style of the AppBar and additional customization options.
6.1 Modify AppBar Style in styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#3F51B5</item>
<item name="colorPrimaryDark">#303F9F</item>
<item name="colorAccent">#FF4081</item>
</style>6.2 Change Colors
To change colors and styles, define colors in res/values/colors.xml and use them in
styles.xml. You can modify the color codes appropriately to change them.
7. Conclusion
Through this tutorial, you learned about the role and implementation of the AppBar in Android app development using Java.
The AppBar is an essential component of the app, providing users with an intuitive interface that enhances their experience.
By customizing the AppBar in various ways, you can improve the overall style and functionality of your app.
Now you have the ability to integrate the AppBar into your app to provide a variety of features.
Continue to practice and add various functionalities to create a more advanced app!