Cara Membuat Step Progress bar dengan HTML dan CSS

Selamat Siang teman-teman kali ini Saya mau membahas cara membuat step progress dengan html dan CSS.apa itu step progress? ketika anda mendaftar di facebook misalnya aka nada beberapa part, misalnya part pertama kita mengisi nama, email dll, kemudian part ke dua kita disuruh mengupload foto, dan part ke 3 di suruh menambahkan beberapa teman. nah di atasnya itu ada step  progress, ketika kita udah di part ke dua part ke satunya akan hijau karena telah terlewati dan part selanjutnya yang belum diisi akan berwarna abu-abu. untuk membuat itu kita siapkan dulu struktur htmlnya seperti di bawah:
<!DOCTYPE html>
<html>
<head>
    <title>
Step Progress Tutorial</title>
</head>
<body>
    <div
class="container">
        <ul
class="progressbar">
            <li
class="active">Step 1</li>
            <li>
Step 2</li>
            <li>
Step 3</li>
        </ul>
    </div>
</body>
</html>

kemudian untuk CSS nya seperti di bawah :
.container {

width: 100%;

}

.progressbar {

counter-reset: step;

}

.progressbar li {

list-style-type: none;

float: left;

width: 33.33%;

position: relative;

text-align: center;

}

.progressbar li:before {

content: counter(step);

counter-increment: step;

width: 30px;

height: 30px;

line-height: 30px;

border: 2px solid #ddd;

display: block;

text-align: center;

margin: 0 auto 10px auto;

border-radius: 50%;

background-color: white;

}

.progressbar li:after {

content: '';

position: absolute;

width: 100%;

height: 2px;

background-color: #ddd;

top: 15px;

left: -50%;

z-index: -1;

}

.progressbar li:first-child:after {

content: none;

}

.progressbar li.active {

color: green;

}

.progressbar li.active:before {

border-color: green;

}

.progressbar li.active + li:after {

background-color: green;

}



kemudian jalankan di browser, ok sekian dulu tutorial kali ini semoga bermanfaat.

Membuat Navbar Collapse ketika di scroll ke bawah ilang, ketika di scroll ke atas muncul



Iya Selamat malam kali ini admin akan berbagi tips membuat navbar collapse ketika kita scroll ke bawah navbarnya ilang, ketika di scroll ke atas navbarnya muncul kaya navbar twitter. langsung aja, pertama buat dulu kerangka htmlnya

<!DOCTYPE html>
<html>
<head>
    <meta
charset="utf-8">
    <title>
Navbar Scroll Effect</title>
    <link
rel="stylesheet" href="css/nav.css">
</head>
<body>
    <nav>
        <ul>
            <li><a
href="#">Home</a></li>
            <li><a
href="#">About</a></li>
            <li><a
href="#">Contact Us</a></li>
            <li><a
href="#">Gallery</a></li>
            <li><a
href="#">Profile</a></li>
            <li><a
href="#">Service</a></li>
        </ul>
    </nav>

    <div
class="content">

    </div>
    <script
src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
    <script
type="text/javascript">
       
(function() {
        var documentElem = $(document),
        nav = $('nav'),
        lastScrollTop = 0;

        documentElem.on('scroll', function() {
        var currentScrollTop = $(this).scrollTop();

        // scroll down
        if(currentScrollTop > lastScrollTop) nav.addClass('hidden');
        // scrollTop
        else nav.removeClass('hidden');

        lastScrollTop = currentScrollTop;
        });

        })();
   
</script>
</body>
</html>

