Animated GIF Androidify for 3D Hologram viewer

Last post I tried to generate interactive animation using ObjectAnimator, to simulate 3D Hologram effect. This post I create Custom View to display animated GIF of Androidify, to simulate the effect.

The animated GIFs of Androidify are create using Googles Androidify App.  Then I have to edit the animated GIFs to resize it to 200x200, and change the background to black using GIMP. Then copy the files to drawable folder in Android Studio project.

Create a custom view, GifView, to handle the animated GIF. If you are looking for display animated GIF, refer "Play animated GIF using android.graphics.Movie, with Movie.decodeStream(InputStream)". In this version, I have to handle src attribute from xml, such that I can display four GifView of different source.

GifView .java

package com.blogspot.android_er.androidmirror;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Movie;
import android.util.AttributeSet;
import android.view.View;

import java.io.InputStream;

public class GifView extends View {

 private InputStream gifInputStream;
 private Movie gifMovie;
 private int movieWidth, movieHeight;
 private long movieDuration;
 private long mMovieStart;

 public GifView(Context context) {
 super(context);
 init(context, null);
 }

 public GifView(Context context, AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs);
 }

 public GifView(Context context, AttributeSet attrs,
 int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs);
 }

 private void init(Context context, AttributeSet attrs){
 setFocusable(true);

 //Handle src attribute from xml
 if(attrs == null){
 gifInputStream = context.getResources().openRawResource(R.drawable.androidify1b);
 }else{
 int src_id = attrs.getAttributeResourceValue(
 "http://schemas.android.com/apk/res/android",
 "src",
 R.drawable.androidify1b);
 gifInputStream = context.getResources().openRawResource(src_id);
 }

 gifMovie = Movie.decodeStream(gifInputStream);
 movieWidth = gifMovie.width();
 movieHeight = gifMovie.height();
 movieDuration = gifMovie.duration();
 }

 @Override
 protected void onMeasure(int widthMeasureSpec,
 int heightMeasureSpec) {
 setMeasuredDimension(movieWidth, movieHeight);
 }

 public int getMovieWidth(){
 return movieWidth;
 }

 public int getMovieHeight(){
 return movieHeight;
 }

 public long getMovieDuration(){
 return movieDuration;
 }

 @Override
 protected void onDraw(Canvas canvas) {

 long now = android.os.SystemClock.uptimeMillis();
 if (mMovieStart == 0) { // first time
 mMovieStart = now;
 }

 if (gifMovie != null) {

 int dur = gifMovie.duration();
 if (dur == 0) {
 dur = 1000;
 }

 int relTime = (int)((now - mMovieStart) % dur);

 gifMovie.setTime(relTime);

 gifMovie.draw(canvas, 0, 0);
 invalidate();

 }

 }
}

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 
 
 android_layout_width="match_parent"
 android_layout_height="match_parent"
 android_padding="16dp"
 android_background="@android:color/black"
 tools_context=".MainActivity">

 <TextView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_autoLink="web"
 android_text="http://android-er.blogspot.com/"
 android_textStyle="bold"
 android_layout_alignParentTop="true"/>

 <GridLayout
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_columnCount="3"
 android_layout_centerInParent="true">
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"/>
 <com.blogspot.android_er.androidmirror.GifView
 android_id="@+id/image2"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androidify1b"
 android_layout_gravity="center"/>
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"/>
 <com.blogspot.android_er.androidmirror.GifView
 android_id="@+id/image4"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androidify2b"
 android_layout_gravity="center"
 android_rotation="270"/>
 <ImageView
 android_layout_width="20mm"
 android_layout_height="20mm"/>
 <com.blogspot.android_er.androidmirror.GifView
 android_id="@+id/image6"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androidify3b"
 android_layout_gravity="center"
 android_rotation="90"/>
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"/>
 <com.blogspot.android_er.androidmirror.GifView
 android_id="@+id/image8"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androidify4b"
 android_layout_gravity="center"
 android_rotation="180"/>
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"/>

 </GridLayout>
</RelativeLayout>

Edit AndroidManifest.xml to disable hardwareAccelerated by setting it false.

<?xml version="1.0" encoding="utf-8"?>
<manifest 
 package="com.blogspot.android_er.androidmirror" >

 <application
 android_allowBackup="true"
 android_icon="@mipmap/ic_launcher"
 android_label="@string/app_name"
 android_supportsRtl="true"
 android_theme="@style/AppTheme" >
 <activity android_name=".MainActivity"
 android_hardwareAccelerated="false">
 <intent-filter>
 <action android_name="android.intent.action.MAIN" />

 <category android_name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 </application>

</manifest>

Nothing do on MainActivity.java

package com.blogspot.android_er.androidmirror;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

}

Download the files (Android Studio Format) .

Download APK .

---

If you have a DIY 3D Hologram Projector, you can view the test view at YouTube.

Related Posts by Categories