Design UI Aplikasi Android #Gnome Droid V2

Melanjutkan Design UI Aplikasi Android #Gnome Droid pada posting yang sebelumnya, kali ini saya kembali membuat Design UI Aplikasi Android dengan tema yang sama yaitu interface Desktop Environment Gnome. Pada Design UI ini saya memberi nama Gnome Droid V2. Berikut hasil tangkapan layar interface Gnome Droid V2 yang dijalankan di emulator Genymotion.

Anda bisa mendownload source code, icon dan backgroud melalui link dibawah ini :

Download Source Code

Download Icon

Download Background

Tool yang saya gunakan membuat Design UI Gnome Droid V2

•  Eclipse 4.4.2 Luna
•  Android SDK 24.1.2
•  Android Emulator Genymotion 

Berikut langkah-langkah membuat Design UI Aplikasi Android #Gnome Droid v2

• Buat project android application baru di eclipse 
• Buat folder drawable didalam folder /res, kemudian copy icon dan background yang sudah anda download ke folder drawable
• Setelah itu edit file string.xml menjadi sbb :
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">GnomeDroidV2</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="linuxer">Linuxer Madura</string> <!-- Tombol bagian atas --> <string name="btn_messages">Messages</string> <string name="btn_phone">Phone</string> <string name="btn_music">Music</string> <string name="btn_whatsapp">WhatsApp</string> <string name="btn_playstore">PlayStore</string> <!-- tombol bagian tengah --> <string name="btn_email">Email</string> <string name="btn_path">Path</string> <string name="btn_hangout">Hangout</string> <string name="btn_youtube">Youtube</string> <string name="btn_calender">Calender</string> <!-- Tombol Bagian Bawah --> <string name="btn_facebook">Facebook</string> <string name="btn_camera">Camera</string> <string name="btn_map">Maps</string> <string name="btn_calculator">Calculator</string> <string name="btn_istagram">Istagram</string> </resources>

