أفضل المواقع تحميل جميع نسخ ويندوز

 إنشاء Custom Bottom Navigation في Android

سنتعلم في هذا البرنامج التعليمي إنشاء Custom BottomNavigation باستخدام لغة الجافا في Android قد صادفنا جميعًا تطبيقات بها شريط تنقل سفلي. تتضمن بعض الأمثلة الشائعة Instagram و WhatsApp وما إلى ذلك في هذه المقالة ، دعنا نتعلم كيفية تنفيذ مثل شريط التنقل السفلي الوظيفي في تطبيق Android. فيما يلي معاينة نموذج لشريط التنقل السفلي المخصص في تطبيقنا يمكنك أيضا تطويرة واستخدمه في تطبيقاتكم و مشاريعكم

رابط تحميل كود المصدر اسفل المقال

الخطوة 1 وبعد انشاء مشروع جديد نقوم بإنشاء ملف menu ثم بعد ذلك نقوم بأنشاء ملف التصميم الخاص  بـ قائمة BottomNavigation ونقوم بتسميتها navigation.xml ثم نلصق الكود سوف تجدون رابط تحميل الكود و الايقونات كامل اسفل المقال 

الكود التالي

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_menu_home"
        android:title="@string/nav_home" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notification_ym"
        android:title="@string/nav_notifications" />

    <item
        android:id="@+id/navigation_about"
        android:icon="@drawable/ic_menu_about"
        android:title="@string/nav_about" />

</menu>

الخطوة 2 الان سوف نقوم بوضع هذا الكود في ملف التصميم النشاط الرئيسي  activity_main.xml

لقد انشانا وسم BottomNavigationView داخل تصميم النشاط قوم بنسخ الكود ووضعه في activity_main.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:card_view="http://schemas.android.com/tools"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <LinearLayout
        android:gravity="center"
        android:layout_gravity="center"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <LinearLayout
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txt_title"
                android:textColor="@color/black"
                android:fontFamily="@font/coffe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/nav_home"
                android:textSize="30sp"/>

        </LinearLayout>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/navigation_main"
            android:layoutDirection="rtl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/purple_500"
            app:itemBackground="@color/purple_500"
            android:foreground="?attr/selectableItemBackground"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/navigation" />

    </LinearLayout>
</RelativeLayout>

الخطوة 3 سوف نقوم ببرمجته داخل ملف الجافا  MainActivity.java

لقد انشانا وسم BottomNavigationView داخل ملف الجافا لنشاط قوم بنسخ الكود ووضعه في MainActivity.java

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

import com.google.android.material.bottomnavigation.BottomNavigationView;


public class MainActivity extends AppCompatActivity {


    BottomNavigationView navigation;
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    navigation.setItemBackgroundResource(R.color.purple_500);
                    MainActivity.this.title_text.setText(getResources().getString(R.string.nav_home));
                    Toast.makeText(getBaseContext(),getResources().getString(R.string.nav_home), Toast.LENGTH_SHORT).show();
                    return true;
                case R.id.navigation_notifications:
                    navigation.setItemBackgroundResource(R.color.purple_500);
                    MainActivity.this.title_text.setText(getResources().getString(R.string.nav_notifications));
                    Toast.makeText(getBaseContext(),getResources().getString(R.string.nav_notifications),Toast.LENGTH_SHORT).show();
                    return true;
                case R.id.navigation_about:
                    navigation.setItemBackgroundResource(R.color.purple_500);
                    MainActivity.this.title_text.setText(getResources().getString(R.string.nav_about));
                    Toast.makeText(getBaseContext(),getResources().getString(R.string.nav_about),Toast.LENGTH_SHORT).show();
                    return true;
            }
            return false;
        }
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);;
      
        navigation = (BottomNavigationView) findViewById(R.id.navigation_main);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    

    }

}

قم بتنزيل كود المصدر Custom Bottom Navigation مجانًا: انقر هـــــــــــــــنــــــا للتحميل

لا تنسوا متابعتنا على موقعنا و الاشتراك في قناتنا على اليوتيوب و مواقع التواصل الاجتماعي
والسلام عليكم ورحمة الله

شكرا لكم علي زيارة موقعنا " علوش لتقنية المعلومات "