Aplikasi Text to Speach merupakan aplikasi yang mampu mengubah sebuah text menjadi suara. Jika kamu pernah menggunakan google assistensi maka kamu sudah pernah menggunakan fitur Text to Speach ini.

Aplikasi Text to Speach ini bisa anda buat menggunakan Android Studio, cara pembuatannya juga sangat mudah sebab di dalam Android Studio sudah terdapat library atau class untuk membuat fitur ini.

Hal pertama yang harus anda lakukan adalah membuat project baru. Untuk yang baru belajar baca cara membuat project baru disini. Jika sudah silahkan lanjut dengan mengedit dua file utama bawah ini :

1. MainActivity.java

Keterangan
Pada kode int res = mTTS.setLanguage(Locale.ENGLISH); anda bisa menggantinya menggunakan suara atau logat dari negara lain.

2. activity_main.xml

Kode mTTS.speak(c, TextToSpeech.QUEUE_FLUSH, null); inilah yang melakukan aksi mengubah text menjadi suara, ketika button di klik.

3. Jalankan aplikasi

Silahkan jalankan aplikasi dan tes dengan memasukkan kata atau kalimat kemudian tekan button jika berhasil maka akan terdengar suara dari kata yang di masukkan. Perlu di ingat bahwa tidak semua perangkat mendukung fitur ini.

Pada tutorial kali ini kita akan membuat tampilan seperti pada design home Grab. Dimana pada tampilan menampilkan card view berupa promo atau produk yang di tawarkan. Sebagai gambaran seperti apa tampilan yang akan kita buat lihat gambar di bawah.
 

Untuk membuat data di atas pertama-tama siapkan data berupa tulisan atau judul, deskripsi, serta link gambar kemudian masukkan pada array.xml di folder res -> values. Berikut contoh data yang sudah saya siapkan :



Langkah selanjutnya silahkan simak di bawah ini :

1. Import library android-networking

Library ini bisa digunakan untuk menampilkan gambar dari internet ke aplikasi android. Untuk memasangnya import terlebih dahulu pada dependencies build.gradle seperti berikut :

2. AndroidManifest.xml

Berikan akses internet dengan menambahkan kode pada AndroidManifest.xml contohnya letaknya seperti pada kode dibawah.

3. MainActivity.java

4. activity_main.xml

5. card.xml

Buat file xml baru dengan nama "card.xml" pada directory res -> layout.

6. colors.xml

Masuk ke res -> values -> colors.xml, edit seperti berikut.

7. ic_date_range_black.xml

Buat drawable baru pada res -> drawable -> ic_date_range_black.xml dengan kode di bawah.

 

Fonts merupakan satu element yang menunjang tampilan atau desain suatu aplikasi. Jenis font yang monoton akan membuat tampilan aplikasi kurang menarik. Untuk itu biasanya developer memasangkan jenis font tertentu pada aplikasi mereka.

Untuk memasang font pada aplikasi android yang dibuat anda hanya perlu menyediakan jenis font dengan format file .ttf, anda bisa mendownloadnya di www.dafint.com atau menggunakan font yang ada di komputer.

Cara Mengambil Font .ttf di Windows

1. Ketikkan "fonts" pada kolom pencarian Windows kemudian pilih fonts 

 

2. Pilih jenis font yang anda inginkan, klik kemudian tekan "CTRL + C" 

 

Jika terdapat banyak font di dalam font klik dua kali untuk masuk dan memilih salah satu. Anda juga bisa mencopy semuanya sekaligus.

3. Buka folder tempat anda ingin menyimpan font lalu paste.

Memasang Font pada Project Android Studio

Pastikan anda sudah memiliki font baik itu di download dari internet atau dari komputer seperti pada cara di atas. Jika sudah silahkan ikuti langkah di bawah :

1. Buka project andaroid studio

2. Klik kanan pada res -> new -> folder -> Assets Folder 

 

3. Pada jendela baru langsung klik finish. Nantinya akan muncul directory baru bernama assets. 

 

