Show Tweets

The TweetUi Kit provides easy to use views to render Tweets in your app. Tweets can be added dynamically by your controller code or via inflating an XML layout.

Features:

• Renders the following Tweet variants:
• Standard Tweet view with photo forward.
• Compact Tweet view with cropped photo, for use in list displays.
• Tap Tweet view to open Tweet permalink using default url intent.
• Share Button on TweetViews
• Adapters to simplify displaying lists of Tweets.

Note

Tweets can be rendered using user authentication or guest authentication

Set up Kit

Note

This section may be skipped if you initialized with the Twitter Kit

Add the TweetUi kit to your build.gradle dependencies, along with the TwitterCore kit dependency.

dependencies {
    compile('com.twitter.sdk.android:tweet-ui:1.0.7@aar') {
        transitive = true;
    }
}

Be sure the TweetUi kit and TwitterCore kit are included in your application’s Fabric.with() call.

import io.fabric.sdk.android.Fabric;
import com.twitter.sdk.android.core.Twitter;
import com.twitter.sdk.android.core.TwitterAuthConfig;
import com.twitter.sdk.android.tweetui.TweetUi;
...

@Override
public void onCreate() {
    super.onCreate();
    TwitterAuthConfig authConfig =  
            new TwitterAuthConfig("consumerKey", 
                                                "consumerSecret");
    Fabric.with(this, new TwitterCore(authConfig), 
                                                    new TweetUi());
}

Tweet Views

The TweetUi kit provides the TweetView and CompactTweetView views for rendering Tweets. The view constructors take a context, the Tweet to be rendered, and an optional style.

Tweets can be requested through the TwitterCore Tweet API with a valid session (e.g. from a user login) or without a token through TweetUi’s TweetUtils. Here is an example using TweetUtils to load Tweets and construct Tweet views in the success callback.

Single Tweet

// EmbeddedTweetsActivity
import com.twitter.sdk.android.core.models.Tweet;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.tweetui.LoadCallback;
import com.twitter.sdk.android.tweetui.TweetUtils;
import com.twitter.sdk.android.tweetui.TweetView;
...

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_embedded_tweets);

    final LinearLayout myLayout
            = (LinearLayout) findViewById(R.id.my_tweet_layout);

    final long tweetId = 510908133917487104L;
    TweetUtils.loadTweet(tweetId, new LoadCallback<Tweet>() {
        @Override
        public void success(Tweet tweet) {
            myLayout.addView(new TweetView(
                    EmbeddedTweetsActivity.this, tweet));
        }

        @Override
        public void failure(TwitterException exception) {
            // Toast.makeText(...).show();
        }
    });
}

TweetView with a photo.

Multiple Tweets

// EmbeddedTweetsActivity
import com.twitter.sdk.android.core.models.Tweet;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.tweetui.LoadCallback;
import com.twitter.sdk.android.tweetui.TweetUtils;
import com.twitter.sdk.android.tweetui.CompactTweetView;
...

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_embedded_tweets);

    final LinearLayout myLayout
            = (LinearLayout) findViewById(R.id.my_tweet_layout);

    final List<Long> tweetIds = 
                Arrays.asList(510908133917487104L, 20L);
    TweetUtils.loadTweets(tweetIds, new LoadCallback<List<Tweet>>() {
        @Override
        public void success(List<Tweet> tweets) {
            for (Tweet tweet : tweets) {
                myLayout.addView(
                        new CompactTweetView(
                                EmbeddedTweetsActivity.this, 
                                tweet));
            }
        }

        @Override
        public void failure(TwitterException exception) {
            // Toast.makeText(...).show();
        }
    });
}

With a valid session, the API StatusesService can be used to load Tweets. TweetViews and CompactTweetViews can be constructed and added in the API callback success.

XML

The TweetView and CompactTweetView can be inflated from an XML layout as well. For this usage, the tw__tweet_id attribute must specify the Tweet id and the Tweet will be loaded and rendered upon inflation.

<!--my_tweet_activity.xml-->

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:twittersdk="http://schemas.android.com/apk/res-auto">

    <com.twitter.sdk.android.tweetui.TweetView
        android:id="@+id/bike_tweet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        twittersdk:tw__tweet_id="510908133917487104"/>

</FrameLayout>

Note

You must use the layout parameters android:layout_width="match_parent" and layout_height="wrap_content".

Tweet List Adapters

To place Tweets in a ListView or similar ViewGroup, the TweetViewAdapter or TweetViewFetchAdapter are recommended. The TweetViewAdapter extends Android’s BaseAdapter by providing a setTweets method to update the Tweet collection. The TweetViewFetchAdapter extends this further to provide a setTweetIds method which loads Tweets by id into the underlying collection and takes an optional callback.

