Tutorial Membuat Aplikasi Dzikir dengan Android Studio

Azhar Rivaldi    5/05/2019    Tutorial Android Studio    6 comments   

Baca Juga

Aplikasi Dzikir Android

Halo sobat 48😁 kalau kemarin saya membagikan tutorial membuat aplikasi Text to Speech, kali ini saya akan membagikan sebuah artikel yang membahas Tutorial Membuat Aplikasi Dzikir dengan Android Studio. Menjelang bulan Ramadhan yang penuh berkah ini alangkah baiknya kita isi dengan kegiatan-kegiatan yang positif, halal, berpahala, dan bermanfaat untuk orang lain dalam rangka mendekatkan diri kepada Allah dan menyempurnakan ibadah, bukan bulan yang dijadikan alasan untuk bersantai dan bermalasan.

Sebagai contohnya yaitu berdzikir menggunakan aplikasi Dzikir berbasis Android ini. Aplikasi Dzikir ini juga dilengkapi audio bacaan Dzikir agar kalian semakin terbiasa dalam mengamalkannya. Apalagi aplikasi ini bisa kalian buat sendiri, tentunya ada rasa bangga dalam benak kita ya kan😄.

Nah, disini saya akan membuatkan Tutorial Membuat Aplikasi Dzikir tersebut. Jika kalian ingin SOURCE CODE Aplikasi Dzikir ini, silahkan download di Github saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai😄

Jika kalian ingin mencoba membuat aplikasi ini dengan tutorial 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 19 ya.

2. Ubah build.gradle menjadi seperti ini :

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

3. Ubah isi MainActivity.java dan activity_main.xml menjadi seperti ini :

package com.azhar.dzikir;

import android.content.Context;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.os.Vibrator;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView dzikir;
    int zikir = 0;
    Vibrator vibe;
    MediaPlayer mediaPlayer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        dzikir = (TextView) findViewById(R.id.dzikir);
        vibe = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);
    }

    public void subhanallah(View view) {
        mediaPlayer = MediaPlayer.create(getApplicationContext(), R.raw.tasbih);
        mediaPlayer.start();
        zikir = zikir + 1;
        tampil(zikir);
        vibe.vibrate(100);
    }

    public void alhamdulillah(View view) {
        mediaPlayer = MediaPlayer.create(getApplicationContext(), R.raw.tahmid);
        mediaPlayer.start();
        zikir = zikir + 1;
        tampil(zikir);
        vibe.vibrate(100);
    }

    public void lailahaillallah(View view) {
        mediaPlayer = MediaPlayer.create(getApplicationContext(), R.raw.tahlil);
        mediaPlayer.start();
        zikir = zikir + 1;
        tampil(zikir);
        vibe.vibrate(100);
    }

    public void allahuakbar(View view) {
        mediaPlayer = MediaPlayer.create(getApplicationContext(), R.raw.takbir);
        mediaPlayer.start();
        zikir = zikir + 1;
        tampil(zikir);
        vibe.vibrate(100);
    }

    public void tampil(int z) {
        dzikir.setText("" + z);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.reset:
                mediaPlayer.stop();
                zikir = 0;
                tampil(zikir);
            default:
                return super.onOptionsItemSelected(item);
        }
    }

}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:gravity="center"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:layout_width="160dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:clickable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:onClick="subhanallah"
            app:cardBackgroundColor="@android:color/holo_red_light"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="سُبْحَانَ اللهِ"
                    android:textColor="#fff"
                    android:textSize="30sp"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_margin="10dp"
                    android:background="#fff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Subhanallah"
                    android:textColor="#fff"
                    android:textStyle="bold" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="160dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:clickable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:onClick="alhamdulillah"
            app:cardBackgroundColor="@android:color/holo_orange_light"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="اَلْحَمْدُ ِللهِ"
                    android:textColor="#fff"
                    android:textSize="30sp"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_margin="10dp"
                    android:background="#fff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Alhamdulillah"
                    android:textColor="#fff"
                    android:textStyle="bold" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:gravity="center"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:layout_width="160dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:clickable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:onClick="lailahaillallah"
            app:cardBackgroundColor="@android:color/holo_green_light"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="لاَ إِلَهَ إِلاَّ اللهُ"
                    android:textColor="#fff"
                    android:textSize="30sp"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_margin="10dp"
                    android:background="#fff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Lailahaillallah"
                    android:textColor="#fff"
                    android:textStyle="bold" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="160dp"
            android:layout_height="190dp"
            android:layout_margin="10dp"
            android:clickable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:onClick="allahuakbar"
            app:cardBackgroundColor="@android:color/holo_blue_light"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
           
                    android:textColor="#fff"
                    android:text="للهُ أَكْبَرُ"
                    android:textSize="30sp"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_margin="10dp"
                    android:background="#fff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Allahuakbar"
                    android:textColor="#fff"
                    android:textStyle="bold" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:gravity="center"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:id="@+id/noWhatsapp"
            android:layout_width="340dp"
            android:layout_height="150dp"
            android:layout_margin="10dp"
            android:clickable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardBackgroundColor="@android:color/holo_purple"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/dzikir"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:textColor="#fff"
                    android:textSize="70sp"
                    android:textStyle="bold" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

</LinearLayout>

4. Jika terjadi error seperti ini, abaikan saja. Karena kita belum memasukkan Permission di Android Manifest.xml.

Aplikasi Dzikir Android

5. Tambahkan Permission di Android Manifest.xml seperti ini :

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

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

    <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>

6. Yang terakhir buat menu_main.xml untuk mereset ulang Dzikir yang sudah kita lakukan :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/reset"
        android:title="Reset" />
</menu>

7. Untuk audionya, kalian bisa unduh melalui link Github saya DISINI.

8. 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.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Aplikasi Dzikir 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_