Cara mudah membuat menu slide untuk aplikasi kita dengan Javascript code

Example navigasi android

Membuat menu slide navigasi Android dengan javascript code script - dalam belajar aplikasi android kali ini kita akan bahas tentang cara membuat aplikasi android di hp sering kali kita menemukan problem dalam membuat aplikasi android kita di tuntut untuk terus menerus belajar tutorial android agar kita lebih mahir dalam membuat aplikasi android tersebut terutama dalam belajar aplikasi android mari kita mulai membuat aplikasi android tersebut yaitu belajar membuat menu slide navigasi dengan menggunakan media Javascript code kita awali dengan pengertian dari slide navigasi.

Apa itu Slide Navigasi 

Slide Navigasi adalah sebuah menu dimana untuk membantu pengelompokan menu dalam bentuk slide sehingga dapat mengoptimalkan tempat sebuh menu dan akan lebih mudah dalam mencari menu tersebut.

Manfaat dari menu Navigasi slfe 

1. Memudahkan pencaria menu
2. Membuat simple dalam penempatan
3. Membuat menu lebih keren

Dalam tutorial sebelumnya telah kita bahas Tentang banyak tutorial android sekarang mari kita mulai lagi belajar tutorial android lainnya yaitu tutorial android slide navigasi Android dengan menggunakan media Javascript code.

Membuat Project menu slide android 

Langsung buka dulu app android apk buildernya kemudian langsung

New Project > Next > Aplication Name > youtube download > Next > Web Wrapper > Next > Finish. 

Oke project Aplikasi Android tentang menu Slide navigasi telah selesai di buat kemudian masuk dulu ke . -res. res > layout > main_activity.xml buka dan tambahkan code Berikut ini

<button android:id="@+id/show" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="onClickBtn" android:background="#FFA500" android:text="Show">


</button><button android:id="@+id/hide" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="onClickBtn" android:background="#FFA500" android:visibility="gone" android:text="hide">
</button>

Kode di tambahkan di bawah script berikut ini.

<relativelayout 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">

</relativelayout>

Oh ya linearLayout di ganti dengan code RelativeLayout Baik pada script pembuka atau script penutup Seperti ini 

Yups proses pengeditan pada xml main_activity.xml telah selesai sekarang kita akan masuk ke pengeditan fungsional code seperti berikut ini.

Masuk dulu ke src > com > example > xx > MainActivity.java kemudian buka file tersebut dan tambahkan code script berikut ini.

Button button = (Button) findViewById(R.id.show);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v){


webView.loadUrl("javascript:document.getElementById('x').click();");

findViewById(R.id.hide).setVisibility(View.VISIBLE);
findViewById(R.id.show).setVisibility(View.GONE);

Toast.makeText(MainActivity.this, "Tampilkan Menu", Toast.LENGTH_SHORT).show();

} }); 

Code script di tambahkan di bawah script berikut ini.

@TargetApi(Build.VERSION_CODES.N)
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
return false;
}
});

Kemudian masukan juga script ini di bawah code script yang tadi.

Button button = (Button) findViewById(R.id.show);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v){


webView.loadUrl("javascript:document.getElementById('x').click();");

findViewById(R.id.hide).setVisibility(View.VISIBLE);
findViewById(R.id.show).setVisibility(View.GONE);

Toast.makeText(MainActivity.this, "Tampilkan Menu", Toast.LENGTH_SHORT).show();

} });

Kedua script di atas fungsional codenya adalah untuk memanggil saat tombol di txan, yang apabila tombol show aktif maka tombol hide tersimpan dan setiap kali berganti tombol maka pesan code toast java akan di tampilkan.

Untuk langkah selanjutnya kita masuk dulu ke dalam folder berikut ini.

Assets > index.html 

Kalau belum ada bisa di pelajari tutorial code sebelumnyacode android html5 kemudian setelah ini kita masukan script code berikut ini.

<div id="buka" style="position:fixed;background:lavender;width:0px ;transition: 1s;">
<button id="x" style="width:50px;" onclick="buka();">☰</button>
<button id="y" style="display:none;width:20px;" onclick="tutup();">x</button>

<div id="menu" style="width:0px;display:none">


<br><br><br><br>

<br>
<a href="https://optimasimantap.blogspot.com/">1. Menu tutorial code</a>

<br>
<br>
<a href="https://optimasimantap.blogspot.com/search/label/%20Tutorial%20Aplikasi%20Android">2. Tutorial Android</a>

<br>
<br>
<a href="https://optimasimantap.blogspot.com/search/label/Belajar%20Javascript">3. Tutorial Javascript</a>

<br>
<br>
<a href="https://optimasimantap.blogspot.com/search/label/Belajar%20HTML">4. Tutorial Html </a>
<br>
</div>
</div>
<br><br>
<script>
function buka(){
document.getElementById("buka").style="background:lavender;width:200px;height:700px;transition: 1s;";
document.getElementById("x").style="display:none";
document.getElementById("y").style="display:block";
document.getElementById("menu").style="display:block;transition: 5s;";
}

function tutup(){
document.getElementById("buka").style="background:lavender;width:0px;height:700px;transition: 1s;";
document.getElementById("x").style="display:block";
document.getElementById("y").style="display:none";
document.getElementById("menu").style="display:none;transition: 5s;";
}
</script>

Code script di atas merupakan code script dalam file html code yang di kombinasikan dengan script code html

Nah setelah proses semuanya selesai tinggal compile codenya yaitu.

build > step pack > install > pasang >buka 

Proses pembuatan Aplikasi Android code script telah selesai mari kita lihat hasilnya seperti berikut ini.

Example javascript slide navigasi android

Oke pembuatan aplikasi android script code slide navigasi telah selesai semoga bermanfaat dan bisa membantu teman - teman tentang cara membuat aplikasi android tersebut sekian dan terima kasih salam android code.

Share this

Author : admin

Related Posts