Android Animation Playback: Display GIF Animation in WebView

Android doesn’t support GIF natively. However, there’re a few different approaches to display GIF-like animation. In this and subsequently three blogs, we’ll cover two different approaches to display animation, including WebView and Frame Animation. We’ll start with GIF Animation playback in WebView.

The idea of using WebView to display GIF is simply embed the GIF into a few lines of HTML code as below.

<html>

    <head>

    <style type='text/css'>body{margin:auto auto;text-align:center;} img{width:100%25;} </style>

    </head>

    <body>

    <img src="1.gif" width="100%" />

    </body>

</html>

We can create a custom view which extends the WebView to display GIF animation as below.

public class GifWebView extends WebView {

    

    public GifWebView(Context context) {

        super(context);

    }

    

    public GifWebView(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

        

    public void setGifAssetPath(String pPath) {

        String baseUrl = pPath.substring(0, pPath.lastIndexOf("/") + 1);

        String fileName = pPath.substring(pPath.lastIndexOf("/")+1);

        StringBuilder strBuilder = new StringBuilder();

        strBuilder.append("<html><head><style type='text/css'>body{margin:auto auto;text-align:center;} img{width:100%25;} </style>");

        strBuilder.append("</head><body>");

        strBuilder.append("<img src="" + fileName + "" width="100%" /></body></html>");

        String data = strBuilder.toString();

        Log.d(this.getClass().getName(), "data: " + data);

        Log.d(this.getClass().getName(), "base url: " + baseUrl);

        Log.d(this.getClass().getName(), "file name: " + fileName);

        loadDataWithBaseURL(baseUrl, data, "text/html", "utf-8", null);

    }

}

We can declare a XML layout with the custom view.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".GifWebviewDisplayActivity" >

 

    <roman10.tutorial.gifinwebview.GifWebView

        android:id="@+id/gif_view"

        android:layout_height="match_parent"

        android:layout_width="match_parent">

    </roman10.tutorial.gifinwebview.GifWebView>

 

</RelativeLayout>

Suppose we have an gif animation file 1.gif under assets folder, we can display the gif file in an activity as below.

public class GifWebviewDisplayActivity extends Activity {

    private GifWebView gifView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_gif_webview_display);

        gifView = (GifWebView) findViewById(R.id.gif_view);

        gifView.setGifAssetPath("file:///android_asset/1.gif");

    }

}

The complete source code can be found at github repo.

References:

1. WebView Android doc: http://developer.android.com/reference/android/webkit/WebView.html

Leave a Reply

Your email address will not be published. Required fields are marked *