Tile displayed in various sizes

Ketika kamu sedang menciptakan aplikasi, komponen apa yang paling sulit kamu pikirkan? Mungkinkah salah satunya adalah nama aplikasi (app name)? Atau ketika kamu ingin memberi tahu kepada orang lain apa yang bisa dilakukan oleh aplikasi kamu hanya dalam satu kalimat yang singkat namun padat, apakah itu juga sulit? Nama sebuah aplikasi dan deskripsinya menjadi salah satu kunci agar dapat menarik hati calon penggunanya. Icon atau logo aplikasi juga menjadi salah satu faktor penting agar aplikasi dapat sukses dilirik banyak orang.

Di aplikasi Windows 10, logo aplikasi bisa juga ditempelkan di live tile-nya. Live tile sendiri sudah menjadi ciri khas yang unik yang dimiliki Windows sejak versi Windows 8. Live tile dapat menyajikan informasi di ubin (tile) aplikasi tanpa kita harus menjalankan aplikasi tersebut. Namun developer mempunyai preferensi sendiri ketika mengembangkan aplikasinya, apakah mereka ingin menggunakan fitur live tile atau hanya sekedar menempelkan logo saja di tile aplikasi.

 

Pada bagian kedua tutorial UWP ini, saya akan menjelaskan cara mengatur nama dan deskripsi aplikasi, serta cara memasang logo aplikasi UWP.

“Windows 7? Good. Windows 8? Crap. Windows 9? Good. Windows 10?”

 

Windows 10... We finally fixed everything
Wut?

 


Baca tutorial sebelumnya: Cara Membuat Project dan Men-deploy Aplikasi Windows 10 UWP


Setelah kamu membuat project aplikasi UWP dan dihadapkan dengan tampilan IDE-nya, lihatlah ke sidebar sebelah kanan dan cari Solution Explorer. Di situ kamu bisa melihat file-file apa saja yang terlibat dalam project.

Sidebar Solution Explorer
Gambar 1. Sidebar Solution Explorer

 

Di Solution Explorer, klik ganda file bernama Package.appxmanifest untuk memunculkannya di tampilan code editor. Package.appxmanifest merupakan file tempat kita mengatur informasi dasar aplikasi seperti nama, deskripsi, dan logo aplikasi. Di sini kamu juga bisa mengatur aplikasi untuk dapat mengakses hardware ataupun kemampuan tertentu, namun pada tutorial ini saya tidak akan menjelaskannya.

File tersebut bukanlah berisi kodingan, melainkan formulir yang dapat kita isi sesuka kita. Jadi di tutorial ini kamu tidak perlu pusing-pusing (lol).

 

Package.appxmanifest Window
Gambar 2. Formulir konfigurasi Package.appxmanifest

 

Pertama, kita akan memberi nama dan deskripsi aplikasi.

Pada jendela Package.appxmanifest, navigasikan ke tab Application.

Untuk mengatur nama aplikasi, isilah Display name dengan nama aplikasi yang kamu inginkan.

Untuk mengatur deskripsi aplikasi, isi pada form Description.

 

Sebagai tambahan, untuk mengatur rotasi yang didukung oleh aplikasi, centang jenis orientasi rotasi yang kamu inginkan di Supported rotations.

 

Application Properties Form
Gambar 3. Formulir properti Application

 

Sekarang deploy aplikasinya dan lihatlah list aplikasi di Start menu. Di sana muncul aplikasi dengan nama yang telah kamu beri.

 

App deployed with a new name
Gambar 4. Aplikasi dengan nama barunya

 

Selanjutnya kita akan mengatur logo dan tile aplikasi.

Masih di Package.appxmanifest, navigasikan ke tab Visual Assets.

 

Visual Assets Properties Form
Gambar 5. Formulir properti Visual Assets

 

Lalu di sidebar sebelah kiri di dalam bagian Visual Assets, klik All Image Assets.

 

Select All Image Assets
Gambar 6. Pilih “All Image Assets”

 

Pada bagian Tile, terdapat tiga elemen yang dapat kamu atur, yaitu Short name, Show name, dan Background color.

 

