jlengrand.github.io/_posts/2013-10-30-integrate-a-twitter-timeline-in-your-android-application.markdown

layout, status, published, title, author, author_login, author_email, author_url, wordpress_id, wordpress_url, date, categories, tags, comments

layout	status	published	title	author	author_login	author_email	author_url	wordpress_id	wordpress_url	date	categories	tags	comments
post	publish	true	Integrate a twitter timeline in your android application.	Julien Lengrand-Lambert	jlengrand	julien@lengrand.fr	http://www.lengrand.fr	899	http://www.lengrand.fr/?p=899	2013-10-30 18:10:55.000000000 +01:00	Uncategorized programming	android brestram java twitter timeline social

Hey all,

This week-end, I worked on integrating a social feature in BresTram. I needed a way to let the users know when the bibus servers have a problem, and also let users send messages to each others if needed.

Finally, I didn't want to spend too much time developing it. I have more pressing features to implement, and the social integration is more of a "test". I decided to go with Twitter. The message will generally be short (work on the rails, problems with the tram, ...), and everybody should be able to see them.

I started looking at the Streaming API, but then realized there was a much simpler way to do it : Simply integrate a web timeline into my app.

I started by creating a dedicated filter on the twitter account of BresTram.

This gives me two lines of code to integrate into the website of my choice :

{% highlight html %}

Tweets about "#BresTram"

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

{% endhighlight %}

Then, I simply created a new Activity in my Application, that contains a webview.

{% highlight java %} package fr.lengrand.brestram;

import fr.lengrand.brestram.activities.BaseActivity; import android.os.Bundle; import android.webkit.WebView;

public class TimeLineActivity extends BaseActivity { public static final String TAG = "TimeLineActivity";

private static final String baseURl = "https://twitter.com";

private static final String widgetInfo = "<a class=\"twitter-timeline\" href=\"https://twitter.com/search?q=%23BresTram\" data-widget-id=\"394415351972114432\">Tweets about \"#BresTram\"</a> " +
        "<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");</script>";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_timeline);

    load_background_color();

    WebView webView = (WebView) findViewById(R.id.timeline_webview);
    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setJavaScriptEnabled(true);

    webView.loadDataWithBaseURL(baseURl, widgetInfo, "text/html", "UTF-8", null);
}

/**
 * Needed because android:background does not work
 * for WebViews
 */
private void load_background_color() {
    WebView webView = (WebView) findViewById(R.id.timeline_webview);
    //webView.setBackgroundColor(getResources().getColor(R.color.twitter_dark));
    webView.setBackgroundColor(0); // transparent
}

}

{% endhighlight %}

The background color method is needed to avoid the ugly white background behind the timeline. I use a transparent background in this case. It is not possible to set the background directly in the xml layout for webviews; you will have to do it in the activity directly.

And here is the layout file :

{% highlight xml %}

<WebView
    android:id="@+id/timeline_webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

{% endhighlight %}

I used fill_parent because I wanted to give as much space as possible to the Webview.

The result is far from perfect, but it's not that bad for roughly 30 minutes of work :).

[caption id="attachment_900" align="aligncenter" width="480"] twitter timeline embedded into an android application[/caption]

On top of that, It directly allows my users to post tweets from the application (using the timeline), and will let everybody know about the BresTram twitter account. Hopefully, this will help me get some useful feedback.

Now, back to more complex features :). Oh, and if you leave near Brest, check out BresTram!

P.S: This is not exactly how the actual source code look like. I changed several things to highlight the essentials in this post.