4. Klik kanan pada folder assets -> new -> Directory kemudian beri nama font.

5. Copy dan pastekan font anda kedalam directory font seperti pada gambar 

Menerapkan Font pada TextView

Untuk menerapkan jenis font pada TextView sangatlah mudah anda tinggal menuliskan kode seperti dibawah:

Typeface typeface = Typeface.createFromAsset(getAssets(), "font/arial.ttf");
textView.setTypeface(typeface);

Pada bagian "font/arial.ttf" sesuaikan dengan nama dan directory font yang telah dibuat sebelumnya.

Salah satu kelemahan aplikasi android yang dibangun menggunakan Android Studio adalah proses decompile atau bahasa kasarnya membongkar apk yang sudah jadi sangat mudah. Bahkan orang awam dalam pemrograman sekalipun dapat melakukannya dikarenakan adanya tools yang menyediakan fitur decompile ini. Salah satu tools yang biasa digunakan adalah jadx (Harap tidak menggunakannya untuk merugikan orang lain).

Membuat aplikasi bebas dari proses decompile tidak bisa dihindari akan tetapi kita bisa melindungi kode hasil decompile agar tidak mudah dibaca oleh orang lain. Meskipun orang lain bisa membongkar aplikasi tersebut, mereka tidak akan mudah untuk melakukan modifikasi ataupun menemukan apa yang mereka cari. Alih alih menemukan apa yang dicari mereka akan merasa pusing dan membatalkan niatnya.

Tetapi hal ini tidak 100% berhasil untuk beberapa orang. Buktinya aplikasi besar seperti WhatsApp saja, memiliki banyak hasil modifikasi.

Setelah mengetahui hal diatas mari kita menggunakan Proguard di Android Studio agar aplikasi kita terhindar dari penyalahgunaan.

Cara Menggunakan Proguard di Android Studio