• selanjutnya buka activity_main.xml, kemudian ketikan code berikut :
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#7000" > <!-- Layout Parent Title Bar --> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#7000" > <TextView android:id="@+id/id_linuxer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/linuxer" android:textColor="#FFF" android:textSize="18sp" android:textStyle="bold" /> <ImageButton android:id="@+id/btn_power" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginEnd="20dp" android:layout_marginRight="10dp" android:background="@android:color/transparent" android:contentDescription="@string/hello_world" android:src="@drawable/ic_settings_power_white_18dp" /> </RelativeLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerVertical="true" android:background="#7000" android:orientation="vertical" android:padding="5dp" > <ImageButton android:id="@+id/btn_airdroid" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:contentDescription="@string/hello_world" android:src="@drawable/airdroid" /> <ImageButton android:id="@+id/btn_bbm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:contentDescription="@string/hello_world" android:src="@drawable/bbm" /> <ImageButton android:id="@+id/btn_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:contentDescription="@string/hello_world" android:src="@drawable/chat" /> <ImageButton android:id="@+id/btn_chrome" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:contentDescription="@string/hello_world" android:src="@drawable/chrome" /> <ImageButton android:id="@+id/btn_dropbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:contentDescription="@string/hello_world" android:src="@drawable/dropbox" /> </LinearLayout> </RelativeLayout> <!-- Tombol Bagian Atas --> <Button android:id="@+id/btn_music" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:background="@android:color/transparent" android:drawableTop="@drawable/music" android:text="@string/btn_music" android:textSize="12sp" /> <Button android:id="@+id/btn_phone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:layout_toLeftOf="@id/btn_music" android:layout_toStartOf="@id/btn_music" android:background="@android:color/transparent" android:drawableTop="@drawable/phone" android:text="@string/btn_phone" android:textSize="12sp" /> <Button android:id="@+id/btn_email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:layout_toLeftOf="@id/btn_phone" android:layout_toStartOf="@id/btn_phone" android:background="@android:color/transparent" android:drawableTop="@drawable/email" android:text="@string/btn_email" android:textSize="12sp" /> <Button android:id="@+id/btn_whatsapp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:layout_toEndOf="@id/btn_music" android:layout_toRightOf="@id/btn_music" android:background="@android:color/transparent" android:drawableTop="@drawable/whatsapp" android:text="@string/btn_whatsapp" android:textSize="12sp" /> <Button android:id="@+id/btn_playstore" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:layout_toEndOf="@id/btn_whatsapp" android:layout_toRightOf="@id/btn_whatsapp" android:background="@android:color/transparent" android:drawableTop="@drawable/playstore" android:text="@string/btn_playstore" android:textSize="12sp" /> <!-- Tombol Bagian Tengah --> <Button android:id="@+id/btn_messages" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@android:color/transparent" android:drawableTop="@drawable/messages" android:text="@string/btn_messages" android:textSize="12sp" /> <Button android:id="@+id/btn_path" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@id/btn_messages" android:layout_toStartOf="@id/btn_messages" android:background="@android:color/transparent" android:drawableTop="@drawable/path" android:text="@string/btn_path" android:textSize="12sp" /> <Button android:id="@+id/btn_hangout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toEndOf="@id/btn_messages" android:layout_toRightOf="@id/btn_messages" android:background="@android:color/transparent" android:drawableTop="@drawable/hangout" android:text="@string/btn_hangout" android:textSize="12sp" /> <Button android:id="@+id/btn_youtube" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@id/btn_path" android:layout_toStartOf="@id/btn_path" android:background="@android:color/transparent" android:drawableTop="@drawable/youtube" android:text="@string/btn_youtube" android:textSize="12sp" /> <Button android:id="@+id/btn_calender" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toEndOf="@id/btn_hangout" android:layout_toRightOf="@id/btn_hangout" android:background="@android:color/transparent" android:drawableTop="@drawable/calender" android:text="@string/btn_calender" android:textSize="12sp" /> <!-- Tombol Bagian Bawah --> <Button android:id="@+id/btn_facebook" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="50dp" android:background="@android:color/transparent" android:drawableTop="@drawable/facebook" android:text="@string/btn_facebook" android:textSize="12sp" /> <Button android:id="@+id/btn_camera" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="50dp" android:layout_toLeftOf="@id/btn_facebook" android:layout_toStartOf="@id/btn_facebook" android:background="@android:color/transparent" android:drawableTop="@drawable/camera" android:text="@string/btn_camera" android:textSize="12sp" /> <Button android:id="@+id/btn_maps" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="50dp" android:layout_toLeftOf="@id/btn_camera" android:layout_toStartOf="@id/btn_camera" android:background="@android:color/transparent" android:drawableTop="@drawable/maps" android:text="@string/btn_map" android:textSize="12sp" /> <Button android:id="@+id/btn_calculator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="50dp" android:layout_toRightOf="@id/btn_facebook" android:layout_toEndOf="@id/btn_facebook" android:background="@android:color/transparent" android:drawableTop="@drawable/calculator" android:text="@string/btn_calculator" android:textSize="12sp" /> <Button android:id="@+id/btn_istagram" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="50dp" android:layout_toRightOf="@id/btn_calculator" android:layout_toEndOf="@id/btn_calculator" android:background="@android:color/transparent" android:drawableTop="@drawable/istagram" android:text="@string/btn_istagram" android:textSize="12sp" /> </RelativeLayout>

• setelah itu buka AndroidManifest.xml, tambahkan code android:screenOrientation="landscape" di dalam tag activity untuk membuat tampilan hanya berjalan pada mode landscapse. Silahkan perhatikan code AndroidManifest.xml dibawah ini :
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.rhosy.gnomedroidv2" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="9" android:targetSdkVersion="22" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" android:screenOrientation="landscape"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

• Terakhir, silahkan jalankan aplikasi anda.

Silahkan anda gunakan dan modifikasi source code tersebut sesuai dengan keinginan anda. sekian postingan Design UI Aplikasi Android #Gnome Droid V2 semoga bermanfaat. Terima Kasih