Halo … kembali lagi di tutorial membuat aplikasi android sederhana. Dimana pada tutorial kali ini kita akan belajar membuat aplikasi wallpaper dengan android studio.
Sebetulnya ini terinspirasi dari seorang pembaca ke 4 ebook premium dari badoystudio yang ingin membuat aplikasi kumpulan wallpaper, akhirnya saya sekalian buat tutorialnya.
Baiklah langsung saja inilah tutorial membuat aplikasi wallpapaer menggunakan android studio.
1. Buat Project Baru di Android Studio
Pada langkah pertama tentu saja kita akan membuat project baru. Silahkan buka anroid studio yang sudah teman-teman install, kemudian isikan :
- Application Name : buatwallpaper (disesuaikan)
- Phone and Tablet : API 19 (disesuaikan)
- Activity : Empty Activity
- Activitiy Name : MainActivity
Jika sudah tunggu sampai workspace android studio.
Baca juga : Cara membuat aplikasi pertama (hello world ) pada android studio
2. Tambahkan Library CardView
Kita akan menggunakan CardView untuk pembuatan layoutnya nanti. Jadi harus ditambahkan dependencies cardviewnya. Caranya :
- Buka build.gradle (Module:app)
- Tambahkan kode berikut
implementation 'com.android.support:cardview-v7:26.1.0'
- Lalu klik Sync Now
Note : Sesuaikan versi SDK yang kamu gunakan saat menambahkan library Cardview.
Baca Juga : Struktur project dan interface android studio
3. Tambahkan Gambar
Selanjutnya unduh gambar pendukung pada link : gambar pendukung wallpaper . Lalu copykan pada folder drawable.
Cara memasukan gambar ke drawable bisa dipelajari pada tautan dibawah ini.
Cara menggunakan drawable, strings, dan styles
4. Buat Layout Utama
Layout utama yang akan kita buat yaitu seperti gambar dibawah ini.
Pada pembuatan layout utama ini kita menggunakan komponen-komponen :
- CardView
- LinearLayout
- ScrollView
- Button
- TextView
- RelativeLayout
Langsung saja kita buat dengan cara :
- Buka ActivityMain.xml
- Kemudian ketikan kode-kode xml berikut
<?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:orientation="vertical" android:gravity="center" android:padding="15dp" tools:context="badoystudio.com.buatwalpaper.MainActivity"> <android.support.v7.widget.CardView android:layout_width="match_parent" app:cardCornerRadius="5dp" android:layout_height="match_parent"> <ScrollView android:layout_width="wrap_content" android:layout_gravity="center_horizontal" android:layout_height="wrap_content"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="vertical"> <TextView android:padding="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Wallpaper Sistem "/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:orientation="horizontal"> <Button android:id="@+id/btn_wal1" android:layout_width="100dp" android:layout_margin="3dp" android:layout_height="200dp" android:background="@drawable/btn_1"/> <Button android:id="@+id/btn_wal2" android:layout_width="100dp" android:layout_height="200dp" android:layout_margin="3dp" android:background="@drawable/btn_2"/> <Button android:layout_width="100dp" android:layout_margin="3dp" android:layout_height="200dp" android:background="@drawable/btn_3"/> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:orientation="horizontal"> <Button android:layout_width="100dp" android:layout_margin="3dp" android:layout_height="200dp" android:background="@drawable/btn_4"/> <Button android:layout_width="100dp" android:layout_height="200dp" android:layout_margin="3dp" android:background="@drawable/btn_5"/> <Button android:layout_width="100dp" android:layout_margin="3dp" android:layout_height="200dp" android:background="@drawable/btn_6"/> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:orientation="horizontal"> <Button android:layout_width="100dp" android:layout_margin="3dp" android:layout_height="200dp" android:background="@drawable/btn_7"/> <Button android:layout_width="100dp" android:layout_height="200dp" android:layout_margin="3dp" android:background="@drawable/btn_8"/> <Button android:layout_width="100dp" android:layout_margin="3dp" android:layout_height="200dp" android:background="@drawable/btn_9"/> </LinearLayout> </LinearLayout> </ScrollView> </android.support.v7.widget.CardView> </RelativeLayout>
Jika sudah hasil previewnya kurang lebih seperti gambar dibawah ini.
Baca Juga : Tutorial menggunakan relative layout dengan mudah
5. Buat Activity Preview
Selanjutnya kita harus membuat activity untuk preview wallpaper yang akan digunakan. Caranya :
- Klik kanan pada folder project wallpaper
- Pilih New > Activity > Empty Activity
- Isikan dengan nama ThemeActivity
- Maka sekarang muncul 2 file baru yaitu : ThemeActivity.java dan Activity_theme.xml
6. Buat Layout Preview
Buka activity_theme.xml lalu tambahkan kode-kode dibawah ini.
<?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:orientation="vertical" android:padding="20dp" android:background="#4a4a4a" android:id="@+id/theme_preview" tools:context="badoystudio.com.buatwalpaper.ThemeActivity"> <RelativeLayout android:padding="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"> <Button android:padding="20dp" android:id="@+id/btn_save" android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" android:layout_width="150dp" android:layout_height="70dp" android:background="@drawable/btn_set"/> <Button android:padding="20dp" android:id="@+id/btn_back" android:layout_alignParentBottom="true" android:layout_width="150dp" android:layout_height="70dp" android:background="@drawable/btn_batal"/> </RelativeLayout> </LinearLayout>
Dari kode-kode xml diatas kita bisa menemukan komponen-komponen :
- Linear Layout
- RelativeLayout
- Button
Sehingga preview yang ditampilkan yaitu :
7. MainActivity. Java
Sekarang saatnya kita menambahkan kodingan java pada MainActivity.java. Silahkan tambahkan kode-kode dibawah ini :
package badoystudio.com.buatwalpaper;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
Button btn_1, btn_2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn_1 = (Button) findViewById(R.id.btn_wal1);
btn_2 = (Button) findViewById(R.id.btn_wal2);
btn_1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent i=new Intent(MainActivity.this,ThemeActivity.class);
String pathpic="btn_1";
i.putExtra("PATH_PICTURE",pathpic);
startActivity(i);
}
});
btn_2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent i=new Intent(MainActivity.this,ThemeActivity.class);
String pathpic="btn_2";
i.putExtra("PATH_PICTURE",pathpic);
startActivity(i);
}
});
}
}
Penjelasan Singkat :
- Intent pada kode di atas digunakan untuk memproses Saat tombol ditekan (wallpaper dipilih) maka akan menampilkan halaman preview dari wallpaper
- Untuk ketiga gambar yang dibawahnya pasti tidak bisa dijadikan wallpaper karena kode java diatas hanya digunakan untuk ketiga gambar diatas. Jadi tinggal sesuaikan saja kode javanya agar semua gambar bisa dijadikan wallpaper
Baca juga : Cara menggunakan intent pada android studio dengan mudah
8. ThemeActivity.java
Untuk kode-kode java yang harus ditambahkan pada ThemeActivity.java yaitu :
package badoystudio.com.buatwalpaper;
import android.app.WallpaperManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;
import java.io.IOException;
public class ThemeActivity extends AppCompatActivity {
LinearLayout theme_preview;
Button btn_back, btn_save;
String newString;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_theme);
btn_back=(Button)findViewById(R.id.btn_back);
btn_save=(Button)findViewById(R.id.btn_save);
theme_preview=(LinearLayout)findViewById(R.id.theme_preview);
if(savedInstanceState==null){
Bundle extras=getIntent().getExtras();
if(extras==null){
newString=null;
}else {
newString=extras.getString("PATH_PICTURE");
if(newString.equals("btn_1")){
theme_preview.setBackgroundResource(R.drawable.bg_1);
btn_save.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
WallpaperManager wlp=WallpaperManager.getInstance(getApplicationContext());
Toast.makeText(getApplicationContext(),"Berhasil dipasang",Toast.LENGTH_SHORT).show();
try{
wlp.setResource(+ R.drawable.bg_1);
}catch (IOException e){
e.printStackTrace();
}
}
});
}else if (newString.equals("btn_2")) {
theme_preview.setBackgroundResource(R.drawable.bg_2);
btn_save.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
WallpaperManager wlp=WallpaperManager.getInstance(getApplicationContext());
Toast.makeText(getApplicationContext(),"Berhasil dipasang",Toast.LENGTH_SHORT).show();
try{
wlp.setResource(+ R.drawable.bg_2);
}catch (IOException e){
e.printStackTrace();
}
}
});
}else{
//write the statement
}
}
}
btn_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});
}
}
Penjelasan singkat :
- ketika tombol batalkan ditekan maka akan kembali ke layout utama
- ketika tombol set wallpaper ditekan maka wallpaper preview akan dijadikan wallpaper utama
- kemudian akan ditampilkan toast “ berhasil dipasang “
9. Edit Nama Aplikasi
Untuk nama aplikasinya sendiri saya menggunakan nama “ wallpaper “. Bisa di edit pada :
- xml yang terdapat pada folder Values
- dengan kode-kode dibawah ini
<resources> <string name="app_name">Wallpaper </string> </resources>
10. AndroidManifests.xml
Disini tambahkan beberapa konfigurasi untuk uses permissionnya. Silahkan sesuaikan kodenya dengan kode-kode xml dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="badoystudio.com.buatwalpaper">
<uses-permission android:name="android.permission.SET_WALLPAPER"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application
android:allowBackup="true"
android:hardwareAccelerated="false"
android:largeHeap="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>
<activity android:name=".ThemeActivity"></activity>
</application>
</manifest>
11. Running Aplikasi
Terakhir kita running aplikasi wallpaper yang sudah dibuat ini. Disini saya merunningnya menggunakan device android langsung yaitu Oppo A3s. Kamu bisa juga mengetest aplikasi ini menggunakan emulator genymotion atau android virtual device (emulator bawaan android studio). Dan hasilnya …
Kesimpulan …
Itulah tutorial membuat aplikasi wallpaper dengan android studio. Semoga tutorial membuat aplikasi android sederhana kali ini bisa mendapatkan insight baru untuk membuat aplikasi androidmu sendiri. Jangan lupa dipraktekan, modifikasi, dan share tutorial ini ke temanmu yang lain.