Cara menggunakan proguard sangatlah mudah anda hanya perlu membuka file "build.gradle (Module: app)" kemudian menambahkan kode dibawah ini.

 ...
 buildTypes {
        
        release {
            minifyEnabled true
            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

Program akan membaca Proguard jika aplikasi di release. Selain membuat project nantinya sulit dibaca kode diatas juga membuat program aplikasi menjadi lebih singkat (menyusut) dan ukuran file APK menjadi lebih rendah. Dalam kasus saya sebelum ditambahkan kode diatas ukuran file 6,23 Mb setelah ditambahkan menyusut menjadi 2,45 Mb.

Sebuah aplikasi yang menerapkan sistem level user tentunya membutuhkan aksi login agar user dapat mengakses akun mereka. Untuk mempermudah user dalam melakukan login kita bisa menerapkan login Authentication menggunakan email google yang sudah terdaftar di Android pengguna. Nantinya user ketika menekan tombol login akan di arahkan langsung untuk memilih akun email yang terdaftar.

Kelebihan dari sistem login ini, user tidak perlu khawatir akan pencurian akun oleh pemilik aplikasi sebab informasi yang bisa di ambil hanya seperti email, id akun, foto, nama, serta nomor hp.

Langkah awal untuk membuat login authentication dengan akun google adalah dengan membuat credential baru di API Console caranya seperti berikut.
1. Buka halaman https://console.developers.google.com/apis/credentials (Login dengan akun google anda).
2. Masuk ke menu Kredential dan klik tombol + Buat Kredensial -> Client ID OAuth.
3. Pilih jenis aplikasi (Android), kemudian masukkan nama aplikasi, kode SHA-1 (untuk mendapatkan kode silahkan baca disini) sesuaikan dengan kebutuhan anda misalnya jika anda hanya memerlukannya pada mode debug maka ambil SHA-1 debug bila ingin dirilis ambil SHA-1 release, dan terakhir nama package anda contoh disini "com.example.login_google" lalu klik buat.
4. Jika muncul dialog yang Klien OAuth dibuat, maka Kredensial anda berhasil dibuat.

Setelah membuat kredensial lanjut ke project Android Studio dengan menambahkan dependencies dibawah ini kedalam project android studio kemudian klik Sync Now.

dependencies {
    ...
    implementation 'com.google.android.gms:play-services-auth:17.0.0'
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.login_google"><uses-permission android:name="android.permission.INTERNET"/>    <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=".Home"></activity>        <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>

Kemudian buat sebuah tampilan sederhana di layout activity_main.xml yang berisi tombol widget "". Silahkan ikuti tampilan di bawah.

activity_main.xml

<?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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    tools:context=".MainActivity" >
    <com.google.android.gms.common.SignInButton        android:id="@+id/sign_in_button"        android:layout_width="200dp"        android:layout_height="wrap_content"/></RelativeLayout>

Untuk memberikan instruksi pada program silahkan edit file MainActivity.java seperti kode di bawah

MainActivity.java

package com.example.login_google;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;import android.os.Bundle;import android.util.Log;import android.view.View;import android.widget.Toast;
import com.google.android.gms.auth.api.signin.GoogleSignIn;import com.google.android.gms.auth.api.signin.GoogleSignInAccount;import com.google.android.gms.auth.api.signin.GoogleSignInClient;import com.google.android.gms.auth.api.signin.GoogleSignInOptions;import com.google.android.gms.common.SignInButton;import com.google.android.gms.common.api.ApiException;import com.google.android.gms.tasks.Task;
import java.util.Map;
public class MainActivity extends AppCompatActivity {

    private SignInButton login;    private GoogleSignInClient mGoogleSignInClient;    private int RC_SIGN_IN;    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        login = findViewById(R.id.sign_in_button);        GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestEmail()
                .build();        mGoogleSignInClient = GoogleSignIn.getClient(this, gso);        login.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                LoginGoogle();            }
        });    }

    private void LoginGoogle() {
        Intent signInIntent = mGoogleSignInClient.getSignInIntent();        startActivityForResult(signInIntent, RC_SIGN_IN);    }
    @Override    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);        if (requestCode == RC_SIGN_IN) {
            Task<GoogleSignInAccount> task = GoogleSignIn.getSignedInAccountFromIntent(data);            handleSignInResult(task);        }
    }
    private void handleSignInResult(Task<GoogleSignInAccount> completedTask) {
        try {
            final GoogleSignInAccount account = completedTask.getResult(ApiException.class);            if (!account.getId().equals("")&&!account.getId().equals(null)){
                Intent i = new Intent(MainActivity.this, Home.class);                startActivity(i);                finish();            }else{
                Toast.makeText(this, "Login Gagal", Toast.LENGTH_SHORT).show();            }
        } catch (ApiException e) {
            Log.d("error", ""+e);            Toast.makeText(this, "Login Gagal", Toast.LENGTH_SHORT).show();        }
    }

}

Pada saat aplikasi berhasil melakukan login program kita instruksikan untuk membuka activity baru dengan nama Home.java. Untuk itu silahkan buat activity baru dengan nama home dengan cara klik kanan pada root package -> New -> Activity -> Empty Activity hingga muncul kotak dialog baru seperti dibawah.

Isi activity name dengan nama Home, centang Generate Layout file (agar activity membuat layout otomatis). Layout name biasanya akan mengikuti nama activity name, silahkan rubah sesuai keinginan anda lalu tekan finish.

Edit file Home.java dan layout activity_home.xml seperti kode di bawah :

Home.java

 package com.example.login_google;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class Home extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
    }
}

activity_home.xml

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"tools:context=".Home">
<TextView    android:id="@+id/textView"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Login berhasil" /></RelativeLayout>

Langkah terakhir adalah pengetesan. Run aplikasi dengan emulator atau debug langsung ke Hp Android. Klik tombol login, jika berhasil maka tampilannya akan tampak seperti pada gambar.

Ada kalanya ketika membuat sebuah form diperlukan adanya pemilihan tanggal. Jika pada website kita mengenal tag "<input type='date' name='date' />" untuk menampilkan pemilihan tanggal maka beda halnya di Android. Kita bisa menggunakan kelas Date Picker yang telah disediakan.

