Siapa yang gak kenal facebook? pasti pada tau... okey, pada tutorial kali ini bukan untuk membahas facebook, melainkan kita akan mencoba membuat Custom Listview Feed ala Facebook.
Disini saya menggunakan library Volley untuk memanggil / merequest http dan mendownload gambar. Pada libraby volley ini dilengkapi dengan mekanisme Image Cache, jadi kita tidak perlu khawatir dengan permintaan berbarengan dari http dengan permintaan download gambar.
Contoh Feed JSON
berikut ini adalah contoh json dimana terdapat array objek. Setiap objek terdapat informasi mengenai id, gambar profil, nama profil, timestamp, status pesan dan feed gambar.
Kalian bisa mengakses nya disini ( LINK )
{
"feed": [
{
"id": 1,
"name": "National Geographic Channel",
"image": "http://api.agility-studio.com/facebook_feed/img/cosmos.jpg",
"status": "\"Science is a beautiful and emotional human endeavor,\" says Brannon Braga, executive producer and director. \"And Cosmos is all about making science an experience.\"",
"profilePic": "http://api.agility-studio.com/facebook_feed/img/nat.jpg",
"timeStamp": "1403375851930",
"url": null
},
{
"id": 2,
"name": "TIME",
"image": "http://api.agility-studio.com/facebook_feed/img/time_best.jpg",
"status": "30 years of Cirque du Soleil's best photos",
"profilePic": "http://api.agility-studio.com/facebook_feed/img/time.png",
"timeStamp": "1403375851930",
"url": "http://ti.me/1qW8MLB"
}
]
}
Pada skenario kita kali ini, kita asumsikan bahwa json di generate melalui pembacaan database.
Download Librari Volley
Kalian bisa download librari Volley disini ( LINK )
Kita mulai dari membuat projek baru, disini saya menggunakan Android Studio.
Selanjutnya kita buka res -> values -> dimens.xml kemudian edit sehingga menjadi seperi berikut:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="feed_item_margin">10dp</dimen>
<dimen name="feed_item_padding_top_bottom">20dp</dimen>
<dimen name="feed_item_padding_left_right">15dp</dimen>
<dimen name="feed_item_profile_pic">50dp</dimen>
<dimen name="feed_item_profile_info_padd">10dp</dimen>
<dimen name="feed_item_profile_name">15dp</dimen>
<dimen name="feed_item_timestamp">13dp</dimen>
<dimen name="feed_item_status_pad_left_right">15dp</dimen>
<dimen name="feed_item_status_pad_top">13dp</dimen>
<dimen name="feed_item_corner_radius">3dp</dimen>
<dimen name="feed_item_border_width">1dp</dimen>
</resources>
Berikutnya adalah membuat file xml ( jika file xml colors.xml sudah ada, maka tidak perlu membuat file xml colors,xml ) dengan mana colors.xml pada folder res -> values dan tambahkan kode hingga menjadi :<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white">#ffffff</color>
<color name="feed_bg">#d3d6db</color>
<color name="feed_item_bg">#ffffff</color>
<color name="feed_item_border">#c2c3c8</color>
<color name="link">#0a80d1</color>
<color name="timestamp">#a0a3a7</color>
</resources>
Pada folder res -> drawable , buatlah file baru dengan nama bg_parent_rounded_corner.xml dan tempelkan kode dibawah ini:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<solid android:color="@color/feed_item_bg" >
</solid>
<!-- view border color and width -->
<stroke
android:width="@dimen/feed_item_border_width"
android:color="@color/feed_item_border" >
</stroke>
<!-- Here is the corner radius -->
<corners android:radius="@dimen/feed_item_corner_radius" >
</corners>
</shape>
Agar pengelompokan file terlihat rapi, maka buatlah 4 package dengan nama app, adapter, data, volley .
Kemudian import librari Volley.jar caranya : Klik Kanan pada app -> Open Module Settings, kemudian pada area pojok kiri atas terdapat tombol ( + ) , klik dan akan terbuka jendela baru, pilih Import JAR/AAR Packcage dan arahkan file ke Volley.jar yang telah kalian download. Tunggu hinggal Gradle Sync selesai kemudian klik OK.
Klik Kanan lagi pada app -> Open Module Settings,pada tab Depedencies tambahkan librari volly dengan cara klik tombol ( + ) pada pojok kanan atas, pilih Module Depedency kemudian pilih volley.
Buat sebuah class dengan nama LruBitmapCache.java di dalam root folder package volley, kemudian tempel kode hingga menjadi sperti berikut:
package infinitylogicstudio.facebookfeed.volley;
/**
* Created by JunkiesDevStudio on 13/09/2016.
*/
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;
import com.android.volley.toolbox.ImageLoader;
public class LruBitmapCache extends LruCache<String, Bitmap> implements ImageLoader.ImageCache {
public static int getDefaultLruCacheSize() {
final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
final int cacheSize = maxMemory / 8;
return cacheSize;
}
public LruBitmapCache() {
this(getDefaultLruCacheSize());
}
public LruBitmapCache(int sizeInKiloBytes) {
super(sizeInKiloBytes);
}
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getRowBytes() * value.getHeight() / 1024;
}
@Override
public Bitmap getBitmap(String url) {
return get(url);
}
@Override
public void putBitmap(String url, Bitmap bitmap) {
put(url, bitmap);
}
}
Kemudian buatlah class lagi bernama AppController.java pada root packacge app.edit hingga mnjadi seperti dibawah. Ini adlah singleton class yang mana inisialisasi secara global, semua objek yang berhubungan dengan volley kan diinisialisasi di class ini.
package infinitylogicstudio.facebookfeed.app;
/**
* Created by JunkiesDevStudio on 13/09/2016.
*/
import android.app.Application;
import android.text.TextUtils;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.Volley;
import infinitylogicstudio.facebookfeed.volley.LruBitmapCache;
public class AppController extends Application {
public static final String TAG = AppController.class.getSimpleName();
private RequestQueue mRequestQueue;
private ImageLoader mImageLoader;
LruBitmapCache mLruBitmapCache;
private static AppController mInstance;
@Override
public void onCreate() {
super.onCreate();
mInstance = this;
}
public static synchronized AppController getInstance() {
return mInstance;
}
public RequestQueue getRequestQueue() {
if (mRequestQueue == null) {
mRequestQueue = Volley.newRequestQueue(getApplicationContext());
}
return mRequestQueue;
}
public ImageLoader getImageLoader() {
getRequestQueue();
if (mImageLoader == null) {
getLruBitmapCache();
mImageLoader = new ImageLoader(this.mRequestQueue, mLruBitmapCache);
}
return this.mImageLoader;
}
public LruBitmapCache getLruBitmapCache() {
if (mLruBitmapCache == null)
mLruBitmapCache = new LruBitmapCache();
return this.mLruBitmapCache;
}
public <T> void addToRequestQueue(Request<T> req, String tag) {
req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
getRequestQueue().add(req);
}
public <T> void addToRequestQueue(Request<T> req) {
req.setTag(TAG);
getRequestQueue().add(req);
}
public void cancelPendingRequests(Object tag) {
if (mRequestQueue != null) {
mRequestQueue.cancelAll(tag);
}
}
}
Sekarang buka file AndroidManifest.xml dan tambahkan class AppController.java pada tag <application>. Coba tambahkan pula INTERNET permission pada aplikasi yang kia buat ini.<application
android:name="infinitylogicstudio.facebookfeed.app.AppController"> ....</application>
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="infinitylogicstudio.facebookfeed"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name="infinitylogicstudio.facebookfeed.app.AppController"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name="infinitylogicstudio.facebookfeed.MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Tantangan pada projek ini adalah menyesuaikan rasio gambar setelah di download. Sayangnya, Volley tidak menyediakan metode callback setelah NetworkImageView dimuat. Jadi pada projek ini kita mengakalinya dengan membuat kustom class ImageView dengan metode callback. Class ini akan secara otomatis menyesuaikan tinggi gambar untuk mencegah citra rasio tidak pas.
Pada root package, buatlah class dengan nama FeedImageView.java, kemudian tempelkan kode programnya.
Oh iya, karena lokasi FeedImageView ada pada package infinitylogicstudio.facebookfeed , dapat diakses di xml dengan cara:
<infinitylogicstudio.facebookfeed.FeedImageView
android:id="@+id/feedImage1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Full kode class FeedImageView.java :
package infinitylogicstudio.facebookfeed;
/**
* Created by JunkiesDevStudio on 13/09/2016.
*/
import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageLoader.ImageContainer;
import com.android.volley.toolbox.ImageLoader.ImageListener;
public class FeedImageView extends ImageView {
public interface ResponseObserver {
public void onError();
public void onSuccess();
}
private ResponseObserver mObserver;
public void setResponseObserver(ResponseObserver observer) {
mObserver = observer;
}
/**
* The URL of the network image to load
*/
private String mUrl;
/**
* Resource ID of the image to be used as a placeholder until the network
* image is loaded.
*/
private int mDefaultImageId;
/**
* Resource ID of the image to be used if the network response fails.
*/
private int mErrorImageId;
/**
* Local copy of the ImageLoader.
*/
private ImageLoader mImageLoader;
/**
* Current ImageContainer. (either in-flight or finished)
*/
private ImageContainer mImageContainer;
public FeedImageView(Context context) {
this(context, null);
}
public FeedImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FeedImageView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
/**
* Sets URL of the image that should be loaded into this view. Note that
* calling this will immediately either set the cached image (if available)
* or the default image specified by
* {@link VolleyImageView#setDefaultImageResId(int)} on the view.
*
* NOTE: If applicable, {@link VolleyImageView#setDefaultImageResId(int)}
* and {@link VolleyImageView#setErrorImageResId(int)} should be called
* prior to calling this function.
*
* @param url
* The URL that should be loaded into this ImageView.
* @param imageLoader
* ImageLoader that will be used to make the request.
*/
public void setImageUrl(String url, ImageLoader imageLoader) {
mUrl = url;
mImageLoader = imageLoader;
// The URL has potentially changed. See if we need to load it.
loadImageIfNecessary(false);
}
/**
* Sets the default image resource ID to be used for this view until the
* attempt to load it completes.
*/
public void setDefaultImageResId(int defaultImage) {
mDefaultImageId = defaultImage;
}
/**
* Sets the error image resource ID to be used for this view in the event
* that the image requested fails to load.
*/
public void setErrorImageResId(int errorImage) {
mErrorImageId = errorImage;
}
/**
* Loads the image for the view if it isn't already loaded.
*
* @param isInLayoutPass
* True if this was invoked from a layout pass, false otherwise.
*/
private void loadImageIfNecessary(final boolean isInLayoutPass) {
final int width = getWidth();
int height = getHeight();
boolean isFullyWrapContent = getLayoutParams() != null
&& getLayoutParams().height == LayoutParams.WRAP_CONTENT
&& getLayoutParams().width == LayoutParams.WRAP_CONTENT;
// if the view's bounds aren't known yet, and this is not a
// wrap-content/wrap-content
// view, hold off on loading the image.
if (width == 0 && height == 0 && !isFullyWrapContent) {
return;
}
// if the URL to be loaded in this view is empty, cancel any old
// requests and clear the
// currently loaded image.
if (TextUtils.isEmpty(mUrl)) {
if (mImageContainer != null) {
mImageContainer.cancelRequest();
mImageContainer = null;
}
setDefaultImageOrNull();
return;
}
// if there was an old request in this view, check if it needs to be
// canceled.
if (mImageContainer != null && mImageContainer.getRequestUrl() != null) {
if (mImageContainer.getRequestUrl().equals(mUrl)) {
// if the request is from the same URL, return.
return;
} else {
// if there is a pre-existing request, cancel it if it's
// fetching a different URL.
mImageContainer.cancelRequest();
setDefaultImageOrNull();
}
}
// The pre-existing content of this view didn't match the current URL.
// Load the new image
// from the network.
ImageContainer newContainer = mImageLoader.get(mUrl,
new ImageListener() {
@Override
public void onErrorResponse(VolleyError error) {
if (mErrorImageId != 0) {
setImageResource(mErrorImageId);
}
if (mObserver != null) {
mObserver.onError();
}
}
@Override
public void onResponse(final ImageContainer response,
boolean isImmediate) {
// If this was an immediate response that was delivered
// inside of a layout
// pass do not set the image immediately as it will
// trigger a requestLayout
// inside of a layout. Instead, defer setting the image
// by posting back to
// the main thread.
if (isImmediate && isInLayoutPass) {
post(new Runnable() {
@Override
public void run() {
onResponse(response, false);
}
});
return;
}
int bWidth = 0, bHeight = 0;
if (response.getBitmap() != null) {
setImageBitmap(response.getBitmap());
bWidth = response.getBitmap().getWidth();
bHeight = response.getBitmap().getHeight();
adjustImageAspect(bWidth, bHeight);
} else if (mDefaultImageId != 0) {
setImageResource(mDefaultImageId);
}
if (mObserver != null) {
mObserver.onSuccess();
}
}
});
// update the ImageContainer to be the new bitmap container.
mImageContainer = newContainer;
}
private void setDefaultImageOrNull() {
if (mDefaultImageId != 0) {
setImageResource(mDefaultImageId);
} else {
setImageBitmap(null);
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
super.onLayout(changed, left, top, right, bottom);
loadImageIfNecessary(true);
}
@Override
protected void onDetachedFromWindow() {
if (mImageContainer != null) {
// If the view was bound to an image request, cancel it and clear
// out the image from the view.
mImageContainer.cancelRequest();
setImageBitmap(null);
// also clear out the container so we can reload the image if
// necessary.
mImageContainer = null;
}
super.onDetachedFromWindow();
}
@Override
protected void drawableStateChanged() {
super.drawableStateChanged();
invalidate();
}
/*
* Adjusting imageview height
* */
private void adjustImageAspect(int bWidth, int bHeight) {
LinearLayout.LayoutParams params = (LayoutParams) getLayoutParams();
if (bWidth == 0 || bHeight == 0)
return;
int swidth = getWidth();
int new_height = 0;
new_height = swidth * bHeight / bWidth;
params.width = swidth;
params.height = new_height;
setLayoutParams(params);
}
}
Kemudian buka layout main activity ( activity_main.xml ) dan tambahkan elemen listview.<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="@null" />
</LinearLayout>
Buat layout lainnya dengan nama feed_item.xml pada folder res -> layout. Layout ini mewakili tampilan individu item.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/feed_bg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="@dimen/feed_item_margin"
android:layout_marginRight="@dimen/feed_item_margin"
android:layout_marginTop="@dimen/feed_item_margin"
android:background="@drawable/bg_parent_rounded_corner"
android:orientation="vertical"
android:paddingBottom="@dimen/feed_item_padding_top_bottom"
android:paddingTop="@dimen/feed_item_padding_top_bottom" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="@dimen/feed_item_padding_left_right"
android:paddingRight="@dimen/feed_item_padding_left_right" >
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/profilePic"
android:layout_width="@dimen/feed_item_profile_pic"
android:layout_height="@dimen/feed_item_profile_pic"
android:scaleType="fitCenter" >
</com.android.volley.toolbox.NetworkImageView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="@dimen/feed_item_profile_info_padd" >
<TextView
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="@dimen/feed_item_profile_name"
android:textStyle="bold" />
<TextView
android:id="@+id/timestamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="@color/timestamp"
android:textSize="@dimen/feed_item_timestamp" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/txtStatusMsg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="@dimen/feed_item_status_pad_left_right"
android:paddingRight="@dimen/feed_item_status_pad_left_right"
android:paddingTop="@dimen/feed_item_status_pad_top" />
<TextView
android:id="@+id/txtUrl"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:linksClickable="true"
android:paddingBottom="10dp"
android:paddingLeft="@dimen/feed_item_status_pad_left_right"
android:paddingRight="@dimen/feed_item_status_pad_left_right"
android:textColorLink="@color/link" />
<infinitylogicstudio.facebookfeed.FeedImageView
android:id="@+id/feedImage1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:scaleType="fitXY"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
Pada package folder data, buat class dengan nama FeedItem.java. Ini adalah class POJO digunakan untuk membuat beberapa objek item feed dengan memparsing json. Pada feed item akan menampilkan informasi-informasi.
package infinitylogicstudio.facebookfeed.data;
/**
* Created by JunkiesDevStudio on 13/09/2016.
*/
public class FeedItem {
private int id;
private String name, status, image, profilePic, timeStamp, url;
public FeedItem() {
}
public FeedItem(int id, String name, String image, String status,
String profilePic, String timeStamp, String url) {
super();
this.id = id;
this.name = name;
this.image = image;
this.status = status;
this.profilePic = profilePic;
this.timeStamp = timeStamp;
this.url = url;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImge() {
return image;
}
public void setImge(String image) {
this.image = image;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getProfilePic() {
return profilePic;
}
public void setProfilePic(String profilePic) {
this.profilePic = profilePic;
}
public String getTimeStamp() {
return timeStamp;
}
public void setTimeStamp(String timeStamp) {
this.timeStamp = timeStamp;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
Pada package folder adapter, buat juga class dengan nama FeedListAdapter.java. Ini adalah kustom adapter untuk feed list view. Class adapter ini mengurusi hal-hal berikut:
1. Menampilkan feed data seperti nama, gambar profil, status pesan, feed gambar, dan timestamp.
2. Mengkonversi timestamp ke dalam format x menit/jam/hari.
3. URL dapat diklik dengan menggunakan metode url.setMovementMethod(LinkMovementMethod.getInstance())
package infinitylogicstudio.facebookfeed.adapter;
/**
* Created by JunkiesDevStudio on 13/09/2016.
*/
import android.app.Activity;
import android.content.Context;
import android.text.Html;
import android.text.TextUtils;
import android.text.format.DateUtils;
import android.text.method.LinkMovementMethod;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.NetworkImageView;
import java.util.List;
import infinitylogicstudio.facebookfeed.FeedImageView;
import infinitylogicstudio.facebookfeed.R;
import infinitylogicstudio.facebookfeed.app.AppController;
import infinitylogicstudio.facebookfeed.data.FeedItem;
public class FeedListAdapter extends BaseAdapter {
private Activity activity;
private LayoutInflater inflater;
private List<FeedItem> feedItems;
ImageLoader imageLoader = AppController.getInstance().getImageLoader();
public FeedListAdapter(Activity activity, List<FeedItem> feedItems) {
this.activity = activity;
this.feedItems = feedItems;
}
@Override
public int getCount() {
return feedItems.size();
}
@Override
public Object getItem(int location) {
return feedItems.get(location);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (inflater == null)
inflater = (LayoutInflater) activity
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null)
convertView = inflater.inflate(R.layout.feed_item, null);
if (imageLoader == null)
imageLoader = AppController.getInstance().getImageLoader();
TextView name = (TextView) convertView.findViewById(R.id.name);
TextView timestamp = (TextView) convertView
.findViewById(R.id.timestamp);
TextView statusMsg = (TextView) convertView
.findViewById(R.id.txtStatusMsg);
TextView url = (TextView) convertView.findViewById(R.id.txtUrl);
NetworkImageView profilePic = (NetworkImageView) convertView
.findViewById(R.id.profilePic);
FeedImageView feedImageView = (FeedImageView) convertView
.findViewById(R.id.feedImage1);
FeedItem item = feedItems.get(position);
name.setText(item.getName());
// Converting timestamp into x ago format
CharSequence timeAgo = DateUtils.getRelativeTimeSpanString(
Long.parseLong(item.getTimeStamp()),
System.currentTimeMillis(), DateUtils.SECOND_IN_MILLIS);
timestamp.setText(timeAgo);
// Chcek for empty status message
if (!TextUtils.isEmpty(item.getStatus())) {
statusMsg.setText(item.getStatus());
statusMsg.setVisibility(View.VISIBLE);
} else {
// status is empty, remove from view
statusMsg.setVisibility(View.GONE);
}
// Checking for null feed url
if (item.getUrl() != null) {
url.setText(Html.fromHtml("<a href=\"" + item.getUrl() + "\">"
+ item.getUrl() + "</a> "));
// Making url clickable
url.setMovementMethod(LinkMovementMethod.getInstance());
url.setVisibility(View.VISIBLE);
} else {
// url is null, remove from the view
url.setVisibility(View.GONE);
}
// user profile pic
profilePic.setImageUrl(item.getProfilePic(), imageLoader);
// Feed image
if (item.getImge() != null) {
feedImageView.setImageUrl(item.getImge(), imageLoader);
feedImageView.setVisibility(View.VISIBLE);
feedImageView
.setResponseObserver(new FeedImageView.ResponseObserver() {
@Override
public void onError() {
}
@Override
public void onSuccess() {
}
});
} else {
feedImageView.setVisibility(View.GONE);
}
return convertView;
}
}
Buka class MainActivity.java dan tambahkan beberapa kode. Pada class ini menggunakan Volley jsonObjectRequest untuk mengambil json, kemudian di parsing berdasarkan array objek.
package infinitylogicstudio.facebookfeed;
import android.annotation.SuppressLint;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import com.android.volley.Cache;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.VolleyLog;
import com.android.volley.toolbox.JsonObjectRequest;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;
import infinitylogicstudio.facebookfeed.adapter.FeedListAdapter;
import infinitylogicstudio.facebookfeed.app.AppController;
import infinitylogicstudio.facebookfeed.data.FeedItem;
public class MainActivity extends AppCompatActivity {
private static final String TAG = MainActivity.class.getSimpleName();
private ListView listView;
private FeedListAdapter listAdapter;
private List<FeedItem> feedItems;
private String URL_FEED = "http://api.agility-studio.com/facebook_feed/feed.json";
@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = (ListView) findViewById(R.id.list);
feedItems = new ArrayList<FeedItem>();
listAdapter = new FeedListAdapter(this, feedItems);
listView.setAdapter(listAdapter);
Cache cache = AppController.getInstance().getRequestQueue().getCache();
Cache.Entry entry = cache.get(URL_FEED);
if (entry != null) {
// fetch the data from cache
try {
String data = new String(entry.data, "UTF-8");
try {
parseJsonFeed(new JSONObject(data));
} catch (JSONException e) {
e.printStackTrace();
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
} else {
// making fresh volley request and getting json
JsonObjectRequest jsonReq = new JsonObjectRequest(Request.Method.GET,
URL_FEED, null, new Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject response) {
VolleyLog.d(TAG, "Response: " + response.toString());
if (response != null) {
parseJsonFeed(response);
}
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
VolleyLog.d(TAG, "Error: " + error.getMessage());
}
});
// Adding request to volley request queue
AppController.getInstance().addToRequestQueue(jsonReq);
}
}
private void parseJsonFeed(JSONObject response) {
try {
JSONArray feedArray = response.getJSONArray("feed");
for (int i = 0; i < feedArray.length(); i++) {
JSONObject feedObj = (JSONObject) feedArray.get(i);
FeedItem item = new FeedItem();
item.setId(feedObj.getInt("id"));
item.setName(feedObj.getString("name"));
// Image might be null sometimes
String image = feedObj.isNull("image") ? null : feedObj
.getString("image");
item.setImge(image);
item.setStatus(feedObj.getString("status"));
item.setProfilePic(feedObj.getString("profilePic"));
item.setTimeStamp(feedObj.getString("timeStamp"));
// url might be null sometimes
String feedUrl = feedObj.isNull("url") ? null : feedObj
.getString("url");
item.setUrl(feedUrl);
feedItems.add(item);
}
// notify data changes to list adapater
listAdapter.notifyDataSetChanged();
} catch (JSONException e) {
e.printStackTrace();
}
}
}
Kemudian build dan jalankan, pastikan device kalian terkoneksi dengan jaringan internet.
0 komentar:
Posting Komentar