آموزش ساخت Bottom navigation در اندروید استودیو :
Bottom navigation از کامپوننت های متریالی اندروید است که در پایین صفحه نمایش داده می شود و کاربر را قادر می شازد تا بتواند بین ضفحات حرکت کند. مثل نوار پایین نرم افزار اینستاگرام و …. .
برای Bottom navigation 3 الی ۵ گزینه مناسب است که معمولا برای قسمت های مختلف برنامه استفاده می شود .
اگر برنامه ای که ما ساختیم و می خواهیم از bottom navigation استفاده کنیم ۲ قسمت مهم داشت استفاده از این ویجت گزینه مناسبی نیست و به جای ان از TABS یا navigation drawer استفاده می کنیم.
چند نکته مهم قبل از یادگیری کد نویسی :
در استفاده از text label باید متن انتخابی از ۱ جمله بیشتر نباشد.
سادگی را حفظ کنید و از bottom navigation پیچیده و با رنگ های مختلف استفاده نکنید.
از bottom navigation و Tabs نباید به صورت همزمان استفاده کنید.
قبل از اتمام کار متن و آیکون هارا یکسان سازی کنید.
برای کد نویسی باید از کتاب خانه Design گوگل استفاده شود پس خط زیر را به Gradle خود افزوده و منتظر شوید تا Sync شود.

compile 'com.android.support:design:25.0.0',

 
پس بخش کامل کد به شکل زیر شد ممکن است مقداری با کد شما فرق کند زیاد مهم نیست

apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "com.inducesmile.androidbottomnavigationview"
minSdkVersion 14
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:design:25.0.0'
compile 'com.android.support:support-v4:25.0.0'
testCompile 'junit:junit:4.12'

بخش فایل string.xml همانند زیر می شود فقط تعداری string اضافه کردیم نیاز به توضیح ندارد
 

<resources>
<string name="app_name">Android Bottom Navigation View</string>
<string name="menu">Menu</string>
<string name="action_search">Search</string>
<string name="action_cart">Cart</string>
<string name="action_hot_deals">Hot deals</string>
<!-- TODO: Remove or change this placeholder text -->
<string name="hello_blank_fragment">Hello blank fragment</string>
<string name="search_fragment">Search Fragment</string>
<string name="cart_fragment">Cart Fragment</string>
<string name="hot_deals_fragment">Hot Deals Fragment</string>
</resources>

 
فایل colors.xml همانند زیر می شود
 

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#56B900</color>
<color name="colorPrimaryDark">#289C2B</color>
<color name="colorAccent">#FF4081</color>
<color name="colorPrimaryLight">#84FF19</color>
<color name="colorWhite">#ffffff</color>
<color name="colorBlack">#000000</color>
<color name="colorDivider">#2FE897</color>
<color name="colorBorder">#a7a4a4</color>
<color name="colorExtra">#fffac1</color>
</resources>

 
فایل 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.inducesmile.androidbottomnavigationview.MainActivity">
<FrameLayout
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_navigation"
android:layout_alignParentTop="true">
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@color/color_state_list"
app:itemTextColor="@color/color_state_list"
android:layout_alignParentBottom="true">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>

 
و فایل جاوا Mainactivity.java همانند زیر می شود.
 

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
private static final String TAG = MainActivity.class.getSimpleName();
private BottomNavigationView bottomNavigation;
private Fragment fragment;
private FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottomNavigation = (BottomNavigationView)findViewById(R.id.bottom_navigation);
bottomNavigation.inflateMenu(R.menu.bottom_menu);
fragmentManager = getSupportFragmentManager();
bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
switch (id){
case R.id.action_search:
fragment = new SearchFragment();
break;
case R.id.action_cart:
fragment = new CartFragment();
break;
case R.id.action_hot_deals:
fragment = new DealsFragment();
break;
}
final FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.main_container, fragment).commit();
return true;
}
});
}
}

یک فایل xml ایجاده کرد و نام آن را BOTTOM_MENU.XML قرار دهید.
 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:title="@string/action_search"
app:showAsAction="ifRoom"
android:enabled="true"
android:icon="@drawable/ic_action_menu">
</item>
<item
android:id="@+id/action_cart"
android:title="@string/action_cart"
app:showAsAction="ifRoom"
android:enabled="true"
android:icon="@drawable/ic_action_menu">
</item>
<item
android:id="@+id/action_hot_deals"
android:title="@string/action_hot_deals"
app:showAsAction="ifRoom"
android:enabled="true"
android:icon="@drawable/ic_action_menu">
</item>
</menu>

 
حال زمان ایجاد Fragment برای صفحه های Bottom Navigation رسیده است یک فایل به نام DEALSFRAGMENT.JAVA ایجاد کرده و کد های زیر را در آن قرار دهید.(دقت کنید کدهای XMl و javd با هم گذاشته شده است.)
 
 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class DealsFragment extends Fragment {
public DealsFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_deals, container, false);
}
}
<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="com.inducesmile.androidbottomnavigationview.DealsFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hot_deals_fragment"
android:textStyle="bold"
android:layout_gravity="center"/>
</FrameLayout>

 
کد های   CARTFRAGMENT.JAVA :

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CartFragment extends Fragment {
public CartFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_cart, container, false);
}
}
<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="com.inducesmile.androidbottomnavigationview.CartFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cart_fragment"
android:textStyle="bold"
android:layout_gravity="center"/>
</FrameLayout>

 
کد های SEARCHFRAGMENT.JAVA :

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SearchFragment extends Fragment {
public SearchFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_search, container, false);
return view;
}
}
<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="com.inducesmile.androidbottomnavigationview.SearchFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textStyle="bold"
android:text="@string/search_fragment" />
</FrameLayout>

در مورد کدهایی که باهم گذاشته شده است یک توضیح بدم شما باید یک فایل java و یک فایل xml برای هر کردام از کد ها درست کنید و بخش کد مورد نظر را در آن قرار دهید .