[Dribbble Challenge] 1/2 — Coffee Ordering Animation

Android Native — UI Interaction Page | Level : Beginner

Motivasi

Kadang-kadang ketika kita berselancar di halaman web seperti dribbble, uplabs, atau pttrns kita sering menemukan banyak konsep atau prototype design yang berupa animasi, mikro interaksi, flow aplikasi dan sebagainya. Saya sering menemukan ilustrasi mobile app yang bagus dan menarik, namun tentu saja masih dalam bentuk rancangan, nah maka dari itu, kenapa tidak kita coba untuk mengaplikasikannya sebagai antarmuka untuk aplikasi yang akan kita bangun selanjutnya.

Coffee Ordering Animation (Starbucks)

Pada seri Dribbble Challenge kali ini kita akan mencoba membangun antarmuka untuk Coffee Ordering, seperti yang saya temukan diatas.

Hasil Akhir — Coffee Ordering Animation dengan Kotlin

Flownya cukup sederhana, yaitu :

1. User akan memilih ukuran gelas
2. User akan memasukan pesanan kedalam keranjang,
3. Kemudian diarahkan ke halaman checkout

Pada tulisan kali ini saya asumsikan bahwa kita sudah pernah membuat halaman aplikasi dengan Android Studio. Kali ini kita akan menggunakan Kotlin untuk bahasa pemrogramannya, sedikit tahu tentang penggunaan animasi pada aplikasi sudah cukup, karena halaman yang akan kita bangun cukup sederhana.

Setting Project

Sebelum membuat halaman order coffee, kita membutuhkan beberapa library selain library yang sudah disediakan oleh IDE ketika pertama kali kita melakukan inisiasi project Android. Untuk kegunaan masing-masing library akan saya jelaskan selanjutnya.

Download asset untuk drawable dan anim disini.

Library

Colors

Style

AndroidManifest

Gunakan style/CartAnimation sebagai tema default aplikasi

Halaman Order Coffee

Buat sebuah activity seperti biasa dengan nama CartAnimataionActivity.kt dan activity_cart_animation.xml

Kali ini kit akan menggunakan SwipeRevealLayout library Untuk membuat slidable layout pada halaman order coffee, konsepnya adalah dengan menggunakan dua child dari view group SwipeRevealLayout , untuk mempermudahnya mari kita pisahkan layout ke dalam dua file dengan cara buat res layout bernama layout_content.xml dan layout_background.xml

layout_content.xml adalah halaman muka yang berwarna putih, sedangkan layout_background.xml adalah layout di belakangnya yang berwarna hijau yang menampung item yang diorder dan total yang harus dibayar.

layout_content.xml

layout_background.xml

Kemudian masukan kedalam activity_cart_animation.xml yang mempunyai root view SwipeRevealLayout

Kemudian run

Kita sudah mandapatkan UI garis besarnya, yaitu halaman yang bisa di slide up dan slide down untuk menampilkan bagian bawah layer dari halaman yang akan kita gunakan sebagai cart dan menghitung total harga ordernya.

Selanjutnya adalah menambah code untuk mengubah tepian bawah layer utama menjadi melengkung setiap kali state dari SwipeRevealPane-nya adalah open

Kita akan membuat methode baru bernama initView() kemudian panggil pada method onCreate() untuk memudahkan kita melakukan inisiasi pada view item.

Maka setiap kali state open layer utama akan berganti background agar tepian bawah melengkung, serta menampilkan swipeable panel dibagian bawahnya seperti berikut :

SwipeRevealLayout — Membuka section cart pada halaman.

Bersambung ke bagian kedua ….

Pada bagian kedua kita akan lanjutkan dengan interaksi memlilih size coffee, menambahkan ke cart dan menampilkan halaman checkout order. Terimakasih.

Tulisan saya yang lain :

Membangun Landing Page Aplikasi GO-JEK dengan Flutter SDK : (Bagian 1/3)

(Part 1 of 3) Networking with RxJava on Android Like A Boss