bottom navigation view

توصیه شده از bottom nav با فریم لیوت به کار گرفته بشه و نه ویو پیجر.

 

کد XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
//بک گراند کل باتن نویگیشن
        android:background="@color/white"

//برای آیکون ها تعریف شده که اگر سلکت شدن
//رنگشون نارنجی شه و در غیر این صورت خاکستری باشن
//اینو توی تینت تعریف میکنیم
        app:itemIconTint="@color/nav_item"

//دقیقا شرایط بالا برای فونت آیتم ها هم تعریف شده
        app:itemTextColor="@color/nav_item"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/frameLayout"
        app:menu="@menu/main_menu"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

 

برای اتریبیوت های app:itemIconTint و app:itemTextColor باید رنگ بدیم. اینجا توی selector وضعیت رو تعریف کردم و توی color فراخونی کردم.

selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#FF9800" android:state_checked="true"/>
    <item android:color="#80040404"/>

</selector>

color:

<color name="nav_item">@drawable/nav_icon_color</color>

کد جاوا:

 

public class MainActivity extends AppCompatActivity {
    private BottomNavigationView bottomNavigationView;
    private FrameLayout frameLayout;
    private HomeFragment homeFragment;
    private NotificationFragment NotificationFragment;
    private PersonFragment PersonFragment;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigationView = findViewById(R.id.bottomNavigationView);
        frameLayout = findViewById(R.id.frameLayout);

        homeFragment = new HomeFragment();
        NotificationFragment = new NotificationFragment();
        PersonFragment = new PersonFragment();

//لیسنر برای باتن نویگیشن
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
//این استایل سلکتور اینجوریه که با سلکت شدن هر آیتم یه هاله نارنجی روش قرار بگیره
                    case R.id.home:
                        bottomNavigationView.setItemBackgroundResource(R.drawable.selected_item);
                        setFragment(homeFragment);
                        return true;

                    case R.id.notification:
                        bottomNavigationView.setItemBackgroundResource(R.drawable.selected_item);
                        setFragment(NotificationFragment);
                        return true;

                    case R.id.person:
                        bottomNavigationView.setItemBackgroundResource(R.drawable.selected_item);
                        setFragment(PersonFragment);

                        return true;

                    default:

                        return false;

                }


            }
        });
    }

    private void setFragment(Fragment fragment) {

        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.frameLayout,fragment);
        fragmentTransaction.commit();

    }
}

 

کد استایل سلکت شدن هر آیتم:

selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/beck_item_selected"/>
    <item android:state_checked="false" android:drawable="@color/white"/>


</selector>

 

beck_item_selected:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#80FFC107"/>


</shape>

برای اینکه در حالت landscape فول صفحه رو بگیره کد زیر را در dimems.xml اضافه میکنیم: منبع

 

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
    <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>

 

کد ایجاد یک خط زیر هر آیتم سلکت شده:

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="17dp"
        android:right="17dp"
        android:top="51.5dp"> // ارتفاع نویگیشن باتن رو 56دی پی گذاشتم

        <shape android:shape="line" >

            <corners android:radius="5dp" />
            <stroke
                android:width="4dp"
                android:height="2dp"
                android:color="#ff0000" />

        </shape>

    </item>


</layer-list>

 

سایز نویگیشن باتن و اطلاعات اضافی در موردش