Langsung ke konten utama

Membuat Card View Seperti Facebook dengan Android Studio


Membuat file Server

Sebelum memulai pemrograman di Android Studio terlebih dahulu buatlah file json di server atau folder htdocs anda. Untuk yang belum tahu silahkan baca postingan Mengenal dan Menginstall XAMPP.

  • Buat folder di htdocs dengan nama card_view
  • Buat folder baru di card_view dengan nama gambar dan buat sebuah file baru dengan nama data.json.
     

    Isi folder gambar dengan gambar-gambar anda. Gambar ini nantinya akan ditampilkan pada aplikasi android.

     

    Sedangkan file json isi dengan kode:

    {
                "data":[
                {
                    "nama": "Coding Rakitan",
                    "gambar_user": "logo_coding_rakitan.jpg",
                    "status": "Saya sedang belajar membuat card view",
                    "jam": 1,
                    "gambar_status": [],
                    "like": 20,
                    "komen": 2
                },
                {
                    "nama": "User 1",
                    "gambar_user": "none",
                    "status": "Card View dengan satu gambar status",
                    "jam": 1,
                    "gambar_status": ["g1.jpg"],
                    "like": 20,
                    "komen": 2
                },
                {
                    "nama": "User 2",
                    "gambar_user": "none",
                    "status": "Card View dengan dua gambar status",
                    "jam": 1,
                    "gambar_status": ["g2.jpg", "g3.jpg"],
                    "like": 20,
                    "komen": 2
                },
                {
                    "nama": "User 3",
                    "gambar_user": "none",
                    "status": "Card View dengan tiga gambar status",
                    "jam": 1,
                    "gambar_status": ["g17.jpg", "g5.jpg", "g6.jpg"],
                    "like": 20,
                    "komen": 2
                },
                {
                    "nama": "User 4",
                    "gambar_user": "none",
                    "status": "Card View dengan empat gambar status",
                    "jam": 1,
                    "gambar_status": ["g7.jpg", "g8.jpg", "g9.jpg", "g10.jpg"],
                    "like": 20,
                    "komen": 2
                },
                {
                    "nama": "User 4",
                    "gambar_user": "none",
                    "status": "Card View lebih dari empat gambar status",
                    "jam": 1,
                    "gambar_status": ["g4.jpg", "g12.jpg", "g13.jpg", "g14.jpg", "g15.jpg", "g16.jpg", "g17.jpg"],
                    "like": 20,
                    "komen": 2
                }
            ]
            }
     
    Pada bagian gambar_status isinya adalah nama-nama gambar yang ada di folder gambar tadi. Sedangkan gambar_user juga terletak di folder gambar. Jika tidak ingin menambahkan gambar user silahkan isi dengan none.

Struktur File Aplikasi Android

Sebelum memulai ada baiknya anda mengetahui struktur file yang akan kita buat.
  • Layout -> Struktur yang pertama adalah layout dimana akan ada 5 file.
     
  • Java -> Terdiri dari 2 file yaitu MainActivity dan GambarStatus.
     
  • Drawable -> Untuk mengetahui ikon-ikon yang perlu di tambahkan akan di jelaskan di tahap selanjutnya. Dibawah ini adalah strukturnya saja.
     

Pembuatan Aplikasi

Buatlah sebuah project baru dengan nama CardView. Belum tahu cara membuat project baru ? silahkan baca Cara Membuat Project Baru di Android Studio. Format lainnya silahkan lihat di gambar.

1. Menambahkan Ikon kedalam drwable.

Berkut ikon-ikon yang ditambahkan kedalam folder drawable.

 

Jika anda belum tahu cara menambahkan ikon-ikon tersebut silahkan baca postingan Cara Menggunakan Icon Vector Asset bawahan Android Studio

2. Mengimport Library

Ada dua library yang kita perlukan yaitu.
  • Volley -> Untuk melakukan koneksi data ke server, dimana terdapat filde data.json
  • android-networking -> Untuk menampilkan gambar dari server/internet.
