Blog Tutorial Android Bagi Pemula

Sunday, July 12, 2020

Tutorial Menerapkan Animasi Lottie di Android Studio

Di tutorial ini kita akan membahas langkah-langkah penerapan Animasi dari Lottie. Untuk mengaplikasian animasi ini bisa di katakan cukup sederhana atau mudah, karena sama sekali tidak membutuhkan bahasa programming dalam penerapannya. Ya, cukup hanya melalui layout XML saja.


Disini akan di contohkan penerapannya pada halaman splash screen dan avtivity utama. Baik, langsung saja, disini saya membuat project nya dengan nama com.gwnbs.animation. Hal pertama yang di lakukan adalah memasukkan library Lottie implementation 'com.airbnb.android:lottie:3.4.1' ke dalam file build.gradle (Module:app) kemudian lakukan sync project. Seperti di tunjukkan pada gambar berikut :

cara menerapkan animasi lottie di android studio
Gambar 1 : Memasukkan Library Lottie

Selanjutnya kita buat dulu folder yang di haruskan, yaitu sebagai tempat penyimpanan dari file animasi nya yakni folder "raw". Untuk membuatnya, klik kanan pada folder res > New > Android Resource Directory. Pada kolom Resource type pilih "raw" kemudian klik OK.

Nah sekarang kita perlu mengunduh file animasi nya, dengan mengakses lottiefiles.com. Tersedia banyak file animasi gratis disana. Ketikkan nama atau jenis animasi yang di inginkan pada kolom pencarian di website tersebut, klik pada animasi yang di inginkan, kemudian unduh file animasi yang ber format json. Pada contoh ini saya mengunduh 2 buah file animasi. Berikut gambar-gambar panduannya :


cara menerapkan animasi lottie di android studio
Gambar 2 : Panduan mengunduh file animasi di lottiefiles.com

cara menerapkan animasi lottie di android studio
Gambar 3 : Panduan mengunduh file animasi di lottiefiles.com

Setelah file yang di inginkan sudah di unduh, copy file nya melalui file explorer komputer Anda, lalu pastekan ke dalam folder "raw" yang di buat tadi. Sekarang animasi sudah bisa di masukkan ke dalam layout activity yang ada di project. Berikut contoh komponen dan atribut-atribut lottie animasi pada sebuah layout xml, misalnya pada layout root Relativelayout :

 <com.airbnb.lottie.LottieAnimationView
        android:layout_height="300dp"
        android:layout_width="300dp"
        android:layout_centerInParent="true"
        app:lottie_speed="2.5"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/launch"
        app:lottie_autoPlay="true"/>
  • atribut app:lottie_speed="2.5" berguna untuk mengatur kecepatan pergerakan animasi. Kecepatan normalnya adalah 1.
  • atribut app:lottie_loop="true" artinya "apakah animasi ingin terus berjalan atau sekali saja. Jika di set "true" maka animasi akan kembali mengulang dari awal saat durasi berakhir. Sebaliknya "false",  animasi akan berhenti saat durasi berakhir.
  • app:lottie_rawRes="@raw/launch" adalah sumber folder keberadaan file animasi.
  • app:lottie_autoPlay="true" jika di set ke "true", animasi otomatis berputar tanpa perlunya tindakan terlebih dahulu.

Berikut kode selengkapnya pada Splash activity dan Main activity dalam contoh ini :

activity_splash.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#FFFAF0"
    tools:context=".Splash">

    <com.airbnb.lottie.LottieAnimationView
        android:layout_height="300dp"
        android:layout_width="300dp"
        android:layout_centerInParent="true"
        app:lottie_speed="2.5"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/launch"
        app:lottie_autoPlay="true"/>

</RelativeLayout>

Splash.java :
package com.gwnbs.animation;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;

public class Splash extends AppCompatActivity {

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

        Thread thread = new Thread(){
            public void run(){
                try {
                    sleep(2000);
                } catch(InterruptedException ex) {
                    ex.printStackTrace();
                } finally {
                    startActivity(new Intent(Splash.this, MainActivity.class));
                    finish();
                }
            }
        };
        thread.start();
    }
}

activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/carAnim"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/car"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textColor="#000000"
        android:gravity="center"
        android:fontFamily="serif"
        android:layout_marginTop="20dp"
        android:text="Menyediakan rental mobil untuk daerah Jakarta"
        app:layout_constraintTop_toBottomOf="@id/carAnim"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Langkah-langkah peneraapan animasi di android studio
Gambar 4 : Struktur dan penamaan folder dan files pada contoh project ini

Bagaimana? simpel sekali bukan. Sama sekali tidak membutuhkan bahasa programming, cukup melalui layout xml saja. Oh ya, jika Anda menggunakan splash screen, jangan lupa untuk memindahkan atribut launcher yang ada di MainActivity ke Splash activity pada file AndroidManifest.xml. Mengenai Splash Screen lebih lanjut, bisa dilihat pada postingan terdahulu ini.

Sekian. Jika ada yang ingin di tanyakan, silahkan di tulis di komentar atau kontak form pada bilah samping kiri.



Share:

Thursday, July 9, 2020

Implementasi Text To Speech dan Speech To Text di Android Studio

Text To Speech dan Speech To Text dapat memudahkan siapa saja yang kiranya sedang malas membaca atau menulis, dan tentunya akan sangat membantu bagi mereka yang memang hobi nya malas membaca atau menulis. Pada tutorial ini, kita akan membahas bagaimana cara implementasi kodingan untuk kedua pembantu tersebut di dalam pembuatan Aplikasi Android.

Pada contoh ini kita akan menggunakan sebuah komponen Edittext, sebuah Textview, dan 3 Imageview sebagai tombol-tombol nya. Untuk activity, hanya MainActivity saja dengan layout nya activity_main. Baik, disini saya membuat project baru dengan nama package com.gwnbs.ngomong. Mari kita mulai dengan membuat layoutnya, dan menempatkan semua komponen-komponen yang di butuhkan.




Agar terlihat sedikit menarik, kita akan membuat 2 buah background drawable terlebih dahulu yang di peruntukkan sebagai background dari 2 buah Linear Layout, yang akan mengandung komponen-komponen di atas. Klik kanan pada folder drawable > New > Drawable Resource File untuk membuat file drawable. Berikan nama untuk kedua background tersebut dengan, seperti tampak pada di bawah ini :

latar_kata.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">
    <solid android:color="#5CACA1A1"/>
    <corners android:radius="20dp"/>

</shape>

latar_masukkan_kata.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">
    <solid android:color="#FFBEBEBE"/>
    <corners android:radius="20dp"/>

</shape>


Kedua file background diatas sebenarnya sama, hanya berbeda sedikit pada warna saja. Kita lanjut dengan penataan layout pada activity_main.xml. Disini kita akan memiliki Linear Layout orientasi vertical sebagai layout parent atau utama, kemudian 2 buah Linear Layout anak dengan orientasi horizontal. Tidak panjang lebar lagi, berikut isi keseluruhan :

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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/latar_masukkan_kata"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingStart="8dp"
        android:paddingEnd="8dp">

        <EditText
            android:id="@+id/enterKata"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_weight="1"
            android:background="@null"
            android:fontFamily="serif"
            android:hint="Masukkan kata"
            android:imeOptions="actionDone"
            android:importantForAutofill="no"
            android:includeFontPadding="false"
            android:inputType="text"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/bicara"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_ngomong" />

        <ImageView
            android:id="@+id/okCoy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_ok" />

    </LinearLayout>

    <ImageView
        android:id="@+id/dengar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="30dp"
        android:layout_gravity="end"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_dengar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/latar_kata"
        android:orientation="horizontal"
        android:paddingStart="8dp"
        android:paddingEnd="8dp">

        <TextView
            android:id="@+id/dapatkanKata"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:fontFamily="serif"
            android:textColor="#000000"
            android:padding="5dp"/>

    </LinearLayout>

</LinearLayout>