kemudian kita buat style nya di css
* {

 margin: 0;

 padding: 0;

 }



 nav {

 position: fixed;

 width: 100%;

 top: 0;

 background-color: #555;

 text-align: center;

 padding: 20px 0;

 transition: all 0.5s ease;

 -webkit-transition: all 0.5s ease;

 -o-transition: all 0.5s ease;

 -ms-transition: all 0.5s ease;

 -moz-transition: all 0.5s ease;

 }



 .hidden {

 transform: translate3d(0,-100%,0);

 -webkit-transform: translate3d(0,-100%,0);

 -o-transform: translate3d(0,-100%,0);

 -ms-transform: translate3d(0,-100%,0);

 -moz-transform: translate3d(0,-100%,0);

 }



 nav ul li {

 display: inline-block;

 margin-right: 60px;

 }



 nav ul li:last-child {

 margin-right: 0;

 }



 nav ul li a {

 text-decoration: none;

 text-transform: uppercase;

 color: #fff;

 font-family: Arial, sans-serif;

 }



 .content {

 height: 2000px;

 background-color: rgb(200,200,200);

 }


Silakan lihat hasilnya di browser, jika ada yang error bisa ditanyakan pada kolom komentar di bawah. Ok sekianlah tutorial kali ini semoga bermanfaat, jika berkenan mohon di share ke teman anda

Download Sitem Login PHP dengan MySQLi dilengkapi dengan google re-captcha dan terintegrasi dengan facebook OAuth 2

Selamat Siang Sobat kali ini admin akan membahas tentang aplikasi login-register sistem, aplikasi ini berguna untuk mengauthentikasi user yang masuk ke website / aplikasi kita, aplikasi ini dibuat dengan PHP dan databse MySQLi juga telah dilengkapi dengan Google re-Captcha, ada juga fitur login dengan facebook, untuk mengaktifkan  login dengan facebook buat dulu aplikasi anda di https://developers.facebook.com/apps/ kemudian setelah mendapatkan ID dan Kunci aplikasi masukan ke fbconfig.php dan cari baris dibawah

// init app with app id and secret
FacebookSession::setDefaultApplication( 'Masukan id aplikasi disini','masukan kunci aplikasi disini' );

Ini tampilannya



untuk databasenya sudah saya masukan dalam folder diatas, jika artikel ini bermanfaat silakan share ke teman anda

Pengalaman Ditilang dan Sidang di Bogor

Hi pemirsa kali ini saya mau sharing tentang pengalaman saya ketilang di daerah bogor, waktu itu pelanggaranya gara-gara bawa tas di taro di depan waktu saya mau mudik, mana jauh banget lagi sidangnya harus di cibinong bogor sedangkan kontrakan saya di jakarta, kemudian saya ditilang dan saya memilih sidang. karena tilangnya elektrik jadi harus transfer dulu ke bank BRI sebesar 500 ribu rupiah, tapi karena saya tidak percaya untuk transfer maka saya tunggu sampai tanggal sidang, untungnya di kejaksaan bisa bayar langsung di loket jadi ngak usah transfer dulu.

kejaksaan disana menerima pembayaran melalui transfer dan cash. anda kena tilang 250 ribu, 500ribu atau satu juta jangan khawatir karena setelah kita ikut sidang biaya denda  nya Cuma 50 ribu sampai seratus ribu saja dan bisa bayar di loket jadi nggak usah bolak balik ke bank ngambil sisa uang kembalian

karena saya baru pertama kali ketilang dan pertama kali juga mengikuti sidang tilang saya sempat ke pengadilan dulu ternyata kata orang pengadilanya sekarang sudah tidak ada sidang dan barang bukti serta pembayaran bisa diambil di kejaksaan. sesuai peraturan baru katanya. untungnya petugas pengadilanya baik ngunjukin saya “langsung aja ke kejaksaan karena berkasnya ama barang bukti mau dikirim kesana, sekarang lagi ditandangani ama hakimnya” katanya

setelah saya sampai ke kejaksaan saya langsung ngantri mengikuti orang-orang untuk mengambil nomor antrian, oh iya jika anda ingin mendapatkan nomor antrian yang pertama anda harus datang lebih awal karena banyak orang-orang yang ngantri juga semakin siang semakin banyak.