Untuk menambahkannya silahkan buka file build.gradle (Module.app) dan tambahkan kode dibawah pada bagian dependencies.

implementation 'eu.the4thfloor.volley:com.android.volley:2015.05.28'
implementation 'com.amitshekhar.android:android-networking:1.0.2'

Hingga hasilnya seperti gambar berikut.





Selanjutnya silahkan sync atau syncronisasi (biasanya berjalan otomatis). Pastikan komputer anda terhubung dengan internet sebab ada beberapa file yang harus di download selama proses ini.

3. Membuat Layout

Sperti pada struktur di atas buatlah 5 layout activity_main (biasanya sudah ada tinggal di edit), card_view, dua_gambar, tiga_gambar, dan empat_gambar. Lalu isi dengan kode berikut.

  • activity_main.xml

    • <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/background_utama"
        tools:context=".MainActivity">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/kontent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" />
        </ScrollView>
    </RelativeLayout>


  • card_view.xml
    • <?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:padding="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:drawable/dialog_holo_light_frame"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="10dp">

                <com.androidnetworking.widget.ANImageView
                    android:id="@+id/gambar_profile"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:scaleType="fitXY"
                    app:srcCompat="@mipmap/ic_launcher" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/nama"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="Coding Rakitan"
                            android:textColor="@android:color/black"
                            android:textStyle="bold" />

                        <ImageView
                            android:id="@+id/imageView2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:srcCompat="@drawable/ic_more_horiz_black"
                            tools:ignore="VectorDrawableCompat" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/jam"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="2 jam yang lalu"
                            android:textSize="12sp" />

                        <ImageView
                            android:id="@+id/imageView7"
                            android:layout_width="7dp"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="5dp"
                            android:adjustViewBounds="true"
                            android:tint="@color/abu_abu"
                            app:srcCompat="@drawable/ic_lens_black"
                            tools:ignore="VectorDrawableCompat" />

                        <ImageView
                            android:id="@+id/imageView8"
                            android:layout_width="15dp"
                            android:layout_height="wrap_content"
                            android:adjustViewBounds="true"
                            android:tint="@color/abu_abu"
                            app:srcCompat="@drawable/ic_public_black"
                            tools:ignore="VectorDrawableCompat" />
                    </LinearLayout>

                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="10dp">

                <TextView
                    android:id="@+id/status"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="TextView"
                    android:textColor="@android:color/black"
                    android:textSize="18sp" />
            </LinearLayout>

            <FrameLayout
                android:id="@+id/frame_gambar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:id="@+id/ly_gambar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" />
            </FrameLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="10dp">

                <TextView
                    android:id="@+id/like"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="22 Like"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/komen"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="10 Comment"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="20dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/imageView4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:tint="@color/abu_abu"
                        app:srcCompat="@drawable/ic_thumb_up_black"
                        tools:ignore="VectorDrawableCompat" />

                    <TextView
                        android:id="@+id/textView5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Like" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/imageView5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:tint="@color/abu_abu"
                        app:srcCompat="@drawable/ic_mode_comment_black"
                        tools:ignore="VectorDrawableCompat" />

                    <TextView
                        android:id="@+id/textView6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Comment" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/imageView6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:tint="@color/abu_abu"
                        app:srcCompat="@drawable/ic_reply_black"
                        tools:ignore="VectorDrawableCompat" />

                    <TextView
                        android:id="@+id/textView7"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Share" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>


  • dua_gambar.xml
    • <?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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:orientation="horizontal">

        <com.androidnetworking.widget.ANImageView
            android:id="@+id/gd_satu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop" />

        <com.androidnetworking.widget.ANImageView
            android:id="@+id/gd_dua"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="1dp"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop" />

    </LinearLayout>


  • tiga_gambar.xml
    • <?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="wrap_content"
        android:background="@android:color/darker_gray"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <com.androidnetworking.widget.ANImageView
                android:id="@+id/eg_satu"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="1dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <com.androidnetworking.widget.ANImageView
                android:id="@+id/eg_dua"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="1dp"
                android:layout_weight="1"
                android:adjustViewBounds="false"
                android:scaleType="centerCrop"
                tools:ignore="VectorDrawableCompat" />

            <com.androidnetworking.widget.ANImageView
                android:id="@+id/eg_tiga"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="1dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop" />

        </LinearLayout>
    </LinearLayout>


  • empat_gambar.xml
    • <?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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="1dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <com.androidnetworking.widget.ANImageView
                android:id="@+id/gt_satu"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginRight="1dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="fitXY" />

            <com.androidnetworking.widget.ANImageView
                android:id="@+id/gt_dua"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="1dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="1dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <com.androidnetworking.widget.ANImageView
                android:id="@+id/gt_tiga"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="1dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"/>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <com.androidnetworking.widget.ANImageView
                    android:id="@+id/gt_empat"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="1dp"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:scaleType="fitXY" />

                <LinearLayout
                    android:id="@+id/ly_lebih"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/transparan"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/tx_lebih"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="2 +"
                        android:textColor="@android:color/white"
                        android:textSize="18sp"
                        android:textStyle="bold" />
                </LinearLayout>

            </FrameLayout>

        </LinearLayout>
    </LinearLayout>


