Android Unit: px (pixel), dp/dip (density-independent pixel) dan sp (scale-independent pixels)

tldr;

selalu gunakan sp untuk teks dan dp untuk yang lainnya. Kecuali, benar-benar terpaksa dan tahu benar konsekuensinya, gunakanalah px.

Ekosistem android dikenal dengan fragmentasi spesifikasi device yang sangat bervariasi. Tentunya ini tantangan tersendiri bagi developer. Untungnya, untuk masalah screen density yang bervariasi, sepertinya sudah diantisipasi oleh para pengembang platform Android di Google, dengan memperkenalkan dua unit/satuan baru yaitu dip/dp (density-independent pixel) dan sp (scale-independent pixels).

Misalkan ada dua tablet 7-inch (ukuran diagonal layar), tablet pertama (A) memiliki resolusi layar  1200x1920px 320dpi dan yang lainnya (B) beresolusi 2048x1536px 326dpi. Membuat button dengan ukuran 300x300px mungkin akan tampak normal pada  tablet A tapi akan tampak kecil di tablet B 

Tapi akan berbeda jika kita spesifikasikan ukuran buttonnya dengan ukuran yang bergantung pada density layar alias menggunakan dip misal 300x300dp.

secara fisik ukuran button tersebut akan selalu sama pada ukuran layar yang berbeda.

Perhatikan gambar berikut:

ukuran 200dp akan dikonversi pada device mdpi (device dengan density 160dpi/dots per inch) menjadi 200px dan menjadi 400px pada device xhdpi (density 420dpi) misal pada nexus 4. Sehingga ukuran tersebut tampak sama dan konsisten secara fisik untuk beragam device dengan ukuran layar yang berbeda.

serupa dengan dp adalah sp (scaled-independent pixels) yang kita gunakan untuk ukuran teks. Perbedaannya, dengan menggunakan satuan sp android akan menscale ukuran teks sesuai dengan setting ukuran teks di device (yang biasa dapat di akses melalui menu settings).

Jadi, selalu gunakan sp untuk teks dan dp untuk yang lainnya. Kecuali, kamu benar-benar terpaksa dan tahu benar konsekuensinya, jangan menggunakan satuan px. Jika kebetulan designer yang bekerja bersama anda belum tahu, beritahukan untuk selau menginformasikan spesifikasi design dengan dp/sp. Beberapa website berikut akan sangat membantu:

1. http://developer.android.com/guide/practices/screens_support.html
2. http://developer.android.com/training/multiscreen/screendensities.html
3. http://dpi.lv/
4. https://pixplicity.com/dp-px-converter/
5. https://www.youtube.com/watch?v=zhszwkcay2A

Tulisan ini terinspirasi setelah membaca status path Sidiq (salah satu Android Developer Expert dari Indonesia )

Berusaha mengupdate keahlian dengan Pet Project: Al-Mishbah Android Application

Akhir tahun yang lalu, agar bisa mengerjakan “pet project” dengan lebih nyaman, saya, dengan izin istri tentunya :), memutuskan membeli laptop. Laptop dengan spesifikasi yang sama dengan laptop yang dipinjami oleh kantor tempat saya bekerja, MacBook Pro 13″. Ini adalah perangkat elektronik paling mahal yang pernah saya beli. Keputusan ini diambil karena keinginan saya untuk mengerjakan kembali beberapa pet project yang dulu sudah pernah saya mulai, agar tidak menggunakan properti kantor untuk keperluan pribadi.

Alhamdulillah, akhirnya laptop ini berhasil menelurkan satu aplikasi yaitu Al-Mishbah, aplikasi yang berisi al-Qur’an dan hadits beserta terjemahnya. Keinginan untuk mengupdate aplikasi al-Mishbah salah satunya karena kegelisahan saya akan banyaknya aplikasi-aplikasi hadits yang sangat populer namun menempatkan iklan disamping hadits tersebut (atau iklan muncul saat akan membaca hadits), saya merasa sedih dan kurang nyaman karena menurut pendapat pribadi saya ini kurang sopan terhadap isi dari al-Qur’an dan hadits. Oleh karena itu saya membuat aplikasi al-Mishbah tersebut, semoga saja pahala berlimpah terus mengalir dari aplikasi tersebut terhadap saya, keluarga, guru-guru dan orang tua saya.

update terakhir aplikasi Al-Mishbah tahun 2012

Konten Berbayar

Dalam aplikasi ini saya juga mencoba hal yang baru bagi saya yaitu, In-App Billing. Sebelumnya saya lebih terbiasa menjual aplikasi secara langsung, namun sepertinya hal tersebut kurang menarik  terutama bagi pengguna smartphone Android, oleh karena itu saya saya memutuskan untuk menggunakan model freemium. Semoga keputusan saya ini tepat. Aamiin