Untungnya disana saya nunggu tidak terlalu lama, katanya barang bukti (SIM / STNK) yang ditahan  baru dikirim dari pengadilan sekitar jam 9, jam Sembilan lewat loket sudah dibuka  dan langsung kita dipanggil sesuai nomor antrian, nomor antrian saya pun tidak terlalu tinggi saya mendapatkan nomor 36. lumayan cepat saya datang ke kejaksaan jam 8 kurang dan jam 9 lebih saya sudah selesai

di loket kita Cuma mengambil barang bukti kita yang ditahan dan sekalian bayar jika kita belum transfer, jika kita sudah transfer tinggal minta berkas untuk mengambil uang sisa kita, kemudian diambil lagi di bank

adapun biaya dendanya kalau yang ditahan SIM mau kena satu pasal atau dua pasal pun dendanya Cuma 50ribu tetapi kalu yang ditahan STNK dendanya 70-100ribu. untuk informasi lebih lengkapnya bisa anda buka situs kejaksaan bogor di pn-bogor.go.id/layanan/pid/tilang


tetapi jika anda kena di dareah Jakarta tetap harus di transfer dulu, baru kita ambil berkas ke kejaksaan untuk mengambil barang bukti yang ditahan dan uang kembalian

oke semoga bermanfaat dan bisa dijadikan refernsi jika anda mau mengikuti sidang, jika artikel ini bermanfaat silakan share ke teman anda

Cara mengakses kamera webcam dari web dengan javascript / jquery

Selamat malam kali ini admin akan memposting cara mengakses webcam sendiri di browser dengan javascript. disini saya menggunakan node.js, socket.io dan jquery

Pertama-tama buat file package.json dengan isi seperti berikut:
{
       
"name" : "Wcam-Live",
       
"version" : "0.0.1",
       
"dependencies" : {
       
"socket.io" : "*",
       
"express" : "*",
       
"log" : "*"
       
}
}

kemudian ketikan perintah npm install di command promt

selanjutnya buat file app.js dengan isi seperti dibawah:
var express = require("express");

var app = new express();

var http = require("http").Server(app);

var io = require("socket.io")(http);



    var Log = require('log'),

    log = new Log('debug')



    var port = process.env.PORT || 3000;



    app.use(express.static(__dirname + "/public"));



    app.get('/',function(req,res){

    res.redirect('index.html');

    });



    io.on('connection',function(socket){

    socket.on('stream',function(image){

    socket.broadcast.emit('stream',image);

    });

    });



    http.listen(port,function(){

    log.info('server di jalankan pada port %s',port);

    });

kemudian test di browser dengan dengan perintah node app.js

selanjunya buat folder dengan nama public, didalam folder public buat tiga file index.html, emitir.html dan visualizar.html
untuk isi index.html masukan kode dibawah:
<!DOCTYPE html>

<html>

<head>

<title>Webcam-Live</title>

</head>

<body>

<p><a href="emitir.html">Emitir Video</a></p>



<p><a href="visualizar.html">Visualizar web</a></p>

</body>

</html>

kemudian untuk isi emitir.html masukan kode berikut :
<!DOCTYPE html>

<html>

<head>

<title>Emitir Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<video src="" id="video" style="width: 680px;height:320px;" autoplay="true"></video>

<iframe src="visualizar.html" height="400px" width="40%" style="overflow-x: hidden;overflow-y: hidden;"></iframe>



<canvas style="display: none" id="preview"></canvas>

<div id="logger"></div>



<script type="text/javascript">

        var canvas = document.getElementById('preview');

        var context = canvas.getContext("2d");



        canvas.width = 800;

        canvas.height = 600;



        context.width = canvas.width;

        context.height = canvas.height;



        var video = document.getElementById("video");



        var socket = io();



        function logger(msg)

        {

        $("#logger").text(msg);

        }



        function loadCam(stream)

        {

        video.src = window.URL.createObjectURL(stream);

        logger('Camera connected [OK]');

        }



        function loadFail()

        {

        logger('Error! Camera not connected');

        }



        function viewVideo()

        {

        context.drawImage(video,0,0,context.width,context.height);

        socket.emit('stream',canvas.toDataURL('image/webp'));

        }



        $(function(){

        navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia);

        if(navigator.getUserMedia){

        navigator.getUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.webkitGetUserMedia){

        navigator.webkitGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.mozGetUserMedia){

        navigator.mozGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.msgGetUserMedia){

        navigator.msgGetUserMedia({video: true},loadCam,loadFail);

        }



        setInterval(function(){

        viewVideo(video,context);

        }, 70);

        });

