آموزش Bottom Navigation View در اندروید

سلام دوستان گل در این بخش از آموزش اندروید به Bottom Navigation View می پردازیم در قدیم استفاده از Bottom Navigation View فقط توسط کتاب خانه های مختلف امکان پذیر بود اما گوگل پس از آپدیت کتاب خانه Desgin خود Bottom Navigation View را به آن افزود.
خب همانطور که گفته شد باید از کتاب خانه Design گوگل استفاده شود پس خط زیر را به Gradle خود افزوده و منتظر شوید تا Sync شود.
در صورتی که Sync انجام نشد (Failed شد ) این پست رو مطالعه کنید.

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

1	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'

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>

<string name="app_name">Android Bottom Navigation View</string>

<string name="action_search">Search</string>

<string name="action_hot_deals">Hot deals</string>

<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>

<?xml version="1.0" encoding="utf-8"?>

<color name="colorWhite">#ffffff</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>

<?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;
            }
        });
    }
}

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>

<?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>

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>

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>

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 برای هر کردام از کد ها درست کنید و بخش کد مورد نظر را در آن قرار دهید .
آموزش به پایان رسید انشاالله که مثل همیشه مفید بوده باشد.

مطالعه بیشتر

3 پاسخ به “آموزش Bottom Navigation View در اندروید”

بهار گفت:
مرداد 1, 1396 در 1:33 ب.ظ
سلام خسته نباشین مرسی از اموزش خوبتون
این اموزششتون محدودیت خاصی نداره؟ مثلا می تونم با Bottom Navigation View به پایگاه داده وصل شم؟ کتابخونش این دسترسی به من میده؟
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  مرداد 1, 1396 در 3:26 ب.ظ
  سلام فکر می کنم معنی محدودیت را به درستی متوجه نشدم چه ربطی دارد با Bottom Navigation View به دیتابیس وصل شد ؟!
  اگر منظور شما قرار دادن دیتا های دیتابیس در Bottom Navigation View است باید بگم مشکلی ندارد چون هر صفحه در آن فرگمنت است و باید داده در فرگمنت لود شود.
  موفق و موید باشید.
  پاسخ
مهران گفت:
شهریور 5, 1397 در 5:36 ب.ظ
سلام
فونت Bottom Navigation View رو چه جوری میشه عوض کرد ؟
من از کاستوم استایل و font family استفاده کردم و نشد .
میشه مثل TabLayout یه Textview براش ست کنیم و فونت Textview رو با typeface عوض کنیم ؟
پاسخ

آموزش Bottom Navigation View در اندروید

CARTFRAGMENT.JAVA

SEARCHFRAGMENT.JAVA

مطالب مشابه

3 پاسخ به “آموزش Bottom Navigation View در اندروید”

دیدگاهتان را بنویسید لغو پاسخ

CARTFRAGMENT.JAVA

SEARCHFRAGMENT.JAVA

مطالب مشابه

3 پاسخ به “آموزش Bottom Navigation View در اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی