Friday, January 10, 2020

Tutorial Membuat Aplikasi Kutipan Al-Quran dengan Android Studio

Tutorial Membuat Aplikasi Kutipan Al-Quran dengan Android Studio
Tutorial Membuat Aplikasi Kutipan Al-Quran
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُه sobat 48😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Kali ini saya akan membagikan sebuah artikel lagi yang membahas tentang Tutorial Membuat Aplikasi Kutipan Al-Quran dengan Android Studio. Aplikasi Kutipan Al-Quran ini memiliki fitur mengubah teks atau ayat yang kalian pilih untuk dijadikan gambar dengan format PNG. Untuk kalian yang suka posting-posting di status atau feeds Instagram, aplikasi ini cocok untuk kalian coba😊

Jika kalian ingin SOURCE CODE sample aplikasi ini, silahkan download di GITHUB saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai.

Untuk kalian yang ingin mencoba tutorial ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 21 ya.

2. Tambahkan library Dexter di build.gradle untuk Permission :

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.0.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    implementation 'com.karumi:dexter:5.0.0'
}

3. Tambahkan Permission di AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.azhar.kutipanquran">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. Ubah activity_main.xml dan copy ini ke dalamnya :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <RelativeLayout
        android:id="@+id/rl_surat"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/tv_surat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Surat" />

        <Spinner
            android:id="@+id/surat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_surat"
            android:entries="@array/sura_names" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_ayat"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@+id/rl_surat"
        android:layout_marginTop="20sp">

        <TextView
            android:id="@+id/tv_ayat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ayat" />

        <Spinner
            android:id="@+id/ayat"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_ayat" />

    </RelativeLayout>

    <ScrollView
        android:id="@+id/sv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/savebtn"
        android:layout_below="@+id/rl_ayat"
        android:layout_marginTop="10dp">

        <LinearLayout
            android:id="@+id/target"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#E6E6E6"
            android:orientation="vertical">

            <TextView
                android:id="@+id/arab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:lineSpacingExtra="-5dp"
                android:padding="5dp"
                android:text="Konten"
                android:textColor="#000000"
                android:textSize="30sp" />

            <TextView
                android:id="@+id/terjemah"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="Text"
                android:textSize="15sp"
                android:textStyle="italic" />

        </LinearLayout>

    </ScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/savebtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="16dp"
        android:src="@drawable/ic_save"
        app:backgroundTint="@android:color/holo_orange_light" />

</RelativeLayout>

5. Ubah MainActivity.java untuk membuat fungsi dari aplikasi ini :

package com.azhar.kutipanquran;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;