Berikut Cara Membuat Date Picker di Android Studio.

1. Buat project baru dengan format seperti berikut

• Activity : Empty Activity
• Name : CobaDatePicker
• Package Name : com.adityadee.cobadatepicker
• Language : Java
• Minimum API Level : API 17 (Android 4.2 Jelly Bean)

2. Buat Kelas baru dengan nama DatePickerFragment.java lalu isi dengan kode seperti berikut :

 
package com.adityadee.cobadatepicker;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.widget.DatePicker;

import androidx.fragment.app.DialogFragment;

import java.util.Calendar;

public class DatePickerFragment extends DialogFragment {
    private onDateClickListener onDateClickListener;
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState){
        final Calendar calendar = Calendar.getInstance();
        int tahun = calendar.get(Calendar.YEAR);
        int bulan = calendar.get(Calendar.MONTH);
        int hari = calendar.get(Calendar.DAY_OF_MONTH);
        return new DatePickerDialog(getActivity(), new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {
                onDateClickListener.onDateSet(datePicker, i, i1, i2);
            }
        }, tahun, bulan, hari);
    }
    public void setOnDateClickListener(onDateClickListener onDateClickListener){
        if (onDateClickListener != null){
            this.onDateClickListener= onDateClickListener;
        }
    }
    public interface onDateClickListener{
        void onDateSet(DatePicker datePicker, int i, int i1, int i2);
    }

}

 

3. Edit MainActivity.java seperti kode di bawah :

 
package com.adityadee.cobadatepicker;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private Button button;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.button);
        textView = findViewById(R.id.textView);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TampilTanggal();
            }
        });
    }
    public void TampilTanggal(){
        DatePickerFragment datePickerFragment = new DatePickerFragment();
        datePickerFragment.show(getSupportFragmentManager(), "data");
        datePickerFragment.setOnDateClickListener(new DatePickerFragment.onDateClickListener() {
            @Override
            public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {
                String tahun = ""+datePicker.getYear();
                String bulan = ""+(datePicker.getMonth()+1);
                String hari = ""+datePicker.getDayOfMonth();
                String text = "Tanggal yang dipilih : "+hari+" - "+bulan+" - "+tahun;
                textView.setText(text);
            }
        });
    }
}

 

4. Edit layout activity_main.xml.

 

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Klik untuk menampilkan tanggal" />
</LinearLayout>
 

5. Jalankan menggunakan emulator atau device anda.



Keterangan : Ketika tombol di klik akan muncul tampilan Date Picker di layar, tampilan date picker ini berbeda-beda sesuai versi android anda. Pada tampilan di atas menggunakan android versi 9.

Pada tutorial kali ini kita akan membuat Slide Page yang dibuat menggunakan kombinasi antara tab layout dengan view pager. Slide Page ini sudah biasa kita lihat pada aplikasi-aplikasi terkenal seperti WhatsApp, Youtube, google adsense, dan masih banyak lagi.



Untuk membuat Slide Page kita bisa memanfaatkan widget yang disediakan Android Studio yaitu Tab Layout dan View Pager. Tampilan yang nantinya kita buat akan tampak seperti berikut :



Sebelum memulai ada baiknya anda mengetahui struktur class, layout, drawable yang akan kita buat nantinya. Terdapat 4 class yang akan dibuat, satu class utama atau activity dan tiga class fragment yang nantinya akan dipanggil kedalam activity. Layout yang dibutuhkan ada 4 yaitu layout utama (activity_main) dan tiga layout fragment. Didalam drawable kita juga menambahkan ikon back untuk yang akan dipasang pada toolbar aplikasi nantinya, untuk menambahkan icon ini anda bisa menggunakan Vector Asset yang disediakan Android Studio.






Lanjut ke tahap pembuatan project baru :



Sebelum memulai menambahkan dan mengedit file, edit terlebih dahulu dependencies pada file build.grandle (Module.app) dan tambahkan kode dibawah.

 
dependencies {
        ...
        implementation 'com.android.support:design:28.0.0'
        implementation 'com.android.support:support-v4:28.0.0'
 ...
}
 

