تطبيق Memes App بأندرويد
فهاد الدرس الجديد من سلسلة أندرويد غادي نشوفو كيفاش نقادو تطبيق Memes App فشنو كيدير هاد التطبيق:
كيمكن من إضافة text للصور لي بغينا وإنجاز des mémes لي كنشوفو فfacebook وغيرو.
شنو غادي تستافد من التطبيق:
- بعيد على التطبيق وشنو كيدير غادي تعرف كيفاش تسترجع الصور ديالك من ل gallery ديال الهاتف وتعرضها فالتطبيق.
- غادي تعلم كيفاش تاخد 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>