تصميم navigation bottom جذاب لتطبيقك في برنامج اندرويد ستوديو - navigation bottom smooth

Ahmed Mahmoud

اخر تحديث :

تصميم navigation bottom جذاب لتطبيقك في برنامج اندرويد ستوديو - navigation bottom smooth

اهمية استخدام Bottom navigation داخل تتطوير تطبيقات الاندرويد

يعتبر واحد من اهم الاشياء الموجوده في تطوير تطبيقات الجوال ولا عنى عنه في تطوير تطبيقات الاندرويد او غيره لاهميته القصوى , وشكلة الاحترافي داخل تطبيقات الاندرويد ستوديو وقد سبق وان شرحنا لكم هذا الـ Bottom navigation او بمعنى اخر بوتوم بار - bottombar وسوف نقدم لكم في مقال اليوم شرح لكيفية عمل SmoothBottomBar بإستخدام لغة جافا بسهوله , قبل كل شيئ يجب عليك ان تكون متعلم لبرمجة الجافا لان هذة اللغة التي نعمل بها في مقالات الاندرويد ستوديو حاليا لذلك ننصحك بتعملها قبل كل شيئ .

يعتبر تطوير تطبيقات واحد من اكثر الوظايف التي لديها اقبال كبير من اكثر من شركة تطوير تطبيقات الجوال حيث تعد هذة الوظيفة من اهم الوظايف ومطور اندرويد ستوديو لديه القدرة على العمل في شركة تطوير تطبيقات الجوال براتب شهري و ايضا العمل في العمل الحر " freelancer " ويوجد مواقع كثرة للعمل الحر على الانترنت ويوجد طلبات في مجال تطوير تطبيقات الموبايل كبير جدا سواء كان بفلاتر او كوتلن او جافا او غيره الجميع موجود , ولكن قد يكون الافضليه لمطورين الفلاتر بسبب انها اوفر في المال وذلك لانه قد ياتي شخص يطلب تطوير تطبيقات الهواتف الذكية تعمل بناظم ios و اندرويد والميزانية تكون 300 دولار على سبيل المثال فالامر صعب جدا ان تقوم بعمل تطبيقين بلغات مختلفة لذلك يستخدمون فلاتر .

كيفية اضافة SmoothBottomBar داخل تطبيقك في الاندرويد ستوديو

اولا يجب عليك ان تقوم بإضافة المكتبة التالية داخل ملف buildgradle وقد سبق وان شرحنا لكم في الدروس السابقة كيف يمكن اضفتها عموما اتبع المسار التالي واضف الكود الموجود بين dependencies { و }

قم بإضافة المكتبة التالية

dependencies {
    implementation 'com.github.ibrahimsn98:SmoothBottomBar:1.7.6'
}

وايضا قم بإضافة الامر التالي وهو موجود في buildgradle الاخر .

allprojects {
	repositories {
		..
		maven { url 'https://jitpack.io' }
	}
}

كيفية اضافة الوان جديدة لتصميمك من اجل تطوير تطبيقات الجوال وتحسين شكلها

الان توجة الى ملف color وقم بإضافة الالوان التالية بداخلة , من اجل استخدامها داخل bottom navigation يمكنك تغير الالوان واضافة ما تريد براحتك كل هذا يرجع لك , ويمكنك ادراج الوان اخرى اذا احببت .

الالوان الموجودة بالصورة

    <color name="colorPrimary">#432fbf</color>
    <color name="colorPrimaryDark">#432fbf</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorTextPrimary">#ffffff</color>
    <color name="colorTextSecondary">#A3FFFFFF</color>
    <color name="colorBadge">#f4d415</color>

    <color name="purpul">#9930c7</color>
    <color name="blue">#216afc</color>
    <color name="green">#008643</color>
    <color name="orange">#ff9045</color>
    <color name="indicatorColor">#2DFFFFFF</color>
    <color name="iconTint">#C8FFFFFF</color>
    <color name="iconTintActive">#ffffff</color>

كيفية اضافة SmoothBottomBar داخل ملف xml من اجل استخدامه في تطبيقك

الان انتقل الى التصميم الخاص بك xml , وهنا في طبيعة الحال اريد ظهور هذة الازرار داخل activity_main لذلك توجة الى اي مكان تريد ظهور الازرار به واضف الكود التالي بداخلة , هذة الاكواد المسؤوله عن عملية اظهار شكل بوتوم متناسق وهذا لن يعمل اذا لم تكن قد اضفت المكتبه السابقة .