Hal ini dimaksudkan untuk mengimport/mendownload library dari android studio sehingga widget Tab Layout dan View Pager dapat digunakan.

Buat FragmentSatu.java

 
public class FragmentSatu extends Fragment {
    public FragmentSatu(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_satu, container, false);

        return view;
    }
}
 

Buat FragmentDua.java

 
public class FragmentDua extends Fragment {
    public FragmentDua(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_dua, container, false);

        return view;
    }

}
 

Buat FragmentTiga.java

 
public class FragmentTiga extends Fragment {
    public FragmentTiga(){

    }
    @Override
    public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_tiga, container, false);
        return view;
    }
}
 

Buat Layout fragment_satu.xml

 
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/satu">


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

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ini dalah tampilan"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FRAGMENT SATU"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>
 

Buat Layout fragment_dua.xml

 
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dua">


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

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ini dalah tampilan"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="FRAGMENT DUA"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>
 

Buat Layout fragment_tiga.xml

 
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/tiga"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ini dalah tampilan"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FRAGMENT TIGA"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:textStyle="bold" />
</LinearLayout>
 

Edit activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/biru">

            <android.support.v7.widget.Toolbar
                android:id="@+id/tol"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ToolbarStyle"
                app:layout_scrollFlags="scroll|enterAlways"
                app:titleTextAppearance="@style/ToolbarStyle"></android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:tabIndicatorColor="@android:color/white"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="@color/grey">

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab1" />

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab2" />

                <android.support.design.widget.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab3" />
            </android.support.design.widget.TabLayout>
        </android.support.design.widget.AppBarLayout>

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

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>
 

Edit MainActivity.java

 
public class MainActivity extends AppCompatActivity {

    private TabLayout tab;
    private ViewPager viewPager;
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tab = findViewById(R.id.tab);
        viewPager = findViewById(R.id.view_pager);
        toolbar = findViewById(R.id.tol);