Ada yang bertanya kenapa aplikasi ini sebagian kontennya berbayar, alasannya tentu saja karena saya membutuhkan uang terutama untuk menafkahi keluarga. Dan juga piihan memasang iklan, meskipun sangat menarik bagi saya, di aplikasi Al-Mishbah ini bertentangan dengan prinsip saya yang tidak menghendaki iklan berada di aplikasi al-Qur’an.

Development

Sebagian besar waktu development sebenarnya dilakukan pada akhir tahun 2014 dimana banyak sekali waktu libur. Inspirasi disain dari aplikasi Al-Mishbah di adopsi dari aplikasi Google play books.

coret-coret disain aplikasi

Masih banyak fitur yang saya rencanakan untuk ditambahkan, tapi saya memang kurang pandai mengatur waktu :(, sehingga saat rilis masih hanya sedikit peningkatan yang dilakukan. Tapi, Insya Allah kali ini akan lebih sering lagi di update.

Nah, silahkan bagi pembaca yang berminat, langsung download aplikasinya di sini:

berikut sekilas demo videonya:

Semoga bermanfaat :)

Aplikasi Rumah Fiqih (2) : Overview Aplikasi

Aplikasi Rumah Fiqih versi terbaru saya kembangkan dengan menggunakan IDE Android Studio (beta version). Meski memiliki kekurangan utama waktu build yang masih relatif lambat (mungkin karena masih versi beta), Saya menyukai Android studio karena kita bisa membuat Flavor untuk aplikasi yang kita buat. Dengan menentukan flavor ini saya bisa membuat beberapa versi aplikasi dengan package yang berbeda dalam satu basecode/project yang sama.

    productFlavors{
        admin{
            applicationId "com.hakimlabs.rumahfiqih.admin"
        }
        publik{
            applicationId "com.hakimlabs.rumahfiqih"
        }
    }

Aplikasi Rumah Fiqih ini saya buat dengan dua flavor, yaitu versi publik dan versi admin. Versi publik adalah versi yang tersedia di Google Play Store sedangkan versi admin masih saya sendiri yang menggunakannya. Versi admin pada dasarnya sama dengan versi publik, hanya saja saya menambahkan menu yang memungkinan saya untuk meng-instantiate push notification dari aplikasi. Disamping itu, di versi admin ini saya juga melakukan experimen fitur-fitur yang nantinya bakal saya masukkan ke dalam versi publik.

Pengembangan aplikasi ini sangat terbantu dengan beberapa project open source, yaitu:
1. Picasso
Picasso adalah library untuk menampilkan image yang dibuat oleh Square Inc. Picasso ini saya pergunakan untuk menampilkan foto ustadz, dan juga snapshot video dari youtube.

	String snapshotUrl = fikrah.getYoutube().substring(fikrah.getYoutube().lastIndexOf("/")+1);
    snapshotUrl = "http://img.youtube.com/vi/"+snapshotUrl+"/0.jpg";
	Picasso.with(mContext).load(snapshotUrl).into(viewHolder);

2. Retrofit
Sebagaimana Picasso, Retrofit juga dibuat oleh developer-developer cerdas yang ada di perusahaan yang didirikan oleh salah satu founder twitter tersebut. Retrofit ini membuat implementasi API client jauh lebih mudah.
contohnya untuk endpoint:
url: API_URL/konsultasi/:kategori/:paging/:page
http method: GET
kita tinggal mendeklarasikan sebuah interface

    @GET("/konsultasi/{kategori}/{paging}/{page}")
    public List<KonsultasiSyariah> getKonsultasiKategori(@Path("kategori") int kategori, @Path("paging") int paging,
            @Path("page") int page);

den mengexecute-nya:

	restAdapter = new RestAdapter.Builder().setEndpoint(API_URL).setErrorHandler(errorHandler)
				.build();

	rumahfiqih = restAdapter.create(IRumahFiqih.class);

	.....
	public List<KonsultasiSyariah> getKonsultasiKategori(int kategori, int paging, int page) {
        return rumahfiqih.getKonsultasiKategori(kategori, paging, page);
    }

3. ListViewAnimations
Ini untuk memberikan animasi saat listview di scroll ke bawah.

4. Crouton
Saya tidak lagi menggunakan Toast untuk menampilkan error message karena berbagai isue. Penggantinya adalah crouton yang akan menampilak error message dengan lebih baik. Penggunaan crouton ini mulai banyak dipakai ketika Cyril Mottier membuat blog tentang ini di sini.

Dengan berbagai library di atas, pengembangan aplikasi Rumah Fiqih jadi jauh lebih cepat dan mudah.

Pengembangan Aplikasi Rumah Fiqih (1): Server Side

Saya memanfaatkan sebagian waktu di bulan Ramadhan ini untuk memperbarui aplikasi Rumah Fiqih. Pembaruan ini meliputi perubahan disain yang semula menggunakan navigation drawer dirubah menjadi tab, penambahan fitur push notification serta penambahan tampilan banner iklan.