</script>

</body>

</html>

dan untuk isi visualizar.html masukan kode berikut:
<!DOCTYPE html>

<html>

<head>

<title>Visualizar Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<img id="play" width="100%">

<div id="logger"></div>



<script type="text/javascript">

        var socket = io();

        socket.on('stream', function(image){

        var img = document.getElementById("play");

        img.src = image;

        $("#logger").text(image);

        });

</script>

</body>

</html>


selanjutnya jalankan aplikasi anda dengan perintah node app.js, akan ada tulisan server dijalankan pada port 3000. selanjunya buka localhost:3000 jika webcam nya tampil di browser seperti pada gambar di bawah berarti anda telah berhasil,


 selanjunya kode ini bisa anda kembangkan untuk membuat aplikasi video call / confrence call. sekian tutorial kali ini semoga bermanfaat, jika artikel ini berguna silakan share ke teman anda, jika ada yang error bisa di tanyakan pada komentar dibawah

Membuat Desain ListView to GridView di Android Studio

Selamat datang di Juanas Smith Shared kali ini admin akan membagikan cara membuat desain listview menjadi gridview, dari gridview ke listview di android studio, artikel ini ditujukan bagi anda yang sedang belajar pemrograman android pemula hingga mengengah



Langkah Pertama buatlah dua viewstub di activity main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:orientation="vertical">

    <ViewStub
       
android:id="@+id/stub_list"
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="10dp"
       
android:inflatedId="@+id/showLayout"
       
android:layout="@layout/my_listview" />

    <ViewStub
       
android:id="@+id/stub_grid"
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
        
android:layout_marginTop="10dp"
       
android:inflatedId="@+id/showLayout"
       
android:layout="@layout/my_gridview" />

Selanjutnya buat grid_item untuk layout gridviewnya
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingTop="10dp"

    android:paddingBottom="10dp"

    android:paddingLeft="10dp"

    android:paddingRight="10dp"

    android:background="#fff">



    <ImageView

        android:id="@+id/ImageView"

        android:layout_width="80dp"

        android:layout_height="80dp"

        app:srcCompat="@mipmap/ic_launcher_round"

        android:layout_gravity="center"/>



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/txtTitle"

        android:textStyle="bold"

        android:layout_below="@+id/ImageView"

        android:text="Title"

        android:textAppearance="?android:attr/textAppearanceMedium"

        android:layout_gravity="center"/>



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/txtDescription"

        android:textStyle="bold"

        android:text="Description"

        android:textAppearance="?android:attr/textAppearanceSmall"

        android:layout_below="@+id/txtTitle"

        android:layout_toRightOf="@+id/ImageView"

        android:layout_gravity="center"/>



</LinearLayout>

jika tadi membuat grid_item sekarang buatlah list_item untuk layout list nya
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    xmlns:id="http://schemas.android.com/tools">



    <ImageView

        android:id="@+id/ImageView"

        android:layout_width="80dp"

        android:layout_height="80dp"

        app:srcCompat="@mipmap/ic_launcher_round" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/txtTitle"

        android:textStyle="bold"

        android:text="Title"

        android:textAppearance="?android:attr/textAppearanceMedium"

        android:layout_toRightOf="@+id/ImageView"

        android:layout_marginTop="15dp"

        android:layout_marginLeft="20dp"/>



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/txtDescription"

        android:textStyle="bold"

        android:text="Description"

        android:textAppearance="?android:attr/textAppearanceSmall"

        android:layout_below="@+id/txtTitle"

        android:layout_toRightOf="@+id/ImageView"

        android:layout_marginTop="10dp"

        android:layout_marginLeft="20dp"/>