        setSupportActionBar(toolbar);
        toolbar.setTitle(R.string.app_name);
        toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_back));


        tab.setupWithViewPager(viewPager);
        SetupViewPager();
        tab.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void SetupViewPager() {
        MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager());
        adapter.AddFragment(new FragmentSatu(), "Tab1");
        adapter.AddFragment(new FragmentDua(), "Tab2");
        adapter.AddFragment(new FragmentTiga(), "Tab3");
        viewPager.setAdapter(adapter);
    }

    private class MyViewPagerAdapter extends FragmentPagerAdapter {
        private List<Fragment> fr = new ArrayList<>();
        private List<String> title = new ArrayList<>();
        public MyViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        public void AddFragment(Fragment fragment, String jd) {
            fr.add(fragment);
            this.title.add(jd);
        }

        @Override
        public Fragment getItem(int position){
            return fr.get(position);
        }

        @Override
        public CharSequence getPageTitle(int position){
            return title.get(position);
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

 

Edit colors.xml

 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="biru">#0056FF</color>
    <color name="grey">#DDDDDD</color>
    <color name="white">#FFFFFF</color>
    <color name="satu">#810000</color>
    <color name="dua">#E6AA00</color>
    <color name="tiga">#003091</color>
</resources>


 

Edit style.xml

 
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>

    </style>
    <style name="ToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="titleTextColor">@color/white</item>
        <item name="android:tint">@color/white</item>
        <item name="android:textSize">18sp</item>

    </style>

</resources>

 

Run Aplikasi

Hai Sobat Coding Rakitan kali ini kita akan belajar menggunakan View Pager di Android Studio. View Pager sendiri merupakan sebuah widget yang disediakan oleh Android Studio untuk membuat tampilan list yang keren pada aplikasi. Dengan menggunakan PagerView kita dapat membuat tampilan aplikasi seperti slide, list file horizontal, dan masih banyak lagi.

Berikut contoh tampilan yang bisa dibuat dengan memanfaatkan widget View Pager.



Sedangkan untuk tampilan yang akan kita buat nantinya akan tampak seperti berikut.



Berikut adalah daftar file baik Class, layout, ataupun drawable yang akan dibuat dalam tutorial kali ini.




Selain itu ada beberapa data berupa array yang diperlukan dalam mengisi card yang akan di tampilkan dalam View Pager nantinya. Cara membuat array ini anda tinggal klik kanan pada folder values -> New -> Value resources file, lalu beri nama array. Selanjutnya isi dengan kode seperti dibawah ini.

 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="judul">
        <item>Google</item>
        <item>Coding Rakitan</item>
        <item>Facebook</item>
    </string-array>
    <string-array name="text">
        <item>Google merupakan website mesin pencari ...</item>
        <item>Coding Rakitan merupakan sebuah blog. . . </item>
        <item>Salah satu media sosial yang paling . . .</item>
    </string-array>
    <string-array name="gambar">
        <item>a</item>
        <item>b</item>
        <item>c</item>
    </string-array>
</resources>
 

Langsung saja untuk membuat tampilan seperti di atas menggunakan View Pager silahkan buka Android Studio anda. Buat sebuah project baru dengan format sperti dibawah.

• Name : Belajar Pagerview
• Package name : codingrakitan.blogspot.com.belajarpagerview (Atur sesuai keinginan)
• Language : Java
• Minimum API Level : API17 Android 4.2 (Jelly Bean)
• Chose Your Project : Empty Activity

Bagi pemula yang belum tahu cara membuat project baru silahkan kunjungi Cara Membuat Project Baru di Android Studio.

Setelah project baru selesai dibuat, lanjut ke tahap menambahkan dependencies yaitu "implementation 'com.android.support:support-v4:28.0.0'" kedalam file build.grandle (Module.app). Sehingga nantinya dependencies kita akan tampak seperti berikut.

 
  dependencies {
       implementation fileTree(dir: 'libs', include: ['*.jar'])
       implementation 'com.android.support:appcompat-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'
       implementation 'com.android.support:support-v4:28.0.0'
   }

 

Atau cara cepatnya silahkan klik ikon download seperti pada gambar di bawah.

MainActivity

 
public class MainActivity extends AppCompatActivity {

    TextView a, b;
    ViewPager pagerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        a = findViewById(R.id.a);
        b = findViewById(R.id.b);
        pagerView = findViewById(R.id.pager);
        isiViewPager();
    }

    private void isiViewPager() {
        Resources res = getResources();
        String[] judul = res.getStringArray(R.array.judul);
        String[] text = res.getStringArray(R.array.text);
        String[] gambar = res.getStringArray(R.array.gambar);
        AdapterViewPager adapter = new AdapterViewPager();
        b.setText(""+judul.length);
        for (int i=0;i<judul.length;i++){
            adapter.addCardItem(new ModelItem(judul[i], text[i], gambar[i]));
        }
        pagerView.setAdapter(adapter);
        pagerView.setOffscreenPageLimit(3);
        pagerView.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                int p = i+1;
                a.setText(""+p);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }
}
 

AdapterViewPager

 
public class AdapterViewPager extends PagerAdapter {


    private List<ModelItem> mData;


    private Context context;
    public AdapterViewPager() {
        mData = new ArrayList<>();
    }



    public void addCardItem(ModelItem item) {
        mData.add(item);
    }


    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(container.getContext())
                .inflate(R.layout.cardw, container, false);
        TextView judul = view.findViewById(R.id.tv_judul);
        TextView text = view.findViewById(R.id.tv_text);

        judul.setText(mData.get(position).getJudul());
        text.setText(mData.get(position).getText());


            container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }


}


 

ModelItem

 
public class ModelItem{

    String judul, text, gambar;
    public ModelItem(String judul, String text, String gambar){
        this.judul = judul;
        this.text = text;
        this.gambar = gambar;
    }

    public String getJudul() {
        return judul;
    }