Perubahan dari navigation drawer ke model tab sejatinya di pengaruhi oleh disain facebook yang terbaru yang membuang sidemenu dan juga Google+ Apps yang tidak lagi menggunakan navigation drawer. Pertimbangan perubahan navigasi dari navigation drawer ke tabs ini juga karena saya melihat aplikasi Rumah Fiqih ini hanya memiliki sedikit menu (tiga buah yaitu: Fikrah, Konsultasi Fiqih dan Video), sehingga akan lebih cocok ditempatkan di tempat yang jelas (obvious) yang memudahkan bagi user untuk melakukan navigasi dari satu menu ke menu yang lain. Pertimbangan yang sama juga saya gunakan untuk menggunakan ViewPager untuk navigate antar menu dengan metode swipe.

Push notification saya tambahkan juga karena memang artikel rumah fiqih pada dasarnya tidak selalu muncul tiap hari, jadi saya berharap jika di hari tertentu artikel muncul pengguna aplikasi ini dapat langsung membacanya. Untuk server side saya menggunakan PHP yang sekaligus sebagai server API untuk aplikasi ini.

Arsitektur Server Side Rumah Fiqih App

Saya menggunakan webserver apache karena kebanyakan hosting di Indonesia (yang murah meriha) menggunakan server ini. dan MySQL saya pilih sebagai database-nya karena saya sudah cukup terbiasa dengan MySQL. Untuk server side programming language, saya menggunakan PHP. Meskipun bukan bahasa pemrograman sehari-hari yang saya gunakan, PHP ini relatif mudah, Disamping memang hosting yang saya gunakan hanya support PHP :).
Dengan PHP ini saya membuat RestFull API dengan menggunakan Slimframework dan custom crawler.

Penambahan terakhir adalah banner dengan menggunakan AdMob terbaru yang menggunakan Google Play Service.

Aplikasi ini memang sederhana, tapi semoga bermanfaat bagi kita semuanya. aamiin :)
Yuk, download aplikasinya langsung melalui link berikut:

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:

 

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:

   

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 :)

Pemiloe! Aplikasi Pemilu 2014 (Top 10 Finalis Hackathon Code for Vote)

Akhir pekan yang lalu, tanggal 8-9 Maret 2014, saya memaksakan diri untuk mengikuti hackathon di Telkom BDV. Acara hackathon dengan tema pemilu 2014 (Code for Vote) ini diadakan oleh Perludem dan RumahPemilu.org; Tak disangka, ternyata pesertanya sangat banyak hingga 200 orang; awalnya saya agak pesimis karena mungkin saya salah satu dari sedikit peserta yang sendirian tidak dengan team. Saya bahkan sempat berfikir untuk pulang saja menemani Istri yang lagi sakit dan main sama Ahmad, anak kami :)

Tapi, karena sudah membulatkan tekat dan sudah izin istri jauh-jauh hari untuk berusaha dan berharap bisa menang di aplikasi ini (sehingga bisa bayar cicilan rumah dan beli obat untuk istri); saya memilih untuk melanjutkan dan menyelesaikan aplikasi ini dalam waktu kurang dari 24 jam; ya, saya merasa berusaha cukup keras di sini hingga hampir tidak tidur sama sekali untuk menyelesaikan aplikasinya mulai nol.

Meskipun masuk dalam 10 finalis, pada akhirnya aplikasi yang saya buat tidak termasuk top 5 apps yang mendapatkan hadiah; Sedih memang, tapi keputusan juri sudah final. Meski demikian, Saya tetap berencana mempublikasikan aplikasi yang sudah saya buat di Google Play Store, BlackBerry World, dan Nokia Ovi Store.

Pemiloe! Aplikasi Pemilu 2014

Aplikasi yang saya buat saya beri nama Pemiloe!, aplikasi ini bermanfaat memberikan informasi kepada pengguna mengenai partai politik peserta pemilu dengan detail, disamping itu dengan teknik geofencing aplikasi ini juga akan menampilkan daftar caleg dari satu partai di tempat penguna aplikasi berada. Misalnya, saat saya menjalankan aplikasi ini di Jakarta, kemudian saya mengakses partai Nasdem atau PKS misalnya, maka saya bisa melihat daftar caleg partai Nasdem atau PKS untuk DPR di daerah Jakarta tersebut; Selanjutnya pengguna bisa melihat detail dari profile caleg tersebut seperti tanggal lahir, pasangan, tempat tinggal, riwayat pendidikan, riwayat pekerjaan dan lain-lain.

berikut beberapa screenshot dari aplikasi yang saya buat:

Slideshow ini membutuhkan JavaScript.

Yang ingin mendownload aplikasinya, Insyaa Allah besok pagi sudah bisa di Unduh di Google Play Store Alhamdulillah aplikasi Pemiloe! sudah bisa didownload di link bawah ini :)