Fill Tile Configuration
Gambar 7. Formulir konfigurasi Tile

 

Di Short name, kamu bisa membuat aplikasi menampilkan nama yang berbeda dari nama aplikasi yang telah kamu atur di bagian Application. Di sini saya mengisinya dengan nama yang lebih pendek, yaitu UWP Tutor App (nama asli aplikasi adalah UWP Tutorial App).

Di Show name, kamu bisa mengatur pada ukuran berapa saja tile akan menampilkan nama aplikasi. Di sini saya memilih Square 310×150 Logo alias ukuran Wide, sehingga nama aplikasi hanya akan muncul jika saya mengubah ukuran tile aplikasi menjadi Wide.

Di Background color, kamu bisa mengatur warna latar tile sesuka kamu. Di mobile, jika kamu memberi warna latar pada tile aplikasi, tile tidak akan menjadi transparan ketika kamu mengatur opacity Start screen menjadi transparan, melainkan akan tetap menggunakan warna latar tersebut.

 

Pada bagian Splash Screen -> Background color, isilah dengan warna latar splash screen. Di sini saya memberikan warna latar yang sama dengan warna latar tile aplikasi.

 

Fill Splash Screen Color
Gambar 8. Formulir konfigurasi Splash Screen

 

Pada bagian Square 71×71 Logo, isilah dengan file gambar logo yang kamu Ingin untuk ditampilkan pada tile ukuran 71×71 pixel (Small).

 

Fill Assets for Square 71x71 (Small) Tile Size
Gambar 9. Formulir konfigurasi Square 71×71 Logo untuk mengatur logo yang akan ditampilkan pada tile dalam ukuran Small

 

Keterangan ukuran tile adalah sebagai berikut:

  • Square 71×71: Small
  • Square 150×150: Medium
  • Square 310×150: Wide
  • Square 310×310: Large

 

Isi hingga bagian terakhir, yaitu Splash screen.

 

Fill Assets until Splash Screen
Gambar 10. Formulir konfigurasi assets untuk Splash Screen

 

Setelah semua visual assets yang dibutuhkan terisi, mari kita coba deploy aplikasinya.

Aplikasi terlihat begitu menawan dengan splash screen dan warna latar barunya, seperti tampak pada Gambar 11.

 

New Splash Screen
Gambar 11. Aplikasi dengan Splash Screen yang baru

 

Lalu coba kita pin tile aplikasi ke Start menu dan coba ubah ukuran tile ke setiap ukuran yang ada.

Dapat terlihat pada Gambar 12 bahwa tile hanya menampilkan nama aplikasi pada saat ukurannya Wide, dan nama aplikasi yang muncul adalah short name-nya.

 

Tile displayed in various sizes
Gambar 12. Tile ditampilkan dalam berbagai ukuran, yaitu Small (kiri atas), Medium (kanan atas), Wide (kanan bawah), dan Large (kiri bawah)

 

Setelah kita mencobanya di PC, mari kita coba deploy ke mobile.

Dan hasilnya adalah seperti Gambar 13 untuk splash screen barunya, dan Gambar 14 untuk tile dalam berbagai ukuran.

 

New Splash Screen - Mobile
Gambar 13. Splash Screen baru aplikasi dengan orientasi Portrait (kiri) dan Landscape (kanan) yang berjalan di perangkat mobile

 

Various Tile Sizes - Mobile
Gambar 14. Tile aplikasi pada perangkat mobile yang ditampilkan dalam ukuran Small (kiri), Medium (tengah), dan Wide (kanan)

 

Seperti biasa, jika kamu ingin mencoba menjalankan project ini tanpa mengikuti tutorial, silakan download source code project dan App Packages tutorial ini dan langsung saja deploy.


Baca tutorial selanjutnya: Cara Menambahkan Elemen Kontrol (Control Element) di Aplikasi UWP


Sekian tutorial bagian kedua yang saya buat tentang cara mengatur nama, deskripsi, dan visual assets aplikasi Windows 10 UWP. Jika ada pertanyaan ataupun masalah mengenai tutorial ini, silakan tulis di kolom komentar dan saya akan mencoba membantu. Terima kasih telah membaca sampai akhir kata!