تطبيق حديقة حيوانات بإستعمال Android و Google Maps الجزء الأول

imadbelasri Android
AN

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


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


- إضافة مشروع جديد

أول حاجة غادي نفتح Android Studio وغادي نزيد مشروع جديد نسميه Zoo App من بعد غادي نمشي ل build.gradle ديال ل app وكتزيد عليه بعض التغييرات لي غادي يمكننا باش نخدمو بخرائط غوغل ثم واحد javascript framework لي غادي تمكنا باش نسترجعوا المعلومات من الملفات لي غادي نزيدو من بعد en ligne سميتها retrofit ثم واحدة أخرى سميتها Picasso لي غادي نحتاجوها باش نعرضو الصور يمكنلك تبحث عليهم فغوغل باش تاخد معلومات كاملة عليهم الكود ديال الملف build.gradle هو :

                                                    
                                                        apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"

    defaultConfig {
        applicationId "com.example.darijacoding.annoncesapp"
        minSdkVersion 14
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.1.1'
    compile 'com.android.support:design:25.1.1'
    compile 'com.android.support:support-v4:25.1.1'
    compile 'com.google.android.gms:play-services:10.0.1'
    compile 'com.squareup.retrofit:retrofit:1.9.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
}

                                                    
                                                

- ملفات الواجهة

من بعد فapp/src/main/res/layout/activity_main.xml كنزيد الكود لي كيمكن من عرض القائمة لي غادي تكون فالجنب ديال التطبيق ولي كتزاد بواسطة NavigationView لي كيكون فيهاtoolbar و header و menu ولي غادي نزيدوهم من بعد الكود ديال الملف هو :

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

                                                        
                                                    

- الملف app_bar_main.xml

دائما فapp/src/main/res/layout كنزيد ملف كنسميه app_bar_main.xml ولي غادي يمكني من إضافة toolbar للتطبيق ديالنا الكود ديال الملف هو :

                                                        
                                                            <?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.darijacoding.annoncesapp.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>
                                                        
                                                    

- الملف activity_main_drawer.xml

فapp/src/main/res/menu كنزيد ملف كنسميه activity_main_drawer.xml ولي غادي يكون فيه الكود لي غادي يمكني من إضافة محتويات القائمة الجانبية للتطبيق بالنسبة للicones غادي يكونو فملف المشروع ديالنا الكود ديال الملف هو :

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:icon="@drawable/ic_leopard"
            android:id="@+id/zoo_nav"
            android:title="Zoo" />
        <item
            android:icon="@drawable/ic_menu_gallery"
            android:id="@+id/nav_gallery"
            android:title="Gallery" />
        <item
            android:icon="@drawable/ic_map"
            android:id="@+id/nav_zoo_map"
            android:title="Cartes" />
    </group>
</menu>

                                                        
                                                    

- الملف main.xml

دائما فapp/src/main/res/menu كنزيد ملف كنسميه main.xml ولي غادي يكون فيه الكود لي غادي يمكن من إضافة قائمة فtoolbar ديال التطبيق ديالنا الكود ديال الملف هو :

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>