0

I am trying to implement a cube animation on my viewPager. The animation looks good on the emulator and a Samsung S8 device, but on Huawei P10 Android 7.0 it looks like in the image below:

enter image description here

I don't understand why the image is cropped on my Huawei device. Below is my code:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context="ro.helpproject.funcode.help.MainActivity">


    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

view_pager_item.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/imageView_mario"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@android:color/black"
    android:src="@drawable/mario" />

CubeTransformer.java class

package ro.helpproject.funcode.help;

import android.support.v4.view.ViewPager;
import android.view.View;


public class CubeTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View view, float position) {
        view.setPivotX(position <= 0 ? view.getWidth(): 0.0f);
        view.setRotationY(90f * position);
    }
}

MainActivity.java

package ro.helpproject.funcode.help;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MainActivity extends Activity {

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

        MyViewPagerAdapter adapter = new MyViewPagerAdapter();
        ViewPager pager = findViewById(R.id.pager);
        pager.setPageTransformer(true, new CubeTransformer());
        pager.setAdapter(adapter);
    }

    protected class MyViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
            ImageView imageView = (ImageView) inflater.inflate(R.layout.view_pager_item, container, false);

            container.addView(imageView);
            return imageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}

How can I fix the issue?

halfer
  • 19,824
  • 17
  • 99
  • 186
Laura
  • 2,653
  • 7
  • 37
  • 59

2 Answers2

0
imageview.setAdjustViewBounds(true); 
imageview.setFitToScreen(true);
imageview.setScaleType(ScaleType.FIT_XY);

update.....

 <?xml version="1.0" encoding="utf-8"?>
    <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/imageView_mario"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:background="@android:color/black"
        android:src="@drawable/mario" />
Nirmal Vaghasiya
  • 31
  • 7
  • It's not working with the updated answer either. Thank you for trying to help :) – Laura Oct 06 '17 at 17:23
  • I really think that is an isolated issue after all and it happens only for Huawei. I've noticed that the Stories on Instagram use the cube effect and it looks weird on my phone. Exactly like it looks with my code... – Laura Oct 06 '17 at 19:18
0

The best way to achieve this is to add a parent to your imageView as follows: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageView_mario"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:src="@drawable/mario" />

</LinearLayout>

Then in instantiateItem replace imageView with the LinearLayout:

@Override
    public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
        LinearLayout linearLayout = (LinearLayout) inflater.inflate(R.layout.view_pager_item, container, false);
        container.addView(linearLayout);
        return linearLayout;
    }

This should work properly.

The reason that your solution does not work is that the viewpager tries to fill it's "pages" with the imageview that you provide from your xml, and so it is stretched and has unexpected behaviour.

Antonis Lat
  • 545
  • 4
  • 9
  • The thing is that at first I had a parent for the imageView and the same thing happened. So I thought that the rotation took effect only for the parent, this is why I removed the parent. But the problem persists even if the imageView is by itself. I had a Linear layout as parent exactly like in your example. – Laura Oct 06 '17 at 13:49
  • try override 'public Fragment getItem(int position)' in your pager adapter and insatiate a new fragment there with the "mario" layout. May this work. – Antonis Lat Oct 06 '17 at 14:32