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

Cara Mengatasi Blank Hitam Pada Photoshop

Saat ini mungkin anda sedang mengalami hal yang pernah saya alami, dimana ketika mengedit gambar di Photoshop tiba-tiba screen layer project berubah menjadi hitam. Apalagi pas menambahkan atau mengedit tulisan, blank ini kerap kali muncul. Kurang lebih akan tampak seperti gambar berikut. Teman-teman jangan khawatir karena saya telah menemukan solusinya dan berhasil saya terapkan. Berikut Cara Mengatasi Blank Hitam Pada Photoshop. 1. Masuk ke menu preferences dengan menekan menu Edit -> Preferences -> Performance . 2. Pada layar Preferences klik tombol Advanced Settings 3. Pada layar Advanced Graphics Processor Settings pada pilihan Drawing Mode silahkan ganti menjadi basic kemudian klik Ok , anda akan kembali ke layar Preferences silahkan klik lagi OK . 4. Selanjutnya tutup Photoshop anda dengan klik menu File -> exit . 5. Terakhir buka kembali Photoshop dan lihat hasilnya.
Posting Komentar
Baca selengkapnya

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

Mengenal Sejarah JavaScript

Para programer berbasis web tentunya sangat ingin mengetehui lebih dalam tentang JavaScript. Hal ini tidak lepas dari fitur yang disediakan oleh JavaScript yang memudahkan dalam mengontrol, memanipulasi sebuah website. Selain itu bahasa pemrograman ini juga digunakan di hampir 90% web diseluruh dunia. Sejarah Bahasa Pemrograman JavaScript JavaScript merupakan salah satu bahasa pemrograman berbasis website yang dikembangkan oleh Netscape, sebuah perusahaan telekomunikasi yang juga mengembangkan browser Netscape Navigator. JavaScript sendiri mulai dibuat pada tahun 1995 yang mana ditangani oleh programer Netscape bernama Brendan Eich. Pada awal kemunculannya bahasa pemrograman ini bernama LiveScript. Nama ini kemudian dirubah menjadi JavaScript dikarenakan pada saat itu Java yang dirilis oleh Sun Microsystem (sekarang Oracle)sedang menjadi sorotan. Bisa dikatakan bahwa tujuan penamaan JavaScript tidak lain untuk menarik perhatian para programan pada waktu itu, jadi JavaScript tidak ada...
Posting Komentar
Baca selengkapnya