Simulate 3D Hologram effect

Last post show a DIY 3D Hologram Projector for smartphone to view 3D Hologram Video in YouTube. Here I try to simulate the effect in Android App.

MainActivity.java

package com.blogspot.android_er.androidmirror;

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

 ImageView image2, image4, image6, image8;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 image2 = (ImageView)findViewById(R.id.image2);
 image4 = (ImageView)findViewById(R.id.image4);
 image6 = (ImageView)findViewById(R.id.image6);
 image8 = (ImageView)findViewById(R.id.image8);

 image2.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 flipX();
 }
 });

 image4.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 flipY();
 }
 });

 image6.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 flipY();
 }
 });

 image8.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 flipX();
 }
 });
 }

 private void flipX(){
 ObjectAnimator flip2 = ObjectAnimator.ofFloat(image2, "rotationX", 0f, 360f);
 ObjectAnimator flip4 = ObjectAnimator.ofFloat(image6, "rotationY", 0f, 360f);
 ObjectAnimator flip6 = ObjectAnimator.ofFloat(image4, "rotationY", 0f, -360f);
 ObjectAnimator flip8 = ObjectAnimator.ofFloat(image8, "rotationX", 0f, -360f);
 flip2.setDuration(3000);
 flip4.setDuration(3000);
 flip6.setDuration(3000);
 flip8.setDuration(3000);
 flip2.start();
 flip4.start();
 flip6.start();
 flip8.start();
 }


 private void flipY(){
 ObjectAnimator flip2 = ObjectAnimator.ofFloat(image2, "rotationY", 0f, 360f);
 ObjectAnimator flip4 = ObjectAnimator.ofFloat(image6, "rotationX", 0f, 360f);
 ObjectAnimator flip6 = ObjectAnimator.ofFloat(image4, "rotationX", 0f, -360f);
 ObjectAnimator flip8 = ObjectAnimator.ofFloat(image8, "rotationY", 0f, -360f);
 flip2.setDuration(3000);
 flip4.setDuration(3000);
 flip6.setDuration(3000);
 flip8.setDuration(3000);
 flip2.start();
 flip4.start();
 flip6.start();
 flip8.start();
 }
}

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"/>
 <ImageView
 android_id="@+id/image2"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androider"
 android_layout_gravity="center"/>
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"/>
 <ImageView
 android_id="@+id/image4"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androider"
 android_layout_gravity="center"
 android_rotation="270"/>
 <ImageView
 android_layout_width="20mm"
 android_layout_height="20mm"/>
 <ImageView
 android_id="@+id/image6"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androider"
 android_layout_gravity="center"
 android_rotation="90"/>
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"/>
 <ImageView
 android_id="@+id/image8"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_src="@drawable/androider"
 android_layout_gravity="center"
 android_rotation="180"/>
 <ImageView
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"/>

 </GridLayout>
</RelativeLayout>

Where "@drawable/androider" is a 100x100 PNG with alpha channel.

Next:
- Animated GIF (Androidify) for 3D Hologram viewer

Related Posts by Categories