Aim:
Aim: Android Design Menus.
Android ActionBar is a menu bar that runs across the top of the activity screen in Android.
Android ActionBar can contain menu items that become visible when the user clicks the “menu” button.
Process:
Here is the process to design the Menus for Android application
Step 1: Create Android project
Step 2: Add some required dependencies ‘implementation ‘com.google.android.material:material:1.2.0’
Step 3: In activity_main.xml Design the main container of the menus bar as follows convention
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout>
<FrameLayout />
<com.google.android.material.bottomnavigation.BottomNavigationView/>
</androidx.constraintlayout.widget.ConstraintLayout>
Step 4: Create the following things
i. Create a menu for the Bottom Navigation Bar
ii. Menu Resource File
iii. Create required item for the menu
i.) The Navigation Bar needs to have some items which will create using Menu. To create a Menu, first, create a Menu Directory by clicking on the app -> res(right-click) -> New -> Android Resource Directory and select Menu in the Resource Type.
ii.) To create a Menu Resource File , click on the app -> res -> menu(right-click) -> New -> Menu Resource File and name it bottom_nav_menu.
iii.) Now the user can create as many items as he wants in the bottom_nav_menu.xml file. The user also needs to create an icon for each of these items. To create an icon, click on the app -> res -> drawable(right-click) -> New -> Image Asset.
Give the assets name following ic_ like ic_home
Choose asset type Clip Art then Select Clip to search then finish
*** This step will create ic_home_background.xml and ic_home_forground.xml file in res>drawable ***
Follow the above step many times for many assets (icon)
Now add these items in the bottom_nav_menu.xml. This is how the bottom_nav_menu.xml file looks like after adding the items: Following is the convention code will be in the code section
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/person"
android:title="Person"
android:icon="@drawable/ic_person_foreground"/>
</menu>
Step 5: Changing the Action Bar style
To change it, navigate to styles.xml by clicking on the app -> res -> values -> styles.xml and change the style opening tag as:
<style name=”AppTheme” parent=”Theme.MaterialComponents.Light.DarkActionBar”>
And the final format will be like
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Step 6: Creating Fragments to display
Here we will create three different blank fragments that will create a .java file and .xml simultaneously automatically. This different fragment will navigate by clicking on different menu bars.
To create a Fragment, click on the app(right-click) -> New -> Fragment -> Fragment (Blank). Name the fragment as FirstFragment and the corresponding XML file as fragment_first. To keep things simple, all three of the fragments will just contain a TextView. However, we can tweak this as we want it to be in the app.
This will create fragment_first.xml and FirstFragment.java files and in fragment_first.xml fill, there will be a fragment layout and one TextView but we can use them as we like.
fragment_first.xml will be the design of our first fragment and FirstFragmen.java will have any logic or perform any task be the code part where we can write Java code relate to the fragment_first.xml file
After designing some elements our fragment_first.xml might look like following this will be a demo we will provide the exact code in the code section
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SecondFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello_blank_fragment" />
</FrameLayout>
Similarly, we will create two more fragments SecondFragment and ThirdFragment
Step 7: In MainActivity.java file will be the final activity. Because we have everything that we need and lastly, we just need to code the MainActivity to connect everything to the application.
Here, first, create a function called setCurrentFragment() that takes a Fragment as an argument and sets it in our FrameLayout of activity_main.xml file. Add a click listener to the items of the Bottom Navigation Bar so that we display the corresponding Fragment when an item is clicked.
After adding all these codes.
Code:
MainActivity.java
activity_main.xml
bottom_nav_menu.xml
string.xml
AndroidManifest.xml
FirstFragment.java
fragment_first.xml
Similarly two more fragments
Output:
