{"id":833,"date":"2018-12-24T06:17:16","date_gmt":"2018-12-23T23:17:16","guid":{"rendered":"https:\/\/luckytruedev.com\/learning\/?p=833"},"modified":"2019-09-21T22:23:40","modified_gmt":"2019-09-21T15:23:40","slug":"pengenalan-android-advanced-view-card-view","status":"publish","type":"post","link":"https:\/\/luckytruedev.com\/learning\/pengenalan-android-advanced-view-card-view\/","title":{"rendered":"Pengenalan Android Advanced View Card View"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/1_fql-5kHfzlkQnbUYgh7X4A-1024x1024.png\" alt=\"\" class=\"wp-image-834\" width=\"327\" height=\"327\"\/><figcaption>Android Cardview (Sumber Gambar Google Images)<\/figcaption><\/figure><\/div>\n\n\n\n<p>Ini adalah widget baru untuk Android, yang bisa digunakan untuk menampilkan semacam kartu layout di android.<\/p>\n\n\n<div id=\"lucky-2963375510\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"5317815257\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n\n\n<p><br><br>Dalam tutorial ini kita akan menggunakan RecyclerView untuk menampilkan daftar Card Views. <br><br>buat layout baru dengan nama &#8220;card_view_row&#8221; (card_view_row.xml).<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code brush: plain; notranslate\">&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n              xmlns:card_view=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n              android:layout_width=\"match_parent\"\n              android:layout_height=\"wrap_content\"\n              android:orientation=\"vertical\">\n \n    &lt;android.support.v7.widget.CardView\n        android:id=\"@+id\/card_view\"\n        android:layout_width=\"fill_parent\"\n        android:layout_height=\"100dp\"\n        android:layout_gravity=\"center\"\n        android:layout_margin=\"5dp\"\n        card_view:cardCornerRadius=\"2dp\"\n        card_view:contentPadding=\"10dp\">\n \n        &lt;RelativeLayout\n            android:layout_width=\"fill_parent\"\n            android:layout_height=\"fill_parent\">\n \n            &lt;TextView\n                android:id=\"@+id\/textView\"\n                android:layout_width=\"wrap_content\"\n                android:layout_height=\"wrap_content\"\n                android:layout_alignParentTop=\"true\"\n                android:textStyle=\"bold\"\/>\n \n            &lt;TextView\n                android:id=\"@+id\/textView2\"\n                android:layout_width=\"wrap_content\"\n                android:layout_height=\"wrap_content\"\n                android:layout_below=\"@+id\/textView\"\n                android:layout_marginTop=\"10dp\"\/>\n        &lt;\/RelativeLayout>\n    &lt;\/android.support.v7.widget.CardView>\n\n&lt;\/LinearLayout><\/pre>\n\n\n\n<p>Sebelum memulai, jangan lupa sertakan dependensi ini di aplikasi Anda secara bertahap.  Masukan dalam Build.gradle kalian.<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code brush: plain; notranslate\">dependencies {\n\u00a0\u00a0\u00a0\u00a0compile 'com.android.support:appcompat-v7:27.0.1'\n\u00a0\u00a0\u00a0\u00a0compile 'com.android.support:cardview-v7:27.0.1'\n\u00a0\u00a0\u00a0\u00a0compile 'com.android.support:recyclerview-v7:27.0.1'\n}<\/pre>\n\n\n\n<p>Langkah Selanjutnya: lihatlah layout activity, yang menunjukkan RecyclerView : <br><br>Cukup tambahkan RecyclerView di Layout Activity CardView Anda. buat layout bernama &#8220;activity_card_view&#8221; (activity_card_view.xml).<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code brush: plain; notranslate\">&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n                xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"match_parent\"\n                tools:context=\".CardViewActivity\">\n\n    &lt;android.support.v7.widget.RecyclerView\n        android:id=\"@+id\/my_recycler_view\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:scrollbars=\"vertical\"\/>\n\n&lt;\/RelativeLayout><\/pre>\n\n\n\n<p> <\/p>\n\n\n\n<p>Dalam contoh CardView Android ini, kita akan menggunakan objek ini untuk memasok data ke adaptor :<br><br>Buat class baru yang disebut : \u201cDataObject\u201d (DataObject.java)<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code brush: plain; notranslate\">public class DataObject {\n\u00a0\u00a0\u00a0\u00a0private String mText1;\n\u00a0\u00a0\u00a0\u00a0private String mText2;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0DataObject (String text1, String text2){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mText1 = text1;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mText2 = text2;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public String getmText1() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return mText1;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public void setmText1(String mText1) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.mText1 = mText1;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public String getmText2() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return mText2;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public void setmText2(String mText2) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.mText2 = mText2;\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n<div id=\"lucky-170668632\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"3760179245\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n\n\n<p>Sekarang di Activity CardView Anda, gunakan kartu Anda, buat class java baru bernama &#8220;CardViewActivity&#8221; (CardViewActivity.java).<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code brush: plain; notranslate\">public class CardViewActivity extends AppCompatActivity {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0private RecyclerView mRecyclerView;\n\u00a0\u00a0\u00a0\u00a0private RecyclerView.Adapter mAdapter;\n\u00a0\u00a0\u00a0\u00a0private RecyclerView.LayoutManager mLayoutManager;\n\u00a0\u00a0\u00a0\u00a0private static String LOG_TAG = \"CardViewActivity\";\n\u00a0\n\u00a0\u00a0\u00a0\u00a0@Override\n\u00a0\u00a0\u00a0\u00a0protected void onCreate(Bundle savedInstanceState) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0super.onCreate(savedInstanceState);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setContentView(R.layout.activity_card_view);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mRecyclerView.setHasFixedSize(true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mLayoutManager = new LinearLayoutManager(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mRecyclerView.setLayoutManager(mLayoutManager);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mAdapter = new MyRecyclerViewAdapter(getDataSet());\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mRecyclerView.setAdapter(mAdapter);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\n\u00a0\u00a0\u00a0\u00a0@Override\n\u00a0\u00a0\u00a0\u00a0protected void onResume() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0super.onResume();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0((MyRecyclerViewAdapter) mAdapter).setOnItemClickListener(new \tMyRecyclerViewAdapter\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.MyClickListener() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@Override\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public void onItemClick(int position, View v) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Log.i(LOG_TAG, \" Clicked on Item \" + position);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0private ArrayList&lt;DataObject> getDataSet() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ArrayList results = new ArrayList&lt;DataObject>();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (int index = 0; index &lt; 20; index++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0DataObject obj = new DataObject(\"Some Primary Text \" + index,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"Secondary \" + index);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0results.add(index, obj);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return results;\u00a0\u00a0\u00a0\u00a0}}<\/pre>\n\n\n\n<p>Buat sebuah Adapter: <br><br>Dengan membuat class <strong>MyRecyclerViewAdapter<\/strong> baru (MyRecyclerViewAdapter.java).<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code brush: plain; notranslate\">public class MyRecyclerViewAdapter extends RecyclerView\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.Adapter&lt;MyRecyclerViewAdapter\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.DataObjectHolder> {\n\u00a0\u00a0\u00a0\u00a0private static String LOG_TAG = \"MyRecyclerViewAdapter\";\n\u00a0\u00a0\u00a0\u00a0private ArrayList&lt;DataObject> mDataset;\n\u00a0\u00a0\u00a0\u00a0private static MyClickListener myClickListener;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public static class DataObjectHolder extends RecyclerView.ViewHolder\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0implements View\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.OnClickListener {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0TextView label;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0TextView dateTime;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public DataObjectHolder(View itemView) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0super(itemView);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label = (TextView) itemView.findViewById(R.id.textView);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dateTime = (TextView) itemView.findViewById(R.id.textView2);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Log.i(LOG_TAG, \"Adding Listener\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemView.setOnClickListener(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@Override\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public void onClick(View v) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0myClickListener.onItemClick(getAdapterPosition(), v);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public void setOnItemClickListener(MyClickListener myClickListener) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.myClickListener = myClickListener;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public MyRecyclerViewAdapter(ArrayList&lt;DataObject> myDataset) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mDataset = myDataset;\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0@Override\n\u00a0\u00a0\u00a0\u00a0public DataObjectHolder onCreateViewHolder(ViewGroup parent,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 int viewType) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0View view = LayoutInflater.from(parent.getContext())\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.inflate(R.layout.card_view_row, parent, false);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0DataObjectHolder dataObjectHolder = new DataObjectHolder(view);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return dataObjectHolder;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0@Override\n\u00a0\u00a0\u00a0\u00a0public void onBindViewHolder(DataObjectHolder holder, int position) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0holder.label.setText(mDataset.get(position).getmText1());\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0holder.dateTime.setText(mDataset.get(position).getmText2());\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public void addItem(DataObject dataObj, int index) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mDataset.add(index, dataObj);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0notifyItemInserted(index);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public void deleteItem(int index) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mDataset.remove(index);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0notifyItemRemoved(index);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0@Override\n\u00a0\u00a0\u00a0\u00a0public int getItemCount() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return mDataset.size();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public interface MyClickListener {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public void onItemClick(int position, View v);\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre>\n\n\n\n<p> Sumber : Master Android (App)<\/p>\n<div id=\"lucky-3561599945\" class=\"lucky-after-content lucky-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"5317815257\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Ini adalah widget baru untuk Android, yang bisa digunakan untuk menampilkan semacam kartu layout di android. Dalam tutorial ini kita akan menggunakan RecyclerView untuk menampilkan daftar Card Views. buat layout baru dengan nama &#8220;card_view_row&#8221; (card_view_row.xml). Sebelum memulai, jangan lupa sertakan dependensi ini di aplikasi Anda secara bertahap. Masukan dalam Build.gradle kalian. Langkah Selanjutnya: lihatlah layout [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":834,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ltdv-android-tutor"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/comments?post=833"}],"version-history":[{"count":1,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/833\/revisions"}],"predecessor-version":[{"id":2293,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/833\/revisions\/2293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/media\/834"}],"wp:attachment":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/media?parent=833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/categories?post=833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/tags?post=833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}