4. Membuat File Java

Ada dua file java yang harus dibuat yaitu MainActivity (biasanya tersedia secara otomatis/tinggal di edit), dan GambarStatus. Isi kode java dengan kode di bawah ini.

  • MainActivity.java

    • package codingrakitan.blogspot.cardview;

    import android.content.res.Resources;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.FrameLayout;
    import android.widget.LinearLayout;
    import android.widget.TextView;

    import com.android.volley.Request;
    import com.android.volley.RequestQueue;
    import com.android.volley.Response;
    import com.android.volley.VolleyError;
    import com.android.volley.toolbox.StringRequest;
    import com.android.volley.toolbox.Volley;
    import com.androidnetworking.widget.ANImageView;

    import org.json.JSONArray;
    import org.json.JSONException;
    import org.json.JSONObject;

    import java.lang.ref.ReferenceQueue;


    public class MainActivity extends AppCompatActivity {

        private LayoutInflater inf;
        private LinearLayout konten;
        private String url="http://IP_ADDRESS_ANDA/card_view/";
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            inf = (LayoutInflater) getSystemService(this.LAYOUT_INFLATER_SERVICE);
            konten = findViewById(R.id.kontent);


            ambilData();
        }

        private void ambilData() {
            RequestQueue req = Volley.newRequestQueue(this);
            StringRequest stringRequest = new StringRequest(Request.Method.GET, url+"data.json", new Response.Listener<String>() {
                @Override
                public void onResponse(String response) {
                    Log.d("data :", "success");
                    try {
                        JSONObject obj = new JSONObject(response);
                        JSONArray ja = obj.getJSONArray("data");
                        buatIsiKonten(ja);
                    }catch (Exception e){
                        e.printStackTrace();
                    }
                }
            }, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Log.d("errot :", ""+error);
                }
            });
            req.add(stringRequest);
        }

        private void buatIsiKonten(JSONArray ja) {

            for (int i = 0; i<ja.length();i++){
                View v = inf.inflate(R.layout.card_view, null);
                try {
                    JSONObject jo = ja.getJSONObject(i);
                    isiCardView(v, i, jo);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                konten.addView(v);

            }
        }

        private void isiCardView(View v, int i, JSONObject jo) {
            TextView t_user = v.findViewById(R.id.nama);
            TextView t_jam = v.findViewById(R.id.jam);
            TextView t_status = v.findViewById(R.id.status);
            TextView t_like = v.findViewById(R.id.like);
            TextView t_komen = v.findViewById(R.id.komen);
            ANImageView gm_profile = v.findViewById(R.id.gambar_profile);

            try {
                t_user.setText(jo.getString("nama"));
                t_jam.setText(jo.getInt("jam")+" jam yang lalu");
                t_status.setText(jo.getString("status"));
                t_like.setText(jo.getInt("like")+" Like");
                t_komen.setText(jo.getInt("komen")+" Komentar");
                if (jo.getString("gambar_user")!="none"){
                    gm_profile.setImageUrl(url+"gambar/"+jo.getString("gambar_user"));
                }
                JSONArray gm = jo.getJSONArray("gambar_status");
                GambarStatus gambarStatus = new GambarStatus();
                gambarStatus.GambarStatus(this, inf, v);
                gambarStatus.buatGambarStatus(jo);

            } catch (JSONException e) {
                e.printStackTrace();
            }


        }
    }




  • GambarStatus.java

    • package codingrakitan.blogspot.cardview;

    import android.content.Context;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.FrameLayout;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.TextView;

    import com.androidnetworking.widget.ANImageView;

    import org.json.JSONArray;
    import org.json.JSONException;
    import org.json.JSONObject;

    import java.util.ArrayList;

    class GambarStatus {

        private Context context;
        private LayoutInflater inf;
        private View v;
        private LinearLayout ly_gambar;
        private String url="http://IP_ADDRESS_ANDA/card_view/gambar/";
        private ArrayList<String> gambar;

        public void GambarStatus(Context context, LayoutInflater inf, View v){
            this.context = context;
            this.inf = inf;
            this.v = v;
            ly_gambar = v.findViewById(R.id.ly_gambar);
        }

        public void buatGambarStatus(JSONObject gm) {
            Log.d("gmb", ""+gm);
            gambar = new ArrayList<String>();
            try {
                JSONArray ja = gm.getJSONArray("gambar_status");
                for (int i=0;i<ja.length();i++){
                    gambar.add(ja.get(i).toString());
                }
            } catch (JSONException e) {
                e.printStackTrace();
            }

            if (gambar.size()>0){
                switch (gambar.size()){
                    case 1:
                        buatSatu(gambar.get(0).toString());
                        break;
                    case 2:
                        buatDua(gambar.get(0).toString(), gambar.get(1).toString());
                        break;
                    case 3:
                        buatTiga(gambar.get(0).toString(), gambar.get(1).toString(), gambar.get(2).toString());
                        break;
                    case 4:
                        buatEmpat(gambar.get(0).toString(), gambar.get(1).toString(), gambar.get(2).toString(), gambar.get(3).toString(), false);
                        break;
                    default:
                        buatEmpat(gambar.get(0).toString(), gambar.get(1).toString(), gambar.get(2).toString(), gambar.get(3).toString(), true);
                        break;

                }


            }
        }




        private void buatSatu(String s) {
           ANImageView img = new ANImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT
            );
            img.setLayoutParams(params);
            img.setImageUrl(url+s);
            ly_gambar.addView(img);
        }
        private void buatDua(String s, String s2) {
           View ly = inf.inflate(R.layout.dua_gambar, null);
           ANImageView img = ly.findViewById(R.id.gd_satu);
            ANImageView img2 = ly.findViewById(R.id.gd_dua);
            img.setImageUrl(url+s);
            img2.setImageUrl(url+s2);
           ly_gambar.addView(ly);
        }
        private void buatTiga(String s1, String s2, String s3) {
            View ly = inf.inflate(R.layout.tiga_gambar, null);
            ANImageView img = ly.findViewById(R.id.eg_satu);
            ANImageView img2 = ly.findViewById(R.id.eg_dua);
            ANImageView img3 = ly.findViewById(R.id.eg_tiga);
            img.setImageUrl(url+s1);
            img2.setImageUrl(url+s2);
            img3.setImageUrl(url+s3);
            ly_gambar.addView(ly);
        }
        private void buatEmpat(String s1, String s2, String s3, String s4, boolean b) {
            View ly = inf.inflate(R.layout.empat_gambar, null);
            LinearLayout li = ly.findViewById(R.id.ly_lebih);
            TextView tx = ly.findViewById(R.id.tx_lebih);
            ANImageView img = ly.findViewById(R.id.gt_satu);
            ANImageView img2 = ly.findViewById(R.id.gt_dua);
            ANImageView img3 = ly.findViewById(R.id.gt_tiga);
            ANImageView img4 = ly.findViewById(R.id.gt_empat);
            img.setImageUrl(url+s1);
            img2.setImageUrl(url+s2);
            img3.setImageUrl(url+s3);
            img4.setImageUrl(url+s4);
            ly_gambar.addView(ly);
            if (b==false){
                li.setVisibility(View.GONE);
            }else{
                int si = gambar.size()-4;
                tx.setText(si+"+");
            }
        }
    }