By default, the adapters provide CompactTweetView views which are suitable for ListViews.

Here is an example of a ListActivity of Tweet views.

import com.twitter.sdk.android.core.models.Tweet;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.tweetui.LoadCallback;
import com.twitter.sdk.android.tweetui.CompactTweetView;
import com.twitter.sdk.android.tweetui.TweetViewFetchAdapter;
...

public class TweetListActivity extends ListActivity {

    List<Long> tweetIds = Arrays.asList(503435417459249153L, 
                                                                      510908133917487104L, 
                                                                      473514864153870337L, 
                                                                     477788140900347904L);
    final TweetViewFetchAdapter adapter =
            new TweetViewFetchAdapter<CompactTweetView>(
                                            TweetListActivity.this);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tweet_list);
        setListAdapter(adapter);
        adapter.setTweetIds(tweetIds, 
                                new LoadCallback<List<Tweet>>() {
            @Override
            public void success(List<Tweet> tweets) {
                // my custom actions
            }

            @Override
            public void failure(TwitterException exception) {
                // Toast.makeText(...).show();
            }
        });
    }
}

and a corresponding tweet_list.xml layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView android:id="@id/android:empty"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center_horizontal|center_vertical"
              android:text="@string/empty"/>

    <ListView android:id="@id/android:list"
              android:layout_width="match_parent"
              android:layout_height="0dp"
              android:layout_weight="1"
              android:drawSelectorOnTop="false"/>
</LinearLayout>

A ListView of CompactTweetViews

Styling

The TweetUi kit provides two Android styles tw__TweetLightStyle and tw__TweetDarkStyle. The light style is used by default.

The desired style may be specified in the view’s constructor.

// EmbeddedTweetActivity.java
import com.twitter.sdk.android.tweetui.TweetView;
...

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

    final LinearLayout myLayout
            = (LinearLayout) findViewById(R.id.my_tweet_layout);

    final long tweetId = 510908133917487104L;
    TweetUtils.loadTweet(tweetId, new LoadCallback<Tweet>() {
        @Override
        public void success(Tweet tweet) {
            myLayout.addView(new TweetView(EmbeddedTweetsActivity.this, 
                                                                       tweet, 
                                                                       R.style.tw__TweetDarkStyle));
        }

        @Override
        public void failure(TwitterException exception) {
            // Toast.makeText(...).show();
        }
    });
}

A dark style TweetView.

For Tweet views in XML, the style may be set by the standard @style attribute.

<!--my_tweet_activity.xml-->

<com.twitter.sdk.android.tweetui.TweetView
    android:id="@+id/city_hall_tweet"
    style="@style/tw__TweetDarkStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    twittersdk:tw__tweet_id="521061104445693952"/>

To style the Tweet views returned by a TweetViewAdapter or TweetViewFetchAdapter, override the getTweetView method the adapter should use to construct a Tweet view with the desired style.

final TweetViewFetchAdapter adapter = new TweetViewFetchAdapter<CompactTweetView>(getActivity()) {
    @Override
    public CompactTweetView getTweetView(Context context, 
                                                                            Tweet tweet) {
        return new CompactTweetView(context, 
                                                            tweet, 
                                                            R.style.tw__TweetDarkStyle);
    }
};

Custom Styling

TweetView and CompactTweetView respect custom style attributes to change the way a Tweet looks:

• tw__container_bg_color - the background color of the Tweet
• tw__primary_text_color - the Tweet text color and author name color
• tw__action_color - the color of the Share Tweet text and links

The tw__TweetLightStyle and tw__TweetDarkStyle you’ve seen set these custom attributes to fixed values that produce light and dark versions. To customize the style of a Tweet view further, the easiest approach is to extend the light or dark styles.

<!--styles.xml-->

<style name="CustomLightTweetStyle" parent="tw__TweetDarkStyle">
    <item name="tw__primary_text_color">@color/custom_color_1</item>
    <item name="tw__action_color">@color/custom_color_2</item>
</style>

Alternately, you may create a theme or a style that sets one or more of the custom attributes. A theme can be applied to the application or activities while a style can be applied to individual views.

<!--styles.xml-->

<style name="CustomStyle">
    <item name="tw__container_bg_color">@color/custom_color_1</item>
    <item name="tw__primary_text_color">@color/custom_color_2</item>
</style>

<style name="CustomTheme" parent="android:Theme.Holo.Light">
    <item name="tw__container_bg_color">@color/custom_color_1</item>
</style>

If a Tweet view renders and one of the custom style attributes is not set, the value defaults to the tw__TweetLightStyle‘s value.

Note

Other Fabric views may respect these attributes as well, so if you only intend to apply them to Tweet views, apply them as a style directly on the views rather than as an application-wide theme.