import android.Manifest;
import android.annotation.SuppressLint;
import android.content.pm.PackageManager;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.os.Build;
import android.os.Bundle;
import android.os.Environment;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    SQLiteDatabase db;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        db = new AssetDatabaseOpenHelper(MainActivity.this, "quran.db").openDatabase();
        final Spinner surat = findViewById(R.id.surat);
        final Spinner ayat = findViewById(R.id.ayat);
        final TextView arab = findViewById(R.id.arab);
        final TextView terjemah = findViewById(R.id.terjemah);
        final LinearLayout target = findViewById(R.id.target);
        arab.setTypeface(Typeface.createFromAsset(getAssets(), "me_quran.ttf"));
        surat.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView p1, View p2, int p3, long p4) {
                int pos = p1.getSelectedItemPosition();
                Cursor cur = db.rawQuery("SELECT ayat FROM quran WHERE surat=" + (pos + 1), null);
                List list = new ArrayList();
                cur.moveToFirst();
                for (int i = 0; i < cur.getCount(); i++) {
                    cur.moveToPosition(i);
                    list.add(cur.getString(cur.getColumnIndex("ayat")));
                }
                ArrayAdapter dataAdapter = new ArrayAdapter(MainActivity.this,
                        android.R.layout.simple_spinner_item, list);
                dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
                ayat.setAdapter(dataAdapter);
            }

            @Override
            public void onNothingSelected(AdapterView p1) {

            }
        });
        ayat.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @SuppressLint("SetTextI18n")
            @Override
            public void onItemSelected(AdapterView p1, View p2, int p3, long p4) {
                int pos = p1.getSelectedItemPosition();
                Cursor cur = db.rawQuery("SELECT text, terjemah FROM quran WHERE surat=" + (surat.getSelectedItemPosition() + 1) + " AND ayat=" + (pos + 1), null);
                cur.moveToFirst();
                String txt = cur.getString(cur.getColumnIndex("text"));
                if (pos == 0 & surat.getSelectedItemPosition() != 0) txt = txt.substring(38);
                arab.setText(txt);
                terjemah.setText("\"" + cur.getString(cur.getColumnIndex("terjemah")) + "\"");

            }

            @Override
            public void onNothingSelected(AdapterView p1) {

            }
        });
        findViewById(R.id.savebtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View p1) {
                new Simpan().execute(target, ayat, surat);
            }
        });

        //Permission Android MM+
        int MyVersion = Build.VERSION.SDK_INT;
        if (MyVersion > Build.VERSION_CODES.LOLLIPOP_MR1) {
            if (!checkIfAlreadyhavePermission()) {
                requestForSpecificPermission();
            }
        }
    }

    private boolean checkIfAlreadyhavePermission() {
        int result = ContextCompat.checkSelfPermission(this, Manifest.permission.WRITE_EXTERNAL_STORAGE);
        return result == PackageManager.PERMISSION_GRANTED;
    }

    private void requestForSpecificPermission() {
        ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, 101);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        if (requestCode == 101) {
            //granted
            //not granted
        } else {
            super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }

    //Save Image
    public static Bitmap getBitmapFromView(View view) {

        Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(returnedBitmap);
        Drawable bgDrawable = view.getBackground();
        if (bgDrawable != null)
            bgDrawable.draw(canvas);
        else
            canvas.drawColor(Color.WHITE);
        view.draw(canvas);
        return returnedBitmap;
    }

    private class Simpan extends AsyncTask {         File f;          @SuppressLint("WrongThread")         @Override         protected Boolean doInBackground(Object[] p1) {             LinearLayout target = (LinearLayout) p1[0];             Spinner ayat = (Spinner) p1[1];             Spinner surat = (Spinner) p1[2];             //target.setDrawingCacheEnabled(true);              f = new File(Environment.getExternalStorageDirectory()                     + "/quran-" + surat.getSelectedItemPosition() + "_" + ayat.getSelectedItemPosition() + ".png");             if (f.exists()) f.delete();             try {                 FileOutputStream ostream = new FileOutputStream(f);                 getBitmapFromView(target).compress(Bitmap.CompressFormat.PNG, 10, ostream);                 target.setDrawingCacheEnabled(false);                 return true;             } catch (FileNotFoundException e) {                 return false;             }         }          @Override         protected void onPostExecute(Boolean result) {             if (result) {                 Toast.makeText(MainActivity.this, "Tersimpan di " + f.getPath(), Toast.LENGTH_LONG).show();             } else Toast.makeText(MainActivity.this, "Gagal disimpan", Toast.LENGTH_LONG).show();             super.onPostExecute(result);         }     } } 
6. Buat Class AssetDatabaseOpenHelper.java untuk mengakses Database Al-Quran ke Spinner :

package com.azhar.kutipanquran;

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

import android.content.Context;
import android.database.sqlite.SQLiteDatabase;

public class AssetDatabaseOpenHelper {

    private String DB_NAME = "";

    private Context context;

    public AssetDatabaseOpenHelper(Context context, String dbname) {
        this.context = context;
        this.DB_NAME = dbname;
    }

    public SQLiteDatabase openDatabase() {
        File dbFile = context.getDatabasePath(DB_NAME);
        File par = dbFile.getParentFile();
        if (!par.exists()) par.mkdirs();
        if (!dbFile.exists()) {
            try {
                copyDatabase(dbFile);
            } catch (IOException e) {
                throw new RuntimeException("Error creating source database", e);
            }
        }

        return SQLiteDatabase.openDatabase(dbFile.getPath(), null, SQLiteDatabase.OPEN_READONLY);
    }

    private void copyDatabase(File dbFile) throws IOException {
        InputStream is = context.getAssets().open(DB_NAME);
        OutputStream os = new FileOutputStream(dbFile);

        byte[] buffer = new byte[1024];
        while (is.read(buffer) > 0) {
            os.write(buffer);
        }

        os.flush();
        os.close();
        is.close();
    }

}

7. Selesai dan kalian Run. Jika kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama.

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :
https://sociabuzz.com/azharrvldi_/donate (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Untuk hasil gambar kutipan yang disimpan akan seperti ini :
Tutorial Membuat Aplikasi Kutipan Al-Quran dengan Android Studio
Tutorial Membuat Aplikasi Kutipan Al-Quran
Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Aplikasi Kutipan Al-Quran dengan Android Studio ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_

2 comments

  1. Artikelnya bagus mudah dipahami, kunjungi website kami juga ya di https://www.lauwba.com/

    ReplyDelete

Silahkan tinggalkan komentar jika Anda punya saran, kritik, atau pertanyaan seputar topik pembahasan. Gunakan bahasa yang bijak dan santun. Terima Kasih.
EmoticonEmoticon