Terakhir MainActivity.java, pertama-tama dengan memvariabelkan objek-objek / komponen-komponen yang ada pada layout activity_main.xml, juga memvariabelkan objek TextToSpeech dan objek integer untuk posisi. Dan variabel tambahan objek animasi supaya tombol-tombol yang di klik memberikan efek.


Penjelasan selenjutnya bisa di lihat pada setiap metode-metode yang ada pada MainActivity.java di bawah ini. Untuk Speech To Text, bahasa nya tergantung pada penentuan bahasa sistem di perangkat, jika Anda menggunakan bahasa inggris di perangkat, maka ucapan Anda akan di deteksi berdasarkan bahasa tersebut. Begitu juga untuk bahasa-bahasa lainnya. Berikut isi selengkapnya MainActivity.java :

MainActivity.java :
import androidx.appcompat.app.AppCompatActivity;

import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.os.Bundle;
import android.speech.RecognizerIntent;
import android.speech.tts.TextToSpeech;
import android.view.Gravity;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    /* Variabel objek/komponen */
    EditText enterKata;
    ImageView bicara, dengar, okCoy;
    TextView dapatkanKata;
    TextToSpeech toSpeech;
    final int REQ_CODE = 1;
    AlphaAnimation click = new AlphaAnimation(1, 0.3F);

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

        /* Memanggil id-id dari komponen-komponen pada layout */
        enterKata = findViewById(R.id.enterKata);
        bicara = findViewById(R.id.bicara);
        dengar = findViewById(R.id.dengar);
        okCoy = findViewById(R.id.okCoy);
        dapatkanKata = findViewById(R.id.dapatkanKata);

        /* Metode klik untuk icon microphone dan penerapan intent dari speech to text */ 
        bicara.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.startAnimation(click);
                Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
                intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
                intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, new Locale("in"));
                intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Need to speak");
                try {
                    startActivityForResult(intent, REQ_CODE);
                } catch (ActivityNotFoundException a) {
                    toastM("Maaf! Perangkat Anda tidak mendukung!");
                }
            }
        });

        /* Metode klik dari icon centang, yang akan menghantarkan isi kata-kata yang ada di dalam edittext menjadi textview*/
        okCoy.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.startAnimation(click);
                dapatkanKata.setText(enterKata.getText().toString());
                toastM("Kata-kata di dapatkan!");
            }
        });

        /* Memanggil Text to Speech dan menentukan bahasa yang di inginkan */
        toSpeech = new TextToSpeech(getApplicationContext(), new TextToSpeech.OnInitListener() {
            @Override
            public void onInit(int status) {
                if (status != TextToSpeech.ERROR) {
                    toSpeech.setLanguage(new Locale("in"));
                }
            }
        });

        /* Metode klik dari icon speaker, dan menentukan kata-kata yang akan di ucapkan */ 
        dengar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.startAnimation(click);
                String speak = dapatkanKata.getText().toString();
                toSpeech.speak(speak, TextToSpeech.QUEUE_FLUSH, null);
            }
        });
    }

    /* Metode publik saat Text To Speech berhenti berbicara */
    public void onPause() {
        if (toSpeech != null) {
            toSpeech.stop();
            toSpeech.shutdown();
        }
        super.onPause();
    }


    /* Metode hasil saat Speech to Text berhenti mendengarkan. Kemudian kata-kata yang dihasilkan di masukkan ke dalam edittext */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQ_CODE) {
            if (resultCode == RESULT_OK){
                ArrayList<String> result = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
                if (result != null) {
                    enterKata.setText(result.get(0));
                }
            }
        }
    }

    /* Metode Toast Message. Supaya tidak berulang-ulang memanggil objek toast saat di perlukan */
    private void toastM(String toast) {
        Toast t = Toast.makeText(this, toast, Toast.LENGTH_SHORT);
        t.setGravity(Gravity.CENTER, 0, 0);
        t.show();
    }
}


Sekian dan mauliate (terima kasih). Jika ada pertanyaan silahkan di posting di komentar atau lewat kontak form di bilah samping kiri.
Share:

Wednesday, July 1, 2020

Contoh dan Tutorial Custom Gridview di Android Studio

