تطبيق Flickr بإستعمال Android الجزء الأول


فهاد التطبيق الجديد من سلسلة أندرويد غادي نقادو واحد التطبيق ديال الموقع الشهير Flickr لي عبارة عن موقع للصور التطبيق غادي يخدم بلApi لي كيوفرها الموقع للمطورين مجانا وهاد التطبيق غادي يكون شوية niveau ديالو طالع يعني خص تكون عندك قاعدة معلومات على أندرويد.

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

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

أول حاجة غادي نديروها غادي نفتحو Android Studio وغادي نزيدو مشروع جديد سميتو FlickrBrowser منبعد ميتزاد غادي تمشي لGradle Scripts لي فيها Module: app وغادي تزيد الكود لي غادي يمكنا باش نخدمو بل Android Material Design و بRecyclerView ول CardView و غادي نزيدو حتى الكود لي يمكنا باش نخدمو بواحد لframework سميتها Picasso ولي كتمكنا باش نعرضوا الصور من الأنترنيت فالتطبيق ديالنا الكود ديال الملف هو :

                                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:recyclerview-v7:25.1.1'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.android.support:cardview-v7:25.1.1'
}
                            

2- الملف toolbar.xml

فلمجلد res/layout كنزيد ملف جديد سميه toolbar.xml لي غادي يكون فيه الكود لي كيمكن باش يكون عندنا لbar لي كيكون فيها عنوان التطبيق ولي كتخد العرض قد parent ديالها واللون ديال لbackground زرق ولي عندنا فالملف color.xml لي فالمجلد values فلAndroid v21 غادي يكون عندنا theme NoActionBar وغادي نخدمو بهاد toolbar وفأندرويد لي تحت v21 غادي تكون toolbar لي كتجي مع الprojet ملي كتزيدو الكود ديال الملف هو :

                                <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
                            

3- الملف photo_list_item.xml

دائما فلمجلد res/layout كنزيد ملف جديد سميه photo_list_item.xml هادا الملف لي غادي يكون عنصر من recyclerview ولي هي عبارة عن liste ولي غادي يكونو فيه الصور لي غادي نجبدو من Flickr والعنوان ديال كل صورة فالكود عندنا ImageView لي غادي نحملو فيها الصور بإستعمال Picasso وTextView لي غادي يكون فيها العنوان ديال كل صورة الكود ديال الملف هو :

                                <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/border"
    android:layout_margin="5dp"
    android:elevation="5dp"
    >
    <ImageView
        android:id="@+id/thumbnail"
        android:scaleType="fitXY"
        android:padding="5dp"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_margin="7dp"
        android:elevation="2dp"
        android:src="@drawable/placeholder"
        />
    <LinearLayout
        android:layout_toRightOf="@id/thumbnail"
        android:orientation="horizontal"
        android:weightSum="1"
        android:layout_marginTop="2dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/title"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="5dp"
            android:maxLines="3"
            android:textSize="14sp"
            android:textColor="@color/navy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>
                            

4- الملف content_main.xml

دائما فلمجلد res/layout كنزيد ملف جديد سميه content_main.xml هاد الملف لي غادي تكون فيه recyclerView لي غادي تكون هي لي فيها الصور والعناوين ديالهم ولي غادي تكون من الملف photo_list_item.xml فيلا مني زدتي المشروع فأندرويد اختاريتي Basic Activity غادي يتزاد هاد الملف اتوماتيكيا اختاريتي Empty Activity زيدو فالمجلد res/layout الكود ديال الملف هو :

                                    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="55dp"
    android:padding="20dp"
    android:background="#e1f5fe"
    tools:context="com.example.belasri.flickerbrowser.MainActivity"
    tools:showIn="@layout/activity_main">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
</RelativeLayout>
                                

5- الملف activity_main.xml

دائما فلمجلد res/layout كاين الملف activity_main.xml لي هو الصفحة الرئيسية ديال التطبيق أو لActivity الرئيسية ففيها الكود لي كيزيد Toolbar لي زدناها فالملف toolbar.xml وكنديرو include للملف content_main.xml لي فيه recyclerview ديالنا الكود ديال الملف هو :

                                    <?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.belasri.flickerbrowser.MainActivity">
    <android.support.design.widget.AppBarLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
    <include
        layout="@layout/toolbar"
        ></include>
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


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