    public void setJudul(String judul) {
        this.judul = judul;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getGambar() {
        return gambar;
    }

    public void setGambar(String gambar) {
        this.gambar = gambar;
    }
}
 

activity_main.xml

 
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E8E8E8"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textColor="@android:color/black"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="/"
            android:textColor="@android:color/black"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:overScrollMode="never"
        android:paddingLeft="50dp"
        android:paddingEnd="50dp"
        android:paddingRight="50dp" />
</LinearLayout>
 

cardw.xml

 
<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="370dp"
        android:background="@android:color/white"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@android:color/holo_blue_dark"
            android:orientation="vertical" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="20dp">

            <TextView
                android:id="@+id/tv_judul"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:textColor="@android:color/black"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tv_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="7dp"
                android:text="TextView" />
        </LinearLayout>

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="10dp"
            android:background="@color/colorAccent"
            android:text="More"
            android:textColor="@android:color/white" />

    </LinearLayout>

</LinearLayout>
 

Pada postingan kali ini kita akan melanjutkan postingan sebelumnya Cara Membuat Aplikasi Kamera Bagian Kedua - Capture Image. Postingan sebelumnya kita sudah menambahkan fitur capture image yang membuat kamera dapat menangkap gambar ketika tombol di pencet.

Fitur yang akan kita tambahkan selanjutnya adalah Flash Light atau lampu blitz kamera. Dimana ketika tombol blitz dalam keadaan hidup atau auto maka ketika tangkapan kamera dilakukan, blitz akan menyala.

Langkah pertama :

Pertama-tama izinkan aplikasi untuk mengakses Flash light dengan menambahkan kode berikut kedalam AndroidManifest.xml

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

Langkah kedua :

Tambahkan ikon Vector Asset berikut kedalam drawable anda dan sesuaikan dengan nama yang ada di gambar. Tidak tahu cara menambahkannya ? silahkan baca postingan Cara Menggunakan Icon Vector Asset bawahan Android Studio



Langkah ketiga :

Edit activity_main.xml seperti berikut.

 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".MainActivity" >

    <FrameLayout
        android:id="@+id/fr_kamera"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black">

    </FrameLayout>

    <ImageView
        android:id="@+id/img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="30dp"
        android:adjustViewBounds="true"
        android:onClick="onClick"
        android:tint="@android:color/white"
        app:srcCompat="@drawable/camera"
        tools:ignore="VectorDrawableCompat" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:orientation="vertical"
        android:padding="5dp">

        <ImageView
            android:id="@+id/flash"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:onClick="onClick"
            android:tag="off"
            android:tint="@android:color/white"
            app:srcCompat="@drawable/flash_off"
            tools:ignore="VectorDrawableCompat" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ly"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:orientation="vertical"
        android:visibility="gone">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/tampil"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="false"
                app:srcCompat="@drawable/ic_launcher_background"
                tools:ignore="VectorDrawableCompat" />

            <ImageView
                android:id="@+id/hapus"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="bottom"
                android:layout_margin="20dp"
                android:adjustViewBounds="true"
                android:onClick="onClick"
                android:tint="@android:color/white"
                app:srcCompat="@drawable/delete"
                tools:ignore="VectorDrawableCompat" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:padding="10dp"
                android:text="codingrakitan.blogspot.com"
                android:textColor="@android:color/white"
                android:textSize="12sp" />

        </FrameLayout>

    </LinearLayout>

</FrameLayout>
 

Langkah keempat :

Edit class MainActivity.java seperti berikut.

 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private FrameLayout fr_kamera;
    private SurfaceView sv;
    private SurfaceHolder sh;
    private Camera cm;
    private ImageView tampil;
    private LinearLayout ly;
    private int HOME = 1;
    int flash = 1;
    String aksi_flash = "mati";
    Camera.Parameters pr;
    ImageView iv_flash;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        fr_kamera = findViewById(R.id.fr_kamera);
        tampil = findViewById(R.id.tampil);
        iv_flash = findViewById(R.id.flash);
        ly = findViewById(R.id.ly);


