تطبيق Memes App بأندرويد


فهاد الدرس الجديد من سلسلة أندرويد غادي نشوفو كيفاش نقادو تطبيق Memes App فشنو كيدير هاد التطبيق:
كيمكن من إضافة text للصور لي بغينا وإنجاز des mémes لي كنشوفو فfacebook وغيرو.
شنو غادي تستافد من التطبيق:
  1. بعيد على التطبيق وشنو كيدير غادي تعرف كيفاش تسترجع الصور ديالك من ل gallery ديال الهاتف وتعرضها فالتطبيق.
  2. غادي تعلم كيفاش تاخد screen shoot وتخزنها على شكل صورة فل gallery ديال الهاتف ديالك.

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

1- الملف activity_main.xml

فأول حاجة غادي نديرو غادي نزيدو project جديد ف android studio سميه MemesApp او لي بغيتي ختار Basic Activity من بعد ميتزاد غادي تمشي للمجلد res/layout فيه كاين ملف سميتو activity_main.xml هادا هو الملف ديال الصفحة الرئيسية ديالنا أي l'interface فيه 2 ديال EditText لي غادي يمكنو المستخدم باش يدخل text لي غادي يكون فالصورة و bouton غادي يمكن من اختيار صورة من ل gallery و bouton كيزيد text للصورة و ImageView فين غادي تعرض الصورة لي اختار المستخدم و bouton كيمكن من حفظ الصورة الكود ديال   activity_main.xml هو :

                                <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.belasri.memesapp.MainActivity">
    <EditText
        android:id="@+id/topText"
        android:hint="Texte en haut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/bottomText"
        android:hint="Texte en bas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/addImage"
        android:text="Ajouter une image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/addText"
        android:text="Ajouter le text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="250dp">
        <ImageView
            android:id="@+id/memeImage"
            android:layout_width="match_parent"
            android:layout_height="250dp" />
        <TextView
            android:id="@+id/memeTopText"
            android:text="meme top text"
            android:textSize="30sp"
            android:textAlignment="center"
            android:textColor="#FFFFFF"
            android:layout_centerHorizontal="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
        <TextView
            android:id="@+id/memeBottomText"
            android:text="Meme Bottom Text"
            android:textSize="30sp"
            android:textAlignment="center"
            android:textColor="#FFFFFF"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </RelativeLayout>
    <Button
        android:id="@+id/saveImage"
        android:text="Enregistrer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

                            

2- الملف MainActivity.java

فالمجلد java كاين الملف MainActivity.java لي هو الملف الرئيسي ديالنا فكنسترجع les boutons و les textviews ولImageView من activity_main.xml من بعد كل bouton فلكليك ديالها كنعطيها methode تنفدها فكاين addImage لي كتنفد ملي كيكليكي المستخدم على ajouter une image ولي فيها الكود لي كيحدد بلي غادي نقراو من mémoire ديال الهاتف وغادي ناخدو الصور من بعد كاين onActivityResult لي فيها الكود لي كيتحقق بلي تمكنا من أخد صورة من الهاتف من بعد ديك الصورة كتحط فل ImageView ديالنا منبعد كاين writeImage لي كتسترجع الtext لي دخل المستخدم وكتزيدو للTextViews لي كاينين فوق الصورة منبعد كاين takeScreenShoot لي كتاخد screen shoot ديال la partie لي فيها الصورة وكترجعها على شكل tableau de bits منبعد كاين storeImage لي كتاخد الtableau de bits وكت compresser الصورة بالفورمة png وكتعطيها سمية و كتخزنها فل gallery منبعد كاين saveImage لي كتنفد les deux methodes لي هضرنا عليهم الكود ديال الملف هو :

                                package com.example.belasri.memesapp;

import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

public class MainActivity extends AppCompatActivity {
    Button add,write,save;
    ImageView imageView;
    TextView topText,bottomText;
    EditText topTextEdit,bottmTextEdit;
    private static final int RESULT_LOAD_IMG = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.memeImage);
        add = (Button) findViewById(R.id.addImage);
        write = (Button) findViewById(R.id.addText);
        save = (Button) findViewById(R.id.saveImage);
        topText = (TextView) findViewById(R.id.memeTopText);
        bottomText = (TextView) findViewById(R.id.memeBottomText);
        topTextEdit = (EditText) findViewById(R.id.topText);
        bottmTextEdit = (EditText) findViewById(R.id.bottomText);
        add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                addImage();
            }
        });
        write.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                writeImage();
            }
        });
        save.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                saveImage();
            }
        });
    }
    private void addImage(){
        Intent photoPickerIntent = new Intent(Intent.ACTION_PICK);
        photoPickerIntent.setType("image/*");
        startActivityForResult(photoPickerIntent, RESULT_LOAD_IMG);
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode == RESULT_LOAD_IMG && resultCode == RESULT_OK && null != data){
            if (resultCode == RESULT_OK) {
                try {
                    final Uri imageUri = data.getData();
                    Log.d("data",data.toString());
                    final InputStream imageStream = getContentResolver().openInputStream(imageUri);
                    final Bitmap selectedImage = BitmapFactory.decodeStream(imageStream);
                    imageView.setImageBitmap(selectedImage);
                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                    Toast.makeText(MainActivity.this, "Something went wrong", Toast.LENGTH_LONG).show();
                }

            }else {
                Toast.makeText(MainActivity.this, "You haven't picked Image",Toast.LENGTH_LONG).show();
            }
        }
    }
    private void writeImage() {
        topText.setText(topTextEdit.getText().toString());
        bottomText.setText(bottmTextEdit.getText().toString());
        hideKeyboard();
    }
    private void hideKeyboard() {
        InputMethodManager keyboard = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
        keyboard.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),0);
    }
    private static Bitmap takeScreenShoot(View view){
        view.setDrawingCacheEnabled(true);
        Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
        view.setDrawingCacheEnabled(false);
        return bitmap;
    }
    public void storeImage(Bitmap bitmap,String fileName){
        //access gallery
        String dirpath = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM).toString();
        File directory = new File(dirpath);
        //check if directory exists
        if(!directory.exists()){
            directory.mkdir();
        }
        //creating file
        File file = new File(dirpath,fileName);
        try{
            //start writing in file
            FileOutputStream outputStream = null;
            outputStream = new FileOutputStream(file);
            bitmap.compress(Bitmap.CompressFormat.PNG,100,outputStream);
            Log.v("image",fileName);
            outputStream.flush();
            outputStream.close();
            Toast.makeText(MainActivity.this, " Mème enregistré",Toast.LENGTH_LONG).show();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
    private void saveImage() {
        //get view which is relativelayout
        View content = findViewById(R.id.content);
        //get screenshoot
        Bitmap bitmap = takeScreenShoot(content);
        //create filename
        String filename = "meme-"+System.currentTimeMillis()+".png";
        //store image
        storeImage(bitmap,filename);
    }
}

                            

3- الملف AndroidManifest.xml

آخر حاجة كنزيد فالملف AndroidManifest.xml الكود لي  كيعطينا الإدن باش نسترجعوا ونزيدو ملفات فالداكرة ديال الهاتف الكود لي غادي تزيد هو :

                                  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
                            


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

بحث في الموقع


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