تطبيق إعلانات بأندرويد و firebase الجزء الأول


فهاد التطبيق الجديد من سلسلة أندرويد غادي نقادو تطبيق ديال إعلانات بحال avito فالمستخدم ديال التطبيق ديالنا غادي يكون عندو الإمكانية ديال الإطلاع على جميع الإعلانات بالإضافة للتسجيل ووضع إعلانات خاصة به كما يمكنلو يزيد إعلانات فالقائمة المفضلة إلى غير دالك من الإمتيازات.

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

1- إضافة projet جديد ف android studio وتعديل الملف activity_main.xml

فأول حاجة غادي نديرو غادي نزيدو project جديد ف android studio ختار Basic Activity سميه AdsApp من بعد ميتزاد غادي تمشي ل dossier res منبعد layout ثم الملف activity_main فهنا غادي تعرض الإعلانات لي عندي فقاعدة البيانات من بعد غادي ندير عليه تعديلات غادي نزيد فيه RecyclerView لي هي بمثابة liste غادي يتعرضوا فيها les annonces لي عندنا كاملين وعندي ايضا BottomNavigationView لي هي واحد ل menu غادي تكون لتحت كيف شفنا فالفيديو وايضا عندي Floating Button لي غادي تمكن مني نكليكي عليها نتوجه لل activity ديال إضافة إعلان الكود ديال الملف هو:


                                <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:background="#EFF0F1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.belasri.hiresell.MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include layout="@layout/toolbar"></include>
    </RelativeLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_marginTop="55dp"
        android:padding="5dp"
        android:layout_marginBottom="55dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNav"
        android:background="@color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_menu"
        android:elevation="5dp"
        android:layout_gravity="bottom"
        >
    </android.support.design.widget.BottomNavigationView>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/createBtn"
        app:backgroundTint="@color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="40dp"
        android:clickable="true"
        app:elevation="10dp"
        app:srcCompat="@drawable/ic_add" />
</android.support.design.widget.CoordinatorLayout>
                            

2- إضافة ل bottom menu للتطبيق ديالنا

باش نزيد ل bottom menu غادي نمشي ل dossier res/layout ثم غادي نزيد directory جديدة سميها menu منبعد فيها زيد ملف عبارة عن ressource file سميه ل bottom_menu.xml فيه غادي تكون ل menu لي لتحت فعندي ل items كل واحد عندو title و icon ف les icones غادي تلقاهم مع الكود سورس فالكود ديال الملف هو :

                                <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:title="Accueil"
        android:orderInCategory="1"
        android:icon="@drawable/ic_home_black_24dp"></item>
    <item
        android:id="@+id/fav"
        android:title="Favoris"
        android:icon="@drawable/fav"
        android:orderInCategory="2"></item>
    <item
        android:id="@+id/notifs"
        android:title="Notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:orderInCategory="3"></item>
    <item
        android:id="@+id/search"
        android:title="Recherche"
        android:orderInCategory="4"
        android:icon="@drawable/ic_search_black_24dp"></item>
</menu>
                            

3- إضافة ل drawer menu للتطبيق ديالنا

فباش نزيد drawer menu للتطبيق ديالنا لي هي ال القائمة الجانبية فغادي نزيد ملف جديد دائما ف menu سميه nav_menu.xml فيه العناصر المكونة للقائمة فتقريبا نفس الكود لي زدنا فل bottom menu الكود ديال الملف  هو :

                                <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/register"
            android:title="Register"
            android:icon="@drawable/ic_assignment_ind_black_24dp"></item>

        <item
            android:id="@+id/login"
            android:title="Login"
            android:icon="@drawable/ic_account_circle_black_24dp"></item>
        <item
            android:id="@+id/profile"
            android:title="Profile"
            android:icon="@drawable/ic_perm_identity_black_24dp"></item>
        <item
            android:id="@+id/logout"
            android:title="Logout"
            android:icon="@drawable/logout_icon"></item>
    </group>
</menu>
                            

4- إضافة ل header ل drawer menu

فكيف شفنا فالفيديو القائمة الجانبية عندي فيها واحد ل header لي فيه background image وفيه ايضا اسم المستخدم ملي كيكون مكونيكطي والتصويرة ديالو ولإمايل فباش نزيد هادشي كنمشي ل res/layout فيه كنزيد ملف جديد سميه nav_header.xml فيه عندي ImageView و deux TextView فل ImageView لي عندي زدتها بواحد ل plugin لي كيمكن باش نرد الصور دائرية من بعد غادي نزيدوه الكود ديال الملف هو :

                                    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:padding="16dp"
    android:gravity="bottom"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="@drawable/header"
    >

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/user_header_image"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:src="@drawable/abc56789"
        android:scaleType="centerCrop"
        />
    <TextView
        android:id="@+id/user_header_fullname"
        android:textColor="@color/white"
        android:paddingTop="8dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/user_header_email"
        android:textColor="@color/white"
        android:paddingTop="4dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
                                

5- إضافة ل bibliothèques لي غادي نحتاجو للملف build.gradle

فالملف build.gradle ديال ل app كنزيد les bibliothèques لي غادي نحتاج فعندي circle image لي غادي ترد ل image دائرية كيف قلنا ثم كاين firebase لي غادي تكون هي ل backend ديالنا وعندي picasso لي كتمكن باش ن télécharger الصور ونعرضهم ثم عندي ل image cropper لي كنقطع بها الصور الكود لي زدت هو : 

                                    apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion '27.0.3'
    defaultConfig {
        applicationId "com.example.belasri.hiresell"
        minSdkVersion 14
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:design:26.0.0-alpha1'
    compile 'de.hdodenhof:circleimageview:2.1.0'
    compile 'com.android.support:cardview-v7:26.0.0-alpha1'
    compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'
    compile 'com.google.firebase:firebase-core:10.2.0'
    compile 'com.google.firebase:firebase-database:10.2.0'
    compile 'com.google.firebase:firebase-auth:10.2.0'
    compile 'com.google.firebase:firebase-storage:10.2.0'
    compile 'com.theartofdev.edmodo:android-image-cropper:2.5.+'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.firebaseui:firebase-ui-database:1.2.0'
    compile 'com.google.gms:google-services:3.1.0'
    testCompile 'junit:junit:4.12'
}
apply plugin: 'com.google.gms.google-services'
                                


بحث في الموقع


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