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

إنشاء شريط الأدوات المخصص CustomToolbar في الاندرويد

سنتعلم في هذا البرنامج التعليمي إنشاء CustomToolbar باستخدام لغة الجافا في Android المعروف بشريط الأدوات الأعلى وسوف نتعلم كيفية دمجه وربطة برمجيا في تصميم النشاط في الاندرويد ووضع تصميم مميز لشريط الأدوات ويمكن إضافة الايقونات الخاص مثل ايقون الاشعارات المشاركة لتطبيق و غيرة ووضع عنوان النشاط والتحكم في لونة و نوع الخط فيما يلي لقد قمنا بعمل كود مميز استخدامه في تطبيقاتكم

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

الخطوة 1 لكي نقوم بأنشاء CustomToolbar سوف انشاء ملف التصميم وسوف نسمية toolbar_layout.xml داخل مجلد المشروع layout

انسخ الكود التالي وقم بأضافتة في ملف toolbar_layout.xml

   <androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:local="http://schemas.android.com/tools"
    android:id="@+id/toolbar_info"
    android:layoutDirection="rtl"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    android:background="@color/purple_500">

            <LinearLayout
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:background="@color/transparent"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="0dp">
                <LinearLayout
                    android:orientation="horizontal"
                    android:background="@color/transparent"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="0">
                    <ImageButton
                        android:id="@+id/action_bar_home"
                        android:background="@android:color/transparent"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:src="@drawable/logo_home"
                        android:scaleType="fitEnd" />


                    <ImageButton
                        android:id="@+id/btn_notify"
                        android:background="@android:color/transparent"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:layout_marginTop="0dp"
                        android:src="@drawable/ic_notification"
                        android:scaleType="fitCenter"
                        app:tint="@color/white" />

                    <ImageButton
                        android:id="@+id/btn_share_m"
                        android:background="@android:color/transparent"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:layout_marginTop="0dp"
                        android:src="@drawable/ic_share"
                        app:tint="@color/white"
                        android:scaleType="fitCenter" />


                </LinearLayout>
                <LinearLayout
                    android:orientation="horizontal"
                    android:background="@color/transparent"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="8">
                    <TextView
                        android:textAppearance="?android:textAppearanceMedium"
                        android:textStyle="bold"
                        android:textColor="@color/white"
                        android:gravity="center_horizontal"
                        android:id="@+id/title_text"
                        android:padding="5dp"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/title_item" />

                </LinearLayout>

            </LinearLayout>

</androidx.appcompat.widget.Toolbar>

الخطوة 2 نقوم الان بتضمين ملف  toolbar_layout.xml في ملف تصميم النشاط activity_main.xml

انسخ الكود التالي وضعه في ملف  activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">


    <include
        android:id="@+id/toolbar_main"
        layout="@layout/toolbar_layout"/>

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


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


            <TextView
                android:id="@+id/txt_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:layout_marginLeft="10.0dp"
                android:layout_marginTop="3.0dp"
                android:layout_marginRight="10.0dp"
                android:gravity="center"
                android:hint="شريط الادوات المخصص"
                android:textColor="#03274B"
                android:textSize="30sp"
                android:fontFamily="@font/coffe" />


        </LinearLayout>

    </LinearLayout>
</LinearLayout>

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

وضع الكود التالي في ملف MainActivity.java

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {


    private Toolbar toolbar;

    private TextView title_text;

    private ImageButton btn_home;


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

   
        Toolbar toolbar = findViewById(R.id.toolbar_main);
        this.toolbar = toolbar;
        setSupportActionBar(toolbar);
        TextView texttitle = (TextView)this.toolbar.findViewById(R.id.title_text);
        this.title_text = texttitle;
        this.title_text.setText("Custom Toolbar");
   
        this.btn_home = this.toolbar.findViewById(R.id.action_bar_home);
        this.btn_home.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
           
                Toast.makeText(getBaseContext(),"اغلاق التطبيق", Toast.LENGTH_SHORT).show();
            }
        });
    


        ImageButton btn_bar_notify = (ImageButton)this.toolbar.findViewById(R.id.btn_notify);
        btn_bar_notify.setOnClickListener(new View.OnClickListener() {
            public void onClick(View param1View) {
                Toast.makeText(getBaseContext(),"الاشعارات", Toast.LENGTH_SHORT).show();
            }
        });

        ImageButton btn_share = (ImageButton)this.toolbar.findViewById(R.id.btn_share_m);
        btn_share.setOnClickListener(new View.OnClickListener() {
            public void onClick(View param1View) {
                Toast.makeText(getBaseContext(),"مشاركة", Toast.LENGTH_SHORT).show();

            }
        });

    }




}

 

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

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

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