Improve Detail Aplikasi Kaskus (2)

Mungkin hanya beberapa orang saja yang memperhatikan, saat anda mulai melakukan pencarian melalui aplikasi KasKus for Android; Searchbox akan melakukan animasi expand begitu anda touch searhbox tersebut, dan melakukan animasi shrink saat anda batal melakukan pencarian.

searchbox_anim

 

Ini sebenarnya diimplementasikan menggunakan teknik yang sangat sederhana. Yang perlu dilakukan adalah men setting atribut layout agar beranimasi saat perubahan layout android:animateLayoutChanges=”true”, setalah itu layout searchbox saya berikan bobot 1 (android:layout_weight=”1) sehingga dia selalu berusaha memenuhi seluruh bagian layout; dan akhirnya saya tinggal memainkan visibility state button cancel-nya antara View.VISIBLE dan View.GONE; saat button cancel di remove dari layout (View.GONE) secara otomatis SearchBox akan berusaha memenuhi seluruh bagian layout, dan sebaliknya saat button cancel ditambahkan dalam layout (View.VISIBLE) secara otomatis SearchBox akan shrink untuk memberi tempat pada Button cancel tersebut. Kurang lebih seperti ini implementasinya:

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:orientation="horizontal"
            android:paddingLeft="5dp"
            android:paddingRight="5dp" >

            <EditText
                android:id="@+id/searchbox"
                android:hint="@string/search_hint"
                android:layout_weight="1"
                android:imeOptions="actionSearch" />

            <Button
                android:id="@+id/cancel"
                android:text="@string/cancel"
                android:visibility="gone" />
        </LinearLayout>

tentu saja teknik ini ada kekurangannya, karena android:animateLayoutChanges=”true” baru dikenali mulai dari Honeycomb; tapi ini teknik simple yang menurut saya bisa menambah menarik aplikasi kita :)

happy coding :)

Improve detail aplikasi KasKus

Sementara detail disain dikerjakan oleh teman kantor saya Yogie, saya juga memperbaiki beberapa detail aplikasi yang pada versi sebelumnya:

  1. Font di text hint password Edittext ang berubah jadi courier (bug’s di android sepertinya), sekarang menjadi sama seperti di bagian username.
  2. ImeAction pada keyboard yang pada awalnya default (“Done”) sekarang diberikan label (“Sign In”) untuk device yang support ImeActionLabel.

Berikut screenshot dari versi sebelumnya dan versi terbaru:

Screenshot_2014-05-21-17-33-35 Screenshot_2014-05-21-17-36-19

untuk kaskus pertama, ini sebenarnya behavior bawaan android (bug?), agar ini tidak terjadi, yang harus dilakukan salah satunya adalah dengan cara yang ditunjukkan di stackoverflow. Tapi, karena saya tidak lagi menggunakan default EditText, saya membuat kelas tersendiri agar EditText/TextView saya menggunakan font yang diinginkan oleh disainer kami, saya tidak perlu melakukan langkah tersebut.

Sedangkan kasus yang kedua ini, trik-nya juga sangat mudah; yang diperlukan adalah menambahkan attribute ImeActionLabel di EditText yang kita definisikan, misalnya seperti berikut:

<EditText
    android:id="@id/login_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/password"
    android:imeActionId="@+id/action_sign_in"
    android:imeActionLabel="@string/sign_in"
    android:imeOptions="actionDone"
    android:inputType="textPassword"
    android:padding="10dp"
    android:singleLine="true"
    android:textSize="12sp" />

Dengan cara ini kita bisa merubah Ime Action label di keyboard dengan label yang kita inginkan; Saat mengimplementasikan ini saya menemukan hal menarik, rupanya dengan mengganti ime action label mengakibatkan kita tidak bisa me-listen action Done di onEditorActionListener, sehingga saya menambahkan atribut ime action id (android:imeActionId) yang kemudian saya gunakan untuk mendeteksi action tersebut. Kurang lebih seperti ini caranya:

password.setOnEditorActionListener(new TextView.OnEditorActionListener() {
	@Override
	public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
		if (actionId == mContext.getResources().getInteger(R.id.action_sign_in)){
			// do signin
			return true;
		}
		return false;
	}
});

masih banyak improvement yang bisa dilakukan, dan ini sangat menarik sekali :)

happy coding :)

Mengurangi Overdraw di aplikasi KasKus

Di aplikasi Kaskus yang baru, saya berusaha lebih jauh untuk meningkatkan performa aplikasi dengan memastikan semua halaman tidak overdraw sampai dengan 3x. Hal ini berawal dari tulisan Romain Guy di sini yang membahas tentang overdraw di aplikasi Falcon Pro. Dan setelah saya mendapatkan rizki buat beli device baru (Nexus 5) saya akhirnya bisa melihat seberapa parah overdraw yang ada di aplikasi KasKus. Akhirnya dengan sedikit tweak di beberapa tempat saya berhasil membuat semua halaman di aplikasi KasKus tidak overdraw sampai 3x.

Kondisi awal aplikasi dan setelah diimprove dapat dilihat dari screenshot berikut:

overdraw parah sekali    overdraw sudah sangat minim

Mengutip tulisan Romain Guy, aturan dasar tentang overdraw ini bisa disimpulkan seperti berikut:

  • No color means there is no overdraw. The pixel was painted only once. In this example, you can see that the background is intact.

  • Blue indicates an overdraw of 1x. The pixel was painted twice. Large blue areas are acceptable (if the entire window is blue, you can get rid of one layer.)

  • Green indicates an overdraw of 2x. The pixel was painted three times. Medium-sized green areas are acceptable but you should try to optimize them away.

  • Light red indicates an overdraw of 3x. The pixel was painted four times. Small light red areas are acceptable.

  • Dark red indicates an overdraw of 4x or more. The pixel was painted 5 times or more. This is wrong. Fix it.

jadi, secara umum overdraw ~2x masih lumayan bagus. Apa saja yang saya lakukan untuk mengurangi overdraw ini:

  1. Menghapus semua background (drawable/color) yang redundant; misalnya, background selector sebuah view secara default selalu transparent/tidak ada background agar warna latar belakang yang tampak.
  2. Mengurangi jumlah view. Dalam pengerjaan layout aplikasi, setelah satau halaman selesai; saya di bantu oleh kolega kantor yang mendisain aplikasi untuk menentukan detail-detail di layout tersebut (misal color, padding, aksesoris lain); kadang ini menyebabkan hierarki view-nya jadi lebih dalam dan tidak flat lagi; maka setelah dia menyelesaikan detilnya, saya melakukan review ulang untuk membuat hierarki view-nya lebih flat. Di sini, Compound drawable sangat banyak membantu saya.
  3. Revisit beberapa view library; saya juga melihat dan mengubah view library yang saya gunakan agar tidak terjadi overdraw

Sebenarnya masih banyak yang harus di improve, disamping View/layout nya, masalah network adalah PR besar yang harus segera dikerjakan untuk meningkatkan performa aplikasi ini. Karena memang network ini seringkali yang jadi masalah di aplikasi ini. tapi ini benar-benar menarik sekali.

oh by the way, Kaskus baru redesign ui nih, sudah nyoba belum: http://kaskus.co.id/ aplikasi versi barunya segera akan live di Google Play

happy coding :)