Ganti kata "IP_ADDRESS_ANDA" pada bagian url="http://IP_ADDRESS_ANDA/card_view/" MainAtivity dan pada url="http://IP_ADDRESS_ANDA/card_view/gambar/" GambarStatus.

Jika IP Address anda adalah "192.168.0.1" maka ubah menjadi "url="http://192.168.0.1/card_view/" di file atau class MainActivity.java serta di file GambarStatus.java menjadi url="http://192.168.0.1/card_view/gambar/".

Untuk melihat IP address anda silahkan baca postingan Cara Melihat IP Address di CMD Windows

Serta Pastikan pada bagian paling atas yaitu package codingrakitan.blogspot.cardview; sama dengan nama package anda, jika tidak maka program akan error.

5. Edit Values Color

Silahkan lakukan pengeditan pada colors.xml dan isi dengan kode dibawah.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#002C85</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="abu_abu">#9197a3</color>
    <color name="background_utama">#dcdee3</color>
    <color name="transparan">#B3000000</color>
</resources>

6. Uji Coba dengan Emulator

Pada tahapan terakhir silahkan uji coba aplikasi menggunakan emulator atau debug via USB langsung ke Smarthphone. Disini saya menggunakan emulator nox untuk uji coba, dan hasilnya seperti ini.





Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak...
Posting Komentar
Baca selengkapnya

