Sample Example Tutorial on how to show Facebook profile picture in LibGDX

By | January 10, 2016

In this article, we will simply look at how to download and show an image from a url in Libgdx game. We will use facebook id for any given user to show his/her profile image at runtime in LibGDX.

Given below is a method define to download any image from a given url:

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.utils.StreamUtils;
import com.marothiatechs.ZBHelpers.Constants;

public class TextureDownload {
	public static TextureRegion image;
	BitmapFont font;
	SpriteBatch batch;
        final String FBid=YOUR_FB_ID;
	public TextureDownload(SpriteBatch btch) {
		this.batch = btch;
		font = new BitmapFont();
	}

	public void downloadImage() {
		if (image == null)
			new Thread(new Runnable() {
				/**
				 * Downloads the content of the specified url to the array. The
				 * array has to be big enough.
				 */
				private int download(byte[] out, String url) {
					InputStream in = null;
					try {
						HttpURLConnection conn = null;
						conn = (HttpURLConnection) new URL(url)
								.openConnection();
						conn.setDoInput(true);
						conn.setDoOutput(false);
						conn.setUseCaches(true);
						conn.connect();
						in = conn.getInputStream();
						int readBytes = 0;
						while (true) {
							int length = in.read(out, readBytes, out.length
									- readBytes);
							if (length == -1)
								break;
							readBytes += length;
						}
						return readBytes;
					} catch (Exception ex) {
						return 0;
					} finally {
						StreamUtils.closeQuietly(in);
					}
				}

				@Override
				public void run() {
					byte[] bytes = new byte[200 * 1024]; // assuming the content
															// is
															// not bigger than
															// 200kb.
					int numBytes = download(bytes, "https://graph.facebook.com/" + FBid
				+ "/picture?type=square");
					if (numBytes != 0) {
						// load the pixmap, make it a power of two if necessary
						// (not
						// needed for GL ES 2.0!)
						Pixmap pixmap = new Pixmap(bytes, 0, numBytes);
						final int originalWidth = pixmap.getWidth();
						final int originalHeight = pixmap.getHeight();
						int width = MathUtils.nextPowerOfTwo(pixmap.getWidth());
						int height = MathUtils.nextPowerOfTwo(pixmap
								.getHeight());
						final Pixmap potPixmap = new Pixmap(width, height,
								pixmap.getFormat());
						potPixmap.drawPixmap(pixmap, 0, 0, 0, 0,
								pixmap.getWidth(), pixmap.getHeight());
						pixmap.dispose();
						Gdx.app.postRunnable(new Runnable() {
							@Override
							public void run() {
								image = new TextureRegion(
										new Texture(potPixmap), 0, 0,
										originalWidth, originalHeight);
							}
						});
					}
				}
			}).start();

	}

	public TextureRegion getTexture() {
		return image;
	}

	public void render() {

		if (image != null) {
			batch.begin();
			batch.draw(image, 100,100);
			batch.end();
		} else {
			batch.begin();
			font.draw(batch, "Downloading...", 100,100);
			batch.end();
		}
	}
}

– You can simply use the above class to draw profile picture in render method of your LibGDX game. Provide the SpriteBatch instance if there is one already used in your game, or else add batch= new SpriteBatch() in the constructor of the above class.

– Call the render method of the above class in the render method of the LibGDX game.

– Replace YOUR_FB_ID with the facebook id for the user fetched using Facebook SDK in your Android/IOS Source code.

Thanx for reading this article 🙂

1,336 total views, 1 views today

(Visited 505 times, 1 visits today)