Hello, Androiders! Postingan kali ini akan mentutorialkan penerapan Gridview ala custom di Android dengan Android Studio tentunya. Secara keseluruhan hampir-hampir sama saja dengan cara menerapakan custom Listview, hanya berbeda pada elemen di layout XML nya saja, untuk Gridview menggunakan tag <Gridview> dan Listview dengan tag <Listview>.  Untuk tampilannya sendiri cukup berbeda, dimana Listview tampilannya hanya baris, sedangkan Gridview tampilannya baris dan kolom. 

Baik, mari kita mulai dengan membuat sebuah proyek baru. Pada contoh ini saya menamakan package projectnya dengan com.gwnbs.proyeknine. Hal-hal yang akan di butuhkan disini adalah 3 java class yang mana dua di antara nya adalah class activity yaitu MainActivity.java dan ZoomActivity.java dan satu sisanya adalah Adaptor yaitu GridAdapter.java, 3 layout XML yang mana dua di antaranya adalah layout activity yaitu activity_main.xml dan activity_zoom.xml dan satu sisanya sebagai layout custom Gridview nya yaitu custom_grid.xml . Kemudian 8 buah icon yang semuanya saya download dari flaticon.com.



File ZoomActivity disini berfungsi untuk menerima intent. Intent ini akan menghantarkan item-item dari Gridview pada MainActivity menuju ke ZoomActivity, yang mana disini kita membuat gambar akan menjadi besar saat di lihat pada activity ZoomActivity. Berikut gambar yang memperlihatkan keseluruhan folder/file dan penamaan nya pada contoh project ini serta gambar dari aplikasi saat di running pada Android Virtual Device.

Gambar 1 : Keseluruhan folder dan file yang digunakan


Mari kita mulai dari activity_main.xml dengan menambahkan elemen Gridview. Berikut isi dari activity_main.xml :

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

    <GridView
        android:id="@+id/gridView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_margin="6dp"
        android:gravity="center_horizontal|center_vertical"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="20dp"
        android:numColumns="3"
        android:listSelector="#FF03DAC5"/>

</RelativeLayout>


Beberapa penjelasan mengenai atribut-atribut pada elemen Gridview di atas:
  • android:gravity="center_horizontal|center_vertical" berguna untuk memposisikan item berada di tengah-tengah secara horizontal maupun vertical.
  • android:horizontalSpacing="10dp" memberikan jarak horizontal antara satu item dengan item di sebelahnya.
  • android:verticalSpacing="20dp" memberikan jarak vertical antara satu item dengan item di bawahnya.
  • android:numColumns="3" adalah penentuan jumlah kolomnya.
  • android:listSelector="#FF03DAC5" ini akan memberikan warna pada item yang di pilih/klik.
Berikutnya buatlah sebuah layout sebagai custom layout dari Gridview yang nantinya akan di inflate melalui file java adaptor. Seperti yang sudah di jelaskan di atas, disini kita berikan nama custom_grid.xml. Layout ini berisi 2 buah komponen yaitu sebuah ImageView untuk penempatan icon dari item-itemnya dan sebuah TextView untuk penempatan teks dari item-itemnya. Berikut isi dari layout ini.

custom_grid.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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"
    tools:ignore="UseCompoundDrawables,
    UselessParent,HardcodedText">

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

        <ImageView
            android:id="@+id/gambar"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/nama"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="monospace"
            android:text="Nama"
            android:textStyle="bold"
            android:textSize="20sp" />
        
    </LinearLayout>

</RelativeLayout>


Selanjutnya adalah membuat adapter nya, yang kita namakan GridAdapter.java dalam contoh ini. Layout custom_grid.xml di inflate di dalam file ini, kemudian adaptor ini akan menghubungkan layout tersebut ke MainActivity.java. Ya.. sesuai namanya, begitulah fungsinya. Berikut dibawah isi dari file java ini.