</RelativeLayout>

Langkah berikutnya buat layout lagi dengan nama my_gridview.xml untuk menampung gridviewnya
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#d1d1d1">



    

    <GridView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/mygridView"

        android:paddingTop="0dp"

        android:paddingBottom="15dp"

        android:columnWidth="100dp"

        android:gravity="center|bottom"

        android:horizontalSpacing="10dp"

        android:layout_marginLeft="0dp"

        android:layout_marginRight="0dp"

        android:numColumns="3"

        android:stretchMode="spacingWidth"

        android:verticalSpacing="20dp"

        android:dividerHeight="10dp" />

</FrameLayout>

Sekarang buat my_listview.xml untuk menampung listview nya
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent"

    android:background="#d1d1d1">



    <ListView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/myListView"

        android:cacheColorHint="#000"

        android:paddingTop="10dp"

        android:dividerHeight="10dp"

        android:divider="#ffffff"

        android:layout_marginLeft="0dp"

        android:layout_marginRight="0dp" />



</FrameLayout>

Kemudian buat class product di java
package giviews.id.listview2gridview;



/**

 * Created by asus on 09/05/2017.

 */



public class Product {

    private int imageId;

    private String title, description;



    public Product(int imageId, String title, String description) {

        this.imageId = imageId;

        this.title = title;

        this.description = description;

    }



    public int getImageId() {

        return imageId;

    }



    public void setImageId(int imageId) {

        this.imageId = imageId;

    }



    public String getTitle() {

        return title;

    }



    public void setTitle(String title) {

        this.title = title;

    }



    public String getDescription() {

        return description;

    }



    public void setDescription(String description) {

        this.description = description;

    }

}

Kemudian buat GridViewAdapter di java
package giviews.id.listview2gridview;



import android.content.Context;

import android.support.annotation.LayoutRes;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;



import java.util.List;



/**

 * Created by asus on 09/05/2017.

 */



public class GridViewAdapter extends ArrayAdapter<Product> {



    public GridViewAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List<Product> objects) {

        super(context, resource, objects);

    }



    @NonNull

    @Override

    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        View v = convertView;



        if (null == v) {

            LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            v = inflater.inflate(R.layout.grid_item, null);

        }

        Product product = getItem(position);

        ImageView img = (ImageView) v.findViewById(R.id.ImageView);

        TextView txtTitle = (TextView) v.findViewById(R.id.txtTitle);

        TextView txtDescription = (TextView) v.findViewById(R.id.txtDescription);



        img.setImageResource(product.getImageId());

        txtTitle.setText(product.getTitle());

        txtDescription.setText(product.getDescription());



        return v;

    }

}

dan sekarang ListViewAdapter
package giviews.id.listview2gridview;



import android.content.Context;

import android.support.annotation.LayoutRes;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;



import java.util.List;



/**

 * Created by asus on 09/05/2017.

 */



public class ListViewAdapter extends ArrayAdapter<Product> {



    public ListViewAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List<Product> objects) {

        super(context, resource, objects);

    }



    @NonNull

    @Override

    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        View v = convertView;



        if (null == v) {

            LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            v = inflater.inflate(R.layout.list_item, null);

        }

        Product product = getItem(position);

        ImageView img = (ImageView) v.findViewById(R.id.ImageView);

        TextView txtTitle = (TextView) v.findViewById(R.id.txtTitle);

        TextView txtDescription = (TextView) v.findViewById(R.id.txtDescription);



        img.setImageResource(product.getImageId());

        txtTitle.setText(product.getTitle());

        txtDescription.setText(product.getDescription());



        return v;

    }

}

Kemudian buat menu dengan nama main.xml untuk menempatkan tombol switch view dari gridview ke list view
<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/item_menu_1" android:title="Swith View"></item>

</menu>

Terakhir sesuaikan isi file MainActivity.java seperti dibawah
package giviews.id.listview2gridview;



import android.content.SharedPreferences;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewStub;

