Cara Membuat Aplikasi Kartu Ucapan

Project 1

Haii Haii Ketemu Lagi sama saya Tedo Haris Chandra hehehe … Seperti biasa saya disini mau sedikit sharing ilmu nihh bagi para pemula seperti saya yang mau belajar menjadi Android Developer . Nahh setelah di postingan sebelumnya kita sudah belajar bersama soal Linear Layout dan Relative Layout , kini sekarang kita mau belajar pengaplikasian dari layout tersebut nih … yaitu membuat Kartu Ucapan dengan menggunakan Android Studio .

Nahh Penasaran bagaimana caranya ??? Yups mungkin kalian yang sudah mempelajari Udacity pasti sudah menemukan langkah / cara membuatnya tapi saya ulas lagi bagi kalian yang belum belajar di Udacity ya . Yups Langsung saja yukss …

Okee … Hasil dari kartu ucapan yang kita buat adalah seperti gambar di bawah ini nih :

Nahh … kira kira apa sajakah elemen yang dibutuh kan nih kalau kita lihat tampilan di atas ??? Okee kita uraikan apa sajakah yang dibutuh kan untuk membuat tampilan di atas.

  1. ImageView
  2. TextView (Sejumlah 2 yaitu yang atas dan yang bawah)

Nahh Simple bukan ? cukup menggunakan 2 elemen tersebut kita sudah bisa membuat kartu ucapan seperti di atas , selain itu kita bisa melatih keterampilan memainkan layout kita .

Oke langkah pertama kita akan memilih gambar sebagai backgroundnya terlebih dahulu .

Untuk gambar yang akan kita gunakan terserah kalian mau menggunakan gambar apa sebagai background nya tapi saya akan menggunakan gambar android party dari Udacity ini . Untuk link bisa di dapatkan di bawah ini ya :

https://discourse-cdn.global.ssl.fastly.net/udacity/uploads/default/original/3X/1/2/1277985cc392d405031be59b67fbf0892cd8bc19.jpg

Okayy sekarang kita telah menentukan gambar sebagai backgroundnya ..

Langkah kedua adalah kita memasukan gambar yang kita pilih ke Android Studio . Bagaimana caranya ???

  1. Kita pilih gambar yang kita gunakan / gambar yang telah di download tadi . Lalu klik kanan copy.
  2. Lalu masuk ke Android Studio , lalu di bagian kiri dari Android studio kita pilih folder Drawable yang berada di dalam folder Res.
  3. klik kanan pada folder Drawable pilih paste , lalu gambar kita akan kepaste ke dalam folder Drawable.

Maka Hasil nya adalah seperti gambar di bawah ini :

Nahhh … Kita telah melakukan Langkah kedua yaitu mengcopy gambar kita kedalam folder drawable. Wahhhh …. Keren , setelah itu apa yang harus kita lakukan ???

Kita akan masuk ke pengaturan XML nya.

Okeee Langkah langkah nya pertama kita masuk ke activity_main.xml

Kita atur Layout kita disini kita akan menggunakan Relative Layout , jadi kita atur menjadi Relative Layout terlebih dahulu . Lalu kita buat ImageView nya sehingga seperti tampilan di bawah ini :

Nahh android:src= adalah cara pengambilan gambar kita yang terdapat pada folder drawable tadi , nah cara mengambilnya adalah dengan @drawable/androidparty . Nahh lalu kita dapatkan tampilan seperti di bawah ini :

Nahhh Masih terlihat di samping kiri dan kanan masih ada sisa ya ? untuk menghilangkannya kita hapus semua padding bawaan yang terdapat pada file XML tadi . Hapus semuanya baik yang Bottom , Left , Right , Maupun Top . Sudah ?? Maka hasilnya akan seperti di bawah ini :

Nahh tidak ada sisa di kanan maupun kiri gambar , Kereeenn kalian sudah bisa . Langkah selanjutnya adalah kita akan membuat gambar tersebut memenuhi layar .

  1. Kita atur layout_width dan layout_weight pada gambar tersebut menjadi match_parent .
  2. Ternyata gambar kita belum penuh , hal ini dikarenakan kondisi gambar yang landscape . Nahh kita ambil saja bagian tengah dari gambar menggunakan scaleType , terdapat dua pilihan kita pilih yang centerCrop.

Sehingga tampilannya menjadi seperti di bawah ini :

Bagaimana Jadi lebih keren bukan ??? nahh berarti untuk pengaturan gambar kita sudah selesai … YEAAAYY .

Setelah ini kita akan membuat tampilan TextView nya , disini kita akan menggunakan dua TextView , yaitu untuk tulisan yang berada di atas dan di bawah. Kita akan membuat text yang berada di atas terlebih dahulu.

Tambahkan XML berikut ini di dalam Relative Layout dan di bawah ImageView :

Nahh berikut penjelasannya :

  1. text = digunakan untuk mengisikan text apa yang kita tulis nahh kalian bebas mau mengucapkan ulang tahun kepada siapa.
  2. textSize = di gunakan untuk mengatur ukuran tulisan
  3. fontFamily = di gunakan untuk mengatur Font (Jenis) Tulisan
  4. textColor = Untuk mengatur warna dari tulisan
  5. padding = di gunakan untuk memberikan jarak tulisan dengan area TextView nya (mengatur jarak dari dalam kotak) .

Nahh sehingga hasilnya adalah seperti gambar di bawah ini :

Wahhh Kereeen , kita sudah hampir jadi nih membuatnya semangattt …

Setelah itu kita buat tulisan keduanya yaitu yang berada di bawah , ketikan TextView seperti di bawah ini :

Nahh disini kita akan mengatur tulisan tersebut di bawah sebelah kanan nahh perintah yang kita gunakan adalah layout_alignParentBottom kita buat True , lalu layout_alignParentRight juga kita buat True. Nahh tulisan akan berada di bawah sebelah kanan . Hasilnya adalah seperti tampilan di bawah ini :

Yeeaayy kita telah selesai membuat kartu ucapan Ulang tahun kita … Sederhana sekali bukan ? Ternyata dengan hanya memainkan Layout kita bisa membuat kartu ucapan keren berbentuk apk . … wkwkwk.

Nahh untuk code lengkapnya seperti di bawah ini :

Okee sekian postingan saya hari ini semoga dapat bermanfaat bagi kita semua , nantikan postingan postingan Tedo Selanjutnya yaaa , dan tetap semangat dalam Belajar :))

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.