Bottom Navigation Bar in Android Studio with Activities – Bottom Navigation View
Table of Contents
Bottom Navigation Bar
The Bottom Navigation Bar is a navigation view provided at the bottom of the screen making it easy for users to switch between multiple fragments or activities with the help of the bottom navigation bar.
We have provided four activities – Home, Search, Settings, and Profile. Users can easily switch between any of these. You can use fragments or activities as per your choice.
Step-by-Step Implementation
Step 1: Open Android Studio, Create New Project, Choose Empty Activity, and Name the Project “Bottom Navigation Activities”.
Step 2: Pre-requisites
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="lavender">#8692f7</color>
<color name="grey">#d2d2d2</color>
</resources>
strings.xml
<resources>
<string name="app_name">Bottom Navigation</string>
</resources>
Create Android Resource Directory “anim”
slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromXDelta="100%p"
android:toXDelta="0" />
</set>
slide_out_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromXDelta="0"
android:toXDelta="-100%p" />
</set>
themes.xml
Disable the action bar and change the theme color to lavender as per the below code.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.BottomNavActivityPractice" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/lavender</item>
<item name="colorPrimaryVariant">@color/lavender</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
</style>
<style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
<item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
<item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
</style>
</resources>
bottom_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/lavender"/>
<corners
android:radius="40dp"/>
</shape>
item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:color="@color/white"/>
<item
android:state_selected="false"
android:color="@color/grey"/>
</selector>
Step 5: Add all the vector assets to the drawable folder
Icons – home, search, settings, person pin.
Related Article
Step 3: bottom_menu.xml
Right-click on res -> Android Resource Directory and select the menu then right-click on the menu directory and click on New -> Menu Resource File and name “bottom_menu”.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/bottom_home"
android:icon="@drawable/baseline_home_24"
android:title="Home" />
<item
android:id="@+id/bottom_search"
android:icon="@drawable/baseline_search_24"
android:title="Search" />
<item
android:id="@+id/bottom_settings"
android:icon="@drawable/baseline_settings_24"
android:title="Settings" />
<item
android:id="@+id/bottom_profile"
android:icon="@drawable/baseline_person_pin_24"
android:title="Profile" />
</menu>
Step 7: activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:textColor="@color/lavender"
android:layout_centerInParent="true"
android:textSize="36sp" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginBottom="30dp"
android:layout_marginTop="30dp"
android:background="@drawable/bottom_background"
android:elevation="2dp"
app:itemIconSize="30dp"
app:itemIconTint="@drawable/item_selector"
app:itemRippleColor="@android:color/transparent"
app:labelVisibilityMode="unlabeled"
app:menu="@menu/bottom_menu" />
</RelativeLayout>
Step 4: all XML files
Create four activities named – MainActivity (HomeActivity), SearchActivity, SettingsActivity, and ProfileActivity.
activity_search.xml
<?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=".SearchActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:textColor="@color/lavender"
android:layout_centerInParent="true"
android:textSize="36sp" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:background="@drawable/bottom_background"
android:elevation="2dp"
app:itemIconSize="30dp"
app:itemIconTint="@drawable/item_selector"
app:itemRippleColor="@android:color/transparent"
app:labelVisibilityMode="unlabeled"
app:menu="@menu/bottom_menu" />
</RelativeLayout>
activity_settings.xml
<?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=".SettingsActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="@color/lavender"
android:layout_centerInParent="true"
android:textSize="36sp" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:background="@drawable/bottom_background"
android:elevation="2dp"
app:itemIconSize="30dp"
app:itemIconTint="@drawable/item_selector"
app:itemRippleColor="@android:color/transparent"
app:labelVisibilityMode="unlabeled"
app:menu="@menu/bottom_menu" />
</RelativeLayout>
activity_profile.xml
<?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=".ProfileActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:textColor="@color/lavender"
android:layout_centerInParent="true"
android:textSize="36sp" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:background="@drawable/bottom_background"
android:elevation="2dp"
app:itemIconSize="30dp"
app:itemIconTint="@drawable/item_selector"
app:itemRippleColor="@android:color/transparent"
app:labelVisibilityMode="unlabeled"
app:menu="@menu/bottom_menu" />
</RelativeLayout>
Step 5: MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigation);
bottomNavigationView.setSelectedItemId(R.id.bottom_home);
bottomNavigationView.setOnItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.bottom_home:
return true;
case R.id.bottom_search:
startActivity(new Intent(getApplicationContext(), SearchActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_settings:
startActivity(new Intent(getApplicationContext(), SettingsActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_profile:
startActivity(new Intent(getApplicationContext(), ProfileActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
}
return false;
});
}
}
SearchActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class SearchActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_search);
BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigation);
bottomNavigationView.setSelectedItemId(R.id.bottom_search);
bottomNavigationView.setOnItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.bottom_home:
startActivity(new Intent(getApplicationContext(),MainActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_search:
return true;
case R.id.bottom_settings:
startActivity(new Intent(getApplicationContext(), SettingsActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_profile:
startActivity(new Intent(getApplicationContext(), ProfileActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
}
return false;
});
}
}
SettingsActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class SettingsActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_settings);
BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigation);
bottomNavigationView.setSelectedItemId(R.id.bottom_settings);
bottomNavigationView.setOnItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.bottom_home:
startActivity(new Intent(getApplicationContext(),MainActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_search:
startActivity(new Intent(getApplicationContext(), SearchActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_settings:
return true;
case R.id.bottom_profile:
startActivity(new Intent(getApplicationContext(), ProfileActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
}
return false;
});
}
}
ProfileActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class ProfileActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_profile);
BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigation);
bottomNavigationView.setSelectedItemId(R.id.bottom_profile);
bottomNavigationView.setOnItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.bottom_home:
startActivity(new Intent(getApplicationContext(),MainActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_search:
startActivity(new Intent(getApplicationContext(), SearchActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_settings:
startActivity(new Intent(getApplicationContext(), SettingsActivity.class));
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
finish();
return true;
case R.id.bottom_profile:
return true;
}
return false;
});
}
}
Output
0 Komentar