Konsep Dasar Design UI PEMROGRAMAN MOBILE 2 Kelompok
Konsep Dasar Design UI PEMROGRAMAN MOBILE 2
Kelompok 1 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Syamsul falah 16. 11. 0029 Muhammad Aris nur Aziz 16. 11. 0046 Linatun Masrohah 16. 11. 0055 Zaenur. Rochman 16. 11. 0068 Yahya Dani Lisharyanto 16. 11. 0070 Muhammad Ali Hasani 16. 11. 0071 Muhammad Yunus 16. 11. 0076 Sofyan Fathur Rohim 16. 11. 0082 Hamid Ashari 16. 11. 0086 Asep Tri Wibowo 16. 11. 0091 Firmansah Putra 16. 11. 0093
User Interface (UI) User Interface adalah sebuah desain yang digunakan sebagai penghubung antara manusia sebagai pengguna dengan software pada perangkat sehingga akan memudahkan pengoperasian dari perangkat tersebut (wikipedia).
Multi Bahasa Sebagian besar aplikasi perangkat lunak telah memiliki dukungan fitur pengaturan bahasa. Tentu saja fitur ini sangat penting, khususnya bagi aplikasi yang ditujukan untuk pengguna secara global—dengan kemampuan penguasaan bahasa yang beragam.
Langkah – Langkah membuat aplikasi multi bahasa Pada Android Studio ▰ Pertama kita ganti mode diproject explorer dari Android ke Project dipojok kiri atas ▰ Tujuan : Agar file dan folder diproject explorer lebih terlihat lebih detail 5
▰ Membuat folder local dan string file Jika aplikasi kita ingin mendukung bahasa Spanyol, maka kita buat folder values-es lalu didalamnya kita buat string file Lokasi folder values 6
• • • Buat folder values : Klik kanan pada res -> pilih Android Resource Directory Kemudian buat file string. xml didalam folder values Membuat folder values Hasil pembuatan file string. xml 7
Ø string. xml bahasa english (values) <? xml version="1. 0" encoding="utf 8"? ><resources> <string name="app_name">My Application</string> <string name="hello_world">Hello World!</string> </resources> Ø string. xml bahasa spanyol (values-es) <? xml version="1. 0" encoding="utf-8"? ><resources> <string name="app_name">Mi Aplicación</string> <string name="hello_world">Hola Mundo!</string> </resources> Ø string. xml bahasa Prancis (values-es) <? xml version="1. 0" encoding="utf-8"? ><resources> <string name="app_name">Mon Application</string> <string name="hello_world">Bonjour le monde !</string> </resources> 8
9
Agar bahasanya berubah, kita harus mensetting bahasa default terlebih dahulu di menu Setting pada perangkat android atau emulator anda 10
Multi Ukuran Layar Semakin beragamnya ukuran layar pada prangkat Android, mulai dari 2 inch sampai dengan 10 inch, dengan begitu banyak jenis ukuran layar yang berbeda, aplikasi yang kita buat pun harus mendukung beberapa layar yang berbeda pula, untuk menyesuaikan antarmuka pengguna aplikasi ke layar yang menampilkannya.
Multi Ukuran Layar • Size (ukuran) : small, normal, large, xlarge • Density (kepadatan) : low(ldpi), medium (mdpi) , high (hdpi), extra high (xhdpi) 12
Responsive untuk membuat aplikasi yang user friendly perlu mempertimbangkan aspek responsive. • Ukuran layar • Kepadatan layar • Orientasi • Resolusi • Piksel berkepadatan independen (dp) 13
Langkah – langkah membuat desain UI Responsive ▰ ▰ ▰ 1. buka aplikasi studio 2. buat new project , yang tersedia di android studio 3. pada menu Build. gradle yang terdapat pada menu Gradle Scripts , silahkan menambahkan library daro Constrainlayout , yang terdapat pada bagian dependencies 14
4. silahkan mendrag Constrain. Layout di jendela kiri Palette , kemudian pilih Layout, setelah itu pilih Constrain. Layout. 15
pada menu Constrain. Layout terdapat beberapa menu untuk membangun user interface, diantaranya : ü mengaktifkan secara otomatis Constraint ü mengaktifkan Autoconnect Constraint ü menghapus Constraint yang terkait ü mengatur ukuran Margin pada Constrain. Layout. 5. jika selesai kita bisa dengan mudah melakukan Drag and drop , pada User Interface pada Constrain. Layout dan membuat tombol Button dan edit text dengan lebih cepat. sebagai contoh cara kerja Constrain. Layout bisa melihat pada ilustrasi di bawah ini : Ilustrasi 2 View yang posisinya di dalam Constraint. Layout 16
pada menu Constrain. Layout terdapat beberapa menu untuk membangun user interface, diantaranya : • • mengaktifkan secara otomatis Constraint mengaktifkan Autoconnect Constraint menghapus Constraint yang terkait mengatur ukuran Margin pada Constrain. Layout. 5. jika selesai kita bisa dengan mudah melakukan Drag and drop , pada User Interface pada Constrain. Layout dan membuat tombol Button dan edit text dengan lebih cepat. sebagai contoh cara kerja Constrain. Layout bisa melihat pada ilustrasi di bawah ini : 17
4. silahkan mendrag Constrain. Layout di jendela kiri Palette , kemudian pilih Layout, setelah itu pilih Constrain. Layout. pada menu Constrain. Layout terdapat beberapa menu untuk membangun user interface, diantaranya : • mengaktifkan secara otomatis Constraint • mengaktifkan Autoconnect Constraint • menghapus Constraint yang terkait • mengatur ukuran Margin pada Constrain. Layout. 18
Referensi https: //developer. android. com/training/multiscreen/screensizes https: //medium. com/@kalifardy 56/mengenal-jenis-layout-android-studio-335 a 63666 ff 7 https: //developer. android. com/guide/practices/screens_support? hl=id https: //www. okedroid. com/2015/12/cara-agar-aplikasi-android-mendukung-multi-screen. html http: //reskindroid. blogspot. com/2017/04/cara-membuat-responsive-ui. html https: //blog. dicoding. com/tips-membuat-tampilan-aplikasi-android-yang-responsive-scrollview/ https: //cloud. netlifyusercontent. com/assets/344 dbf 88 -fdf 9 -42 bb-adb 4 -46 f 01 eedd 629/9 d 741 f 4 e-6 e 65 -4 cac-8608 -e 2 a 1 a 6 c 079 d 4/table. png https: //pixplicity. com/dp-px-converter http: //blog. akutampan. com/blog/2014/02/27/penjelasan-dpi-dan-ppi/ https: //www. okedroid. com/2015/12/cara-membuat-aplikasi-android-support-multi-language. html https: //www. wildantechnoart. net/2017/09/mendesain-ui-untuk-beberapa-layar-yang-berbeda. html https: //www. techotopia. com/index. php/An_Android_Studio_Multi-Window_Split-Screen_and_Freeform_Tutorial https: //medium. com/@ocittwo/membuat-multi-bahasa-di-aplikasi-android-kamu-d 1 cecf 130 abb https: //www. okedroid. com/2015/12/cara-membuat-aplikasi-android-support-multi-language. html http: //reskindroid. blogspot. com/2017/04/cara-membuat-responsive-ui. html 19
THANKS! Ada Pertanyaan?
- Slides: 20