cara membuat menu dropdown pada aplikasi android ( spinner )

Code tutorial javascript code webview menu dropdown

Example dropdown App

Cara membuat menu slide dropdown Javascript xml pada aplikasi android ( spinner ) - dalam tutorial kali ini tentang aplikasi berbasis android kita akan bahas tentang bagaimana membuat dropdown menu pada aplikasi android kita, dalam membuat menu dropdown adroid ada banyak cara yaitu bisa dengan Javascript dropdown menu atau denga xml dropdown yang kemudian di fungsikan dengan java dropdown misal saat kita menggunakan mode html assets maka kita gunakan adalah javascript dropdown kalau kita menggunakan xml file maka kita gunakan spinner dropdown kita mulai pembahasan kita langsung dua - duanya.

Manfaat dan fungsi dropdown

Mempercantik tampilan desigan aplikasi android
Mengelompokan suatu design menjadi lebih simple
Memudahkan pengunjung dalam mencari data

Cara membuat Project menu Doropdown spinner xml

Seperto biasa Kita langsung buat Project dropdown menuyaitu caranya pertama buka dulu apk Builder kemudian New Project > Aplication Name ( isi dropdown Menu ) > Next > Empity Activity > Next > MainActivity > Finisih ya project dropdown menu sudah di buat sekarang kita lanjut ke cara menampilkan menu dropdown spinner selanjutnya.

Buka file res > layout > main_activity.xml kemudian edit file tersebut tambahkan code spinner Dropdown berikut ini.

Tambahkan di bawah code.

LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">

Simpan file terebut kemudian langsung menuju ke res > value > string.xml edit file tersebut tambahkan kode berikut ini.

<resources>
<string name="app_name">Dropdown menu</string>
<br>

<string name="country_prompt">Cari Negara</string>

<string-array name="country_arrays">
<item>asia</item>
<item>America</item>
<item>Indonesia</item>
<item>Francis</item>
<item>Italy</item>
<item>Singapore</item>
<item>Belanda</item>
<item>India</item>
</string-array>

</resources>

Masukan semua data tersebut hapus data yang lama kemudian save file tersebut.

Sekarang kita lihat hasil dari script spinner dropdown xml tersebut seperti di bawah ini.

Example spinner xml

Cara membuat menu dropdow project webview Javascript

Seperto biasa buat project dropdown webview dulu, untuk membuat project tersebut bisa di lihat pada tutorial sebelumnya.

Cara membuat project Webview Android

Tambahkan script di bawah ini agar index webview support javascript code codenya seperti ini.

webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/index.html");

Kalau belum paham cara menambahkannya bisa melihat tutorial sebelumnya yaitu :

Cara membuat Aplikasi android Calculator Sederhana

Setelah di buat langsung menuju file folder assets > index.html buka dan edit tambahkan javascript script dropdown seperti di bawah ini.

<select>
<option value="" disabled="disabled" selected="selected">Please select a name</option>

<option value="1">One</option>

<option value="2">Two</option>

</select>

atau dengan script berikut ini.

<div align="center" style="width:80px;border:1px solid black;">

<button style="display:none;" id="m" onclick="jsDropdownCode1();">Dropdown Close</button>
<button id="n" onclick="jsDropdownCode2();">Dropdown Open</button>

<div id="dropdown-open">
<a href="#"><button style="width:80px;border:1px solid black">Link 1</button></a>
<br>
<a id="gg" href="#"><button style="width:80px;border:1px solid black">Link 2</button></a>
<br>
<a id="gg" href="#"><button style="width:80px;border:1px solid black">Link 3</button></a>
</div>
</div>
    
<script>
function jsDropdownCode1(){
document.getElementById('dropdown-close').style="display:block";
document.getElementById('m').style="display:none";
document.getElementById('n').style="display:block";
document.getElementById('dropdown-close').id="dropdown-open";
}
function jsDropdownCode2(){
document.getElementById('dropdown-open').style="display:none";
document.getElementById('m').style="display:block";
document.getElementById('n').style="display:none";
document.getElementById('dropdown-open').id="dropdown-close";
}

</script>

Dan Untuk melihat hasil script tersebut yaitu dropdown webview via Js code seperti berikut ini.