كيفاش تصاوب Toolbar ب أندرويد


فهاد الدرس البسيط من سلسلة أندرويد غادي نشوفو كيفاش نقادو toolbar للتطبيق ديالنا غادي نشوفو كيفاش نديرو عليها تغييرات وكيفاش نزيدو قائمة جانبية بالإضافة لكيفاش نزيدو des actions للقائمة ديالنا بحيث ملي نضغط عليها تنفد واحد الأمر الدرس بسيط للمبتدئين غادي تعلم فيه كيفاش تعامل مع toolbar.

نظرة سريعة بالفيديو

1- الملف activity_main.xml

فأول حاجة غادي نديرو غادي نزيدو project جديد ف android studio سميه Toolbar او لي بغيتي ختار Basic Activity من بعد ميتزاد غادي تمشي للمجلد res/layout فيه كاين ملف سميتو activity_main.xml هادا هو الملف ديال الصفحة الرئيسية ديالنا فيه toolbar ديالنا عاطيينها background color و theme سميتو Toolbarغادي يكون عندنا فالملف styles.xml الكود ديال 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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.belasri.toolbar.MainActivity">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:theme="@style/Toolbar"/>

</RelativeLayout>
                            

2- الملف colors.xml

فالمجلد res/values كاين ملف colors.xml هادا فيه les couleurs لي غادي نحتاجو عندنا ال couleur ديال status bar لي هي هادي :


وال couleur ديال ل bar ديالنا بالإضافة لles couleurs ديال القائمة والtext ديالها الكود ديال الملف هو :

                                <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#CDDC39</color>
    <color name="colorPrimaryDark">#AFB42B</color>
    <color name="colorAccent">#DCE775</color>
    <color name="popup">#F0F4C3</color>
    <color name="popupText">#827717</color>
</resources>
                            

3- الملف styles.xml

دائما فالمجلد values فيه الملف styles.xml هادا الملف لي فيه les styles ديالنا هنا عندنا style ديال toolbar ديال ل pop menu الكود ديالو هو:

                                <resources xmlns:tools="http://schemas.android.com/tools" tools:ignore="NewApi">

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="popupTheme">@style/PopUpTheme</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <style name="PopUpTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:background">@color/popup</item>
        <item name="android:textColor">@color/popupText</item>
    </style>
    <style name="Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar"></style>
</resources>

                            

4- الملف menu_main.xml

فالمجلد res/menu كاين الملف menu_main.xml فيه غادي تكون القائمة ديالنا لي غادي نحتاجو ولي عبارة على des items كل واحد عندو id و title بالإضافة لكنحدد واش يبان ديما اولا على حسب l'espace لي خاوي ف toolbar أو لا مايبان حتى يكليكي المستخدم على الmenu الكود ديال الملف هو :   

                                    <menu 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"
    tools:context="com.example.belasri.toolbar.MainActivity">
    <item
        android:id="@+id/aide"
        android:orderInCategory="100"
        android:title="@string/aide"
        app:showAsAction="never" />
    <item
        android:id="@+id/params"
        android:orderInCategory="100"
        android:title="@string/param_tres"
        app:showAsAction="never" />
    <item
        android:id="@+id/exit"
        android:orderInCategory="100"
        android:title="@string/quitter"
        app:showAsAction="never" />
    <item
        android:id="@+id/search"
        android:title=""
        android:icon="@drawable/search"
        app:showAsAction="ifRoom"></item>
    <item
        android:id="@+id/contact"
        android:title=""
        android:icon="@drawable/contact"
        app:showAsAction="ifRoom"></item>

</menu>

                                

5- MainActivity.java

فالمجلد java كاين MainActivity.java لي هو الملف الرئيسي ديالنا ولي فيه الكود لي كيسترجع toolbar وكنزيدها للapp ديالي من بعدكاين onCreateOptionsMenu لي كتخد الملف menu_main.xml وكتزيدنا القائمة لي صاوبنا لل app منبعد كاين onOptionsItemSelecetd لي كتسترجع كل item بل id ديالو وكتtester فكل مرة كتعرض رسالة فقط ملي كيكليكي المستخدم على quitter فين كتخرج من التطبيق الكود ديال الملف هو :

                                    package com.example.belasri.toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.aide) {
            Toast.makeText(this, "Aidez moi", Toast.LENGTH_SHORT).show();
        }else if(id == R.id.params){
            Toast.makeText(this, "Paramétres", Toast.LENGTH_SHORT).show();
        }else if(id == R.id.exit){
            finish();
        }else if(id == R.id.search){
            Toast.makeText(this, "Recherche", Toast.LENGTH_SHORT).show();
        }else if(id == R.id.contact){
            Toast.makeText(this, "Contact", Toast.LENGTH_SHORT).show();
        }

        return super.onOptionsItemSelected(item);
    }
}

                                


بحث في الموقع


إشترك للتوصل بالجديد