latiev / groceryitemview

Item View for grocery App Android

Terinspirasi dari Aplikasi Supermarket Online asal Singapura, RedMart. Grocery Item View milik redmart ini sangat menarik, berupa tiles kecil yang terdapat tombol "ADD TO CART" dibagian bawah dimana saat ditekan akan berubah menjadi tombol plus dan minus yaitu untuk mengatur berapa jumlah yang akan dibeli.

RedMart product tiles

Dengan demikian pengguna tidak perlu masuk ke item detail atau ke cart list hanya untuk mengatur jumlah yang akan dibeli, dimana cara ini banyak dilakukan aplikasi serupa yang lain.

Mari membuat tiles sendiri mirip seperti diatas, tanpa mengoyak jeroan Aplikasi redmart.

My Own Tiles

Terlihat tiles berupa rounded corner, kita bisa menggunakan CardView untuk membuatnya. Gambar diatas memakai 3dp untuk corner radiusnya.

Koreografi

Pada bagian bawah terdapat 2 elemen yang berdiri diatas LinearLayout, pertama quantity view yang didalamnya termasuk nilai quantity dan tombol (+) dan (-), kedua adalah tombol "BELI". Quantity view di set GONE terlebih dahulu karena yang akan tampil di awal adalah tombol "BELI". Setelah tombol "BELI" di klik maka dia akan di set GONE dan quantity view di set VISIBLE, serta background di set merah. Tambahkan juga Action supaya nilai quantity bertambah saat ditekan tombol (+) dan berkurang saat ditekan tombol (-). Jika nilai quantity lebih kecil dari 1 maka di set seperti awal, tombol "BELI" set VISIBLE dan quantity view set GONE serta background kembali ke putih.

Animasi

RedMart product tiles animation

Pemberian animasi perlu dilakukan agar aplikasi tidak terasa kaku, juga sebagai touch feedback yaitu umpan balik setelah pengguna mengklik. Tidak berlu berlebihan, cukup efek fade seperti diatas saja membuatnya terasa profesional.

Membuat animasi fade transisi seperti diatas cukup mudah. Berikut langkahnya:

Buat drawable transisi di folder drawable

<transition xmlns:android="http://schemas.android.com/apk/res/android">
	<item  android:drawable="@android:color/white" />
    <item android:drawable="@color/colorPrimary" />
</transition>

Diatas ada 2 layer transisi, yaitu yang pertama berupa warna putih, kedua warna primary dimana saya memakai warna merah untuk primarynya.

Panggil startTransition(diration) untuk memulai transisi dan reverseTransition(duration) untuk membalik transisi.

My Own tiles animation

Berikut animasi tambahan yang saya terapkan pada nilai quantity saat tombol (+) dan (-) diklik.

My Own tiles with extra animation

Efek Ripple

Ripple Effect memberi feedback sentuhan yang keren, namun Ripple hanya berlaku di API 21 (lolipop) keatas. Berikut adalah perbedaan jika kita menerapkan Ripple Effect dan jika tidak menggunakannya.

Tanpa Ripple	Dengan Ripple

Buat drawable ripple di folder drawable-21

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
	android:color="#ff0000">
	<item android:id="@android:id/mask">
		<shape android:shape="rectangle">
			<solid android:color="?android:colorAccent" />
		</shape>
	</item>
</ripple>

Terapkan drawable diatas ke Button atau Touchable view yang lain, maka akan ada efek ripple merah saat dan setelah disentuh.

Cart Item View

Disini saya sertakan juga item untuk di cart-nya yang menampilkan nama produk, berat dan harga serta total harga yang dihitung dengan cara mengkalikan harga produk dan jumlah yang dibeli.

Masukan ke RecyclerView

Buat RecyclerView dengan GridLayoutManagar sehingga akan terlihat seperti ini

Dan untuk Cart List saya menggunakan NavigationDrawer disebelah kanan

Mau mencoba? klik disini untuk mencoba via Appetize

Keren kan?

Butuh kerja sama dalam membangun Aplikasi Android yang keren? Contact Me

• Agus Ibrahim

Reference

• http://redmart.com/
• https://guides.codepath.com/android/Android-Design-Guidelines
• http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/