custom_grid.xml :
import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class GridAdapter extends BaseAdapter {
    Context context;
    int[] gambar;
    String[] namanya;
    LayoutInflater inflter;

    public GridAdapter(Context applicationContext, int[] gambar, String[] namanya) {
        this.context = applicationContext;
        this.gambar = gambar;
        this.namanya = namanya;
        inflter = (LayoutInflater.from(applicationContext));
    }
    @Override
    public int getCount() {
        return gambar.length;
    }
    @Override
    public Object getItem(int i) {
        return null;
    }
    @Override
    public long getItemId(int i) {
        return 0;
    }
    @SuppressLint({"ViewHolder", "InflateParams"})
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        if (view == null) {
            view = inflter.inflate(R.layout.custom_grid, null);
        }
        ImageView gambarHewan = view.findViewById(R.id.gambar);
        TextView namaHewan = view.findViewById(R.id.nama);

        namaHewan.setText(namanya[i]);
        gambarHewan.setImageResource(gambar[i]);
        return view;
    }
}


Sebelum membuat activity baru, terlebih dahulu kita akan melakukan kodingan yang di butuhkan pada MainActivity.java. Pertama-tama dengan membuat integer untuk ke delapan icon-icon dengan memanggil sumber resource nya, lalu membuat String sebagai nama-nama dari delapan icon tersebut, kemudian menghubungkan keseluruhan dengan adaptor. Untuk metode klik pada setiap item, seperti yang di jelaskan sebelumnya di atas; setiap item yang di pilih/klik akan di hantarkan ke activity ZoomActivity mengunakan intent.

MainActivity.java :
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity {

    int [] gambar = {R.drawable.hewan_citah, R.drawable.hewan_domba, R.drawable.hewan_gajah,
            R.drawable.hewan_gorila, R.drawable.hewan_harimau, R.drawable.hewan_hiu,
            R.drawable.hewan_kuda, R.drawable.hewan_puma};
    String [] namanya = {"Cita", "Domba", "Gajah", "Gorila", "Harimau", "Hiu",
            "Kuda", "Puma"};

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

        GridView gridView = findViewById(R.id.gridView);
        GridAdapter gridAdapter = new GridAdapter(this, gambar, namanya);
        gridView.setAdapter(gridAdapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Intent zoomActivity = new Intent(getApplicationContext(), ZoomActivity.class);
                zoomActivity.putExtra("gambar", gambar[position]);
                zoomActivity.putExtra("namanya", namanya[position]);
                startActivity(zoomActivity);
            }
        });
    }
}


Kemudian membuat activity baru, yaitu ZoomActivity.java dengan layout nya activity_zoom.xml. Pada layout ini juga harus berisi 2 komponen seperti pada activity_main.xml, yaitu ImageView dan Textview. Namun disini tentu kita memberikan atribut ukuran yang lebih besar tentunya. Lalu pada ZoomActivity.java kita hanya perlu menyambut intent dari MainActivity.java. Berikut isi lengkap dari kedua file ini.

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

    <ImageView
        android:id="@+id/gambarZoom"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:layout_marginBottom="10dp"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/namaZoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/gambarZoom"
        android:layout_centerHorizontal="true"
        android:fontFamily="monospace"
        android:text="Nama"
        android:textStyle="bold"
        android:textSize="40sp" />

</RelativeLayout>

ZoomActivity.java :
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class ZoomActivity extends AppCompatActivity {

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

        ImageView gambarZoom = findViewById(R.id.gambarZoom);
        TextView namaZoom = findViewById(R.id.namaZoom);

        Intent i = getIntent();
        gambarZoom.setImageResource(i.getIntExtra("gambar", 0));
        namaZoom.setText(i.getStringExtra("namanya"));
    }
}



Tentunya Anda juga bisa menerapkan tutorial ini pada Listview, Anda hanya perlu mengganti elemen Gridview pada activity_main.xml menjadi Listview, kemudian merubah atribut-atribut nya menjadi yang sesuai untuk Listview. Sekian dan terima kasih! Apabila ada pertanyaan, silahkan di tanyakan saja melalui komentar atau contact form pada bilah samping kiri.
Share:

Hubungi Saya

Name

Email *

Message *

Terlaris 30 Hari Terakhir