الكود الموجود بالصورة .

    <me.ibrahimsn.lib.SmoothBottomBar

        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:backgroundColor="@color/colorPrimary"
        app:iconSize="24dp"
        app:iconTint="@color/iconTint"
        app:iconTintActive="@color/iconTint"
        app:indicatorColor="@color/indicatorColor"
        app:indicatorRadius="10dp"
        app:itemPadding="10dp"
        app:menu="@menu/main"
        app:sideMargins="10dp"
        app:textColor="@color/colorTextPrimary"
        app:textSize="14sp" />

ايضا اضف لها FrameLayout لكي تظهر الفراجمنت الخاص بكل عنصر عند النقر عليها , ايضا سوف تلاحظ ظهور Eroor داخل menu لا تقلق قم بعمل alt + enter وقم بعمل له create resource file بإسم main وانقل له , قم بعمل item يحتوي على id وعنوان وصورة ويمكنك اضافة صورة عن طريق vector image او اي صورة من الانترنت الامر يرجع لك عموما هنا تقوم بتنظيم النص والصورة لكل عنصر وعدد العناصر ايضا وقد سبق وان شرحنا هذا في درس اضافة navigation bottom بالعربي عن طريق برنامج ألاندرويد ستوديو

الكود الموجود بالصورة السابقة

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

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/home"/>

    <item android:id="@+id/search"
        android:title="Search"
        android:icon="@drawable/search"/>


    <item android:id="@+id/profile"
        android:title="Profile"
        android:icon="@drawable/profile"/>


    <item android:id="@+id/add"
        android:title="location"
        android:icon="@drawable/location"/>
</menu>

لتصميم الصورة من داخل android studio نفسه قم بعمل vector asset وابحث عن الشكل وضع له اسم وارجع الى menu وضعه بداخله .

الان قم بإضافة BlankFragment بالاسم الذي تريدة وبالعدد الذي ترغب بعرضه من اجل تطوير تطبيقات الاندرويد وتصميم الشكل الذي ترغب به في كل واحده منهم وقد سبق وان شرحنا الفراجمنت بالعربي لبرنامج الاندرويد ستوديو من قبل وهنا قمت بتصميم عدد 4 فراجمنت بعدد العناصر الذي سوف اضعها في الزر .

اخر خطوة ان تتوجة الى MainActivity.class ومن ثم قم بتعريف SmoothBottomBar وبعدها قم بعمل setOnItemSelectedListener للـ Smooth Bottom Bar وبعدها سوف نضع لكل عنصر ينتقل ويعرض شيئ معين عن طريق switch والعنصر الاول هو 0 والثاني 1 وهكذا وكل case يوجد بداخلها replace للمكان الذي سوف تنقلك له , واخيرا قم بعمل function خاصة بعملة replace و id الخاص بها هو الموجود في المين اكتفتي كما قمنا بعمله في الخطوات الاولى , وهذة هي الفكرة ببساطة الان قم بعمل Run .

الكود الموجود بالصورة

    private SmoothBottomBar bottomBar;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        replace(new BlankFragment1());

        bottomBar = findViewById(R.id.bottomBar);

        bottomBar.setOnItemSelectedListener(new OnItemSelectedListener() {

            @Override

            public boolean onItemSelect(int i) {

                switch (i){

                    case 0:

                        replace(new BlankFragment1());

                        break;



                    case 1:

                        replace(new BlankFragment2());

                        break;



                    case 2:

                        replace(new BlankFragment3());

                        break;



                        case 3:

                        replace(new BlankFragment4());

                        break;

                }

                return true;

            }

        });



    }



    private void replace(Fragment fragment) {

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        transaction.replace(R.id.framelayout,fragment);

        transaction.commit();

}

}

اذا اردت ان يكون الشريط بشكل عمودي بدل افقي ممكن تستخدم امر app:cnb_orientationMode="vertical" في تصميم الxml عشان تخليه عمودي او طولي .

لمزيد من اكواد تطوير تطبيقات الجوال يمكنك مشاهدة القسم المختص ولا تنسى ان تشاهد المقالات السابقة .