import android.widget.AdapterView;

import android.widget.GridView;

import android.widget.ListView;

import android.widget.Toast;



import java.util.ArrayList;

import java.util.List;



public class MainActivity extends AppCompatActivity {



    private ViewStub stubGrid, stubList;

    private ListView listView;

    private GridView gridView;

    private ListViewAdapter listViewAdapter;

    private GridViewAdapter gridViewAdapter;

    private List<Product> productList;

    private int currentViewMode = 0;



    static final int VIEW_MODE_LISTVIEW = 0;

    static final int VIEW_MODE_GRIDVIEW = 1;







    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        stubList = (ViewStub) findViewById(R.id.stub_list);

        stubGrid = (ViewStub) findViewById(R.id.stub_grid);



        //inflate ViewStube before get view



        stubList.inflate();

        stubGrid.inflate();



        listView = (ListView) findViewById(R.id.myListView);

        gridView = (GridView) findViewById(R.id.mygridView);



        //get list of product

        getProductList();



        //get current view in share references

        SharedPreferences sharedPreferences = getSharedPreferences("View Mode", MODE_PRIVATE);

        currentViewMode = sharedPreferences.getInt("currentViewMode", VIEW_MODE_LISTVIEW); //default view is listview

        //register item click

        listView.setOnItemClickListener(onItemClick);

        gridView.setOnItemClickListener(onItemClick);



        switchView();



    }



    private void switchView() {

        if(VIEW_MODE_LISTVIEW == currentViewMode) {

            // display listview

            stubList.setVisibility(View.VISIBLE);

            // hide gridview

            stubGrid.setVisibility(View.GONE);

        }else{

            // hide listview

            stubList.setVisibility(View.GONE);

            // display gridview

            stubGrid.setVisibility(View.VISIBLE);

        }

        setAdapters();

    }



    private void setAdapters() {

        if (VIEW_MODE_LISTVIEW == currentViewMode) {

            listViewAdapter = new ListViewAdapter(this, R.layout.list_item, productList);

            listView.setAdapter(listViewAdapter);

        }else{

            gridViewAdapter = new GridViewAdapter(this, R.layout.grid_item, productList);

            gridView.setAdapter(gridViewAdapter);

        }

    }



    public List<Product> getProductList() {

        // pseudo code to get product, replace your code to get real product here

        productList = new ArrayList<>();

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 1", "This is description 1"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 2", "This is description 2"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 3", "This is description 3"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 4", "This is description 4"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 5", "This is description 5"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 6", "This is description 6"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 7", "This is description 7"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 8", "This is description 8"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 9", "This is description 9"));

        productList.add(new Product(R.mipmap.ic_launcher_round, "Title 10", "This is description 10"));

        return productList;

    }



    AdapterView.OnItemClickListener onItemClick = new AdapterView.OnItemClickListener() {

        @Override

        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            // Do anything when user click to item

            Toast.makeText(getApplicationContext(),productList.get(position).getTitle() +" - " + productList.get(position).getDescription(), Toast.LENGTH_SHORT).show();

        }

    };



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main, menu);

        return super.onCreateOptionsMenu(menu);

    }



    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {

            case R.id.item_menu_1:

                if (VIEW_MODE_LISTVIEW == currentViewMode) {

                    currentViewMode = VIEW_MODE_GRIDVIEW;

                }else{

                    currentViewMode = VIEW_MODE_LISTVIEW;

                }

                //Swith view

                switchView();

                //save view mode is share reference

                SharedPreferences sharedPreferences = getSharedPreferences("ViewMode", MODE_PRIVATE);

                SharedPreferences.Editor editor = sharedPreferences.edit();

                editor.putInt("currentViewMode", currentViewMode);

                editor.commit();



                break;

        }

        return true;

    }

}


Silakan jalankan aplikasi anda, jika da yang error silakan ditanyakan di kolom komentar dibawah. jika artikel ini bermanfaat silakan di share ke teman anda. terimakasih sudah berkunjung ke blog kami.