        kameraAktif();


    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event){
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (HOME==0){
                        kembaliCamera();
                    }else{
                        finish();
                    }
                    return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }
    public void kembaliCamera(){
        ly.setVisibility(View.GONE);
        HOME=1;
        if (aksi_flash=="hidup"){
            flashAktif();
        }
        cm.startPreview();
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.hapus:
                kembaliCamera();
                break;
            case R.id.img:
                ambilGambar();
                break;
            case R.id.flash:
                flash++;
                if (flash==1){
                    iv_flash.setImageResource(R.drawable.flash_off);
                    flashMati();
                    aksi_flash = "mati";
                }else
                if (flash==2){
                    iv_flash.setImageResource(R.drawable.flash_on);
                    flashAktif();
                    aksi_flash = "hidup";
                }else
                if (flash==3){
                    iv_flash.setImageResource(R.drawable.flash_auto);
                    flashAuto();
                    aksi_flash = "auto";
                    flash = 0;
                }
                break;
        }

    }



    private void flashAktif() {
        pr = cm.getParameters();
        pr.setFlashMode(Camera.Parameters.FLASH_MODE_TORCH);
        cm.setParameters(pr);
        cm.startPreview();
    }

    private void flashAuto() {
        pr = cm.getParameters();
        pr.setFlashMode(Camera.Parameters.FLASH_MODE_AUTO);
        cm.setParameters(pr);
        cm.startPreview();
    }

    private void flashMati() {
        pr = cm.getParameters();
        pr.setFlashMode(Camera.Parameters.FLASH_MODE_OFF);
        cm.setParameters(pr);
        cm.startPreview();
    }

    private void kameraAktif() {
        sv = new SurfaceView(this);
        sh = sv.getHolder();
        sh.addCallback(new SurfaceHolderCallback());
        fr_kamera.addView(sv);

    }

    private void ambilGambar() {
        if (aksi_flash=="auto"){
            flashAuto();
        }
        cm.takePicture(null, null, jpegCallback);
        HOME = 0;

    }



    Camera.PictureCallback jpegCallback = new Camera.PictureCallback() {
        @Override
        public void onPictureTaken(byte[] data, Camera camera) {
            Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
            Matrix matrix = new Matrix();
            matrix.postRotate(90);
            Bitmap rotateBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight()
            , matrix, true);
            tampil.setImageBitmap(rotateBitmap);
            ly.setVisibility(View.VISIBLE);

        }
    };



    private class SurfaceHolderCallback implements SurfaceHolder.Callback {
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            cm = Camera.open();
            pr = cm.getParameters();
            List<Camera.Size> ss = pr.getSupportedPreviewSizes();
            Camera.Size pictSize = ss.get(0);
            pr.setPictureSize(pictSize.width, pictSize.height);
            cm.setParameters(pr);
        }

        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            try {
                 cm.setDisplayOrientation(90);
                 cm.setPreviewDisplay(sv.getHolder());
                Camera.Parameters parameters = cm.getParameters();
                List<Camera.Size> previewSize = cm.getParameters().getSupportedPreviewSizes();
                Camera.Size pre = previewSize.get(0);
                parameters.setPreviewSize(pre.width, pre.height);

                ViewGroup.LayoutParams lp = new FrameLayout.LayoutParams(
                        ViewGroup.LayoutParams.FILL_PARENT,
                        ViewGroup.LayoutParams.FILL_PARENT);

                sv.setLayoutParams(lp);
                cm.setParameters(parameters);
                cm.startPreview();
            }catch (Exception e){}

        }

        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
                cm.stopPreview();
                cm.release();
        }
    }
}

 

Pada class di atas kita menambahkan 3 method yang berfungsi untuk mengatur blitz yaitu flashAktif(), flashAuto(), dan flashMati(). Kode yang berfungsi untuk menyalakan flash light adalah "pr.setFlashMode(Camera.Parameters.FLASH_MODE_TORCH);" dimana kode ini menginstruksikan untuk membuat Flash Mode Torch ketika dilakukan tangkapan kamera.