Cara Mengamankan Aplikasi Android dengan Proguard di Android Studio

Keamanan suatu aplikasi merupakan sebuah kebutuhan utama yang harus dipenuhi sebelum dapat dirilis ke public. Aplikasi dengan keamanan yang rendah akan mengundang banyak masalah dikemudian hari. Salah satu kelemahan aplikasi android yang dibangun menggunakan Android Studio adalah proses decompile atau bahasa kasarnya membongkar apk yang sudah jadi sangat mudah. Bahkan orang awam dalam pemrograman sekalipun dapat melakukannya dikarenakan adanya tools yang menyediakan fitur decompile ini. Salah satu tools yang biasa digunakan adalah jadx (Harap tidak menggunakannya untuk merugikan orang lain). Membuat aplikasi bebas dari proses decompile tidak bisa dihindari akan tetapi kita bisa melindungi kode hasil decompile agar tidak mudah dibaca oleh orang lain. Meskipun orang lain bisa membongkar aplikasi tersebut, mereka tidak akan mudah untuk melakukan modifikasi ataupun menemukan apa yang mereka cari. Alih alih menemukan apa yang dicari mereka akan merasa pusing dan membatalkan niatnya. Tetapi ...
Posting Komentar
Baca selengkapnya

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)   Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita. Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.  Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini. Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/ ). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi ( Curriculum Director di Hacktiv8 Indonesia ). Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka ( user interface) yang dibuat oleh Rich Harris . Namun menurut penulisn...
Posting Komentar
Baca selengkapnya