Search code examples
androiduser-interfacedpi

How can i fix the animation on different DPI?


I have an animation that move a png image to the top then it stop at certain position

the problem is that it stops on different position on different devices with different DPI

enter image description here

project structure

enter image description here

project link: https://github.com/anggarisky/SplashtoHomeAngga

XML:

bganim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    >

    <translate
        android:fromYDelta="0%"
        android:toYDelta="30%p"
        android:duration="800"
        />

</set>

cloveranim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:startOffset="300"
    >


    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="800"
        />


</set>

frombottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:startOffset="1000"
    >

    <translate
        android:fromYDelta="10%p"
        android:toYDelta="0%"
        android:duration="800"
        />

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="600"
        />

</set>

acitivty_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/clover"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="272dp"
        android:elevation="6dp"
        android:src="@drawable/clover"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/textsplash"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="300dp"
        android:elevation="6dp"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Good Morning"
            android:textColor="#FFF"
            android:textSize="24sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mr Panda Risky"
            android:textColor="#FFF"
            android:textSize="16sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/texthome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="28dp"
        android:elevation="6dp"
        android:gravity="left"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Explore"
            android:textColor="#FFF"
            android:textSize="24sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Simply makes design good"
            android:textColor="#FFF"
            android:textSize="16sp" />

    </LinearLayout>


    <LinearLayout
        android:id="@+id/menus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="240dp"
        android:elevation="6dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.726"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="70dp"
            android:orientation="horizontal">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="50dp"
                android:gravity="center"
                android:orientation="vertical">


                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="4dp"
                    android:src="@drawable/bitcon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="BitCoin"
                    android:textColor="#0E1843"
                    android:textSize="22sp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="50dp"
                android:gravity="center"
                android:orientation="vertical">


                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="4dp"
                    android:src="@drawable/bellcon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Bells"
                    android:textColor="#0E1843"
                    android:textSize="22sp" />

            </LinearLayout>


        </LinearLayout>


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="70dp"
            android:orientation="horizontal">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="50dp"
                android:gravity="center"
                android:orientation="vertical">


                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="4dp"
                    android:src="@drawable/bookcon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Books"
                    android:textColor="#0E1843"
                    android:textSize="22sp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="50dp"
                android:gravity="center"
                android:orientation="vertical">


                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="4dp"
                    android:src="@drawable/bugcon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Reports"
                    android:textColor="#0E1843"
                    android:textSize="22sp" />

            </LinearLayout>


        </LinearLayout>


    </LinearLayout>

    <ImageView
        android:id="@+id/bgapp"
        android:layout_width="450dp"
        android:layout_height="900dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:scaleType="fitXY"
        android:src="@drawable/bgapp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.309"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    ImageView bgapp, clover;
    LinearLayout textsplash, texthome, menus;
    Animation frombottom;

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

        frombottom = AnimationUtils.loadAnimation(this, R.anim.frombottom);


        bgapp = (ImageView) findViewById(R.id.bgapp);
        clover = (ImageView) findViewById(R.id.clover);
        textsplash = (LinearLayout) findViewById(R.id.textsplash);
        texthome = (LinearLayout) findViewById(R.id.texthome);
        menus = (LinearLayout) findViewById(R.id.menus);

        bgapp.animate().translationY(-2400).setDuration(450).setStartDelay(1500);
        clover.animate().alpha(0).setDuration(800).setStartDelay(600);
        textsplash.animate().translationY(140).alpha(0).setDuration(800).setStartDelay(300);

        texthome.startAnimation(frombottom);
        menus.startAnimation(frombottom);


    }
}

Any help would be appreciated


Solution

  • i fixed the problem

    the perfect value for the translationY for me is -1900 for 440dpi, so i did 1+00/440=4,318181818181818‬ so i can use 4,318181818181818‬ for 1dpi

    float h = 4.318181818181818f;
    DisplayMetrics dm = this.getResources().getDisplayMetrics();
    int densityDpi = dm.densityDpi;
    float tr=densityDpi*h;
    bgapp.animate().translationY(-tr).setDuration(450).setStartDelay(1500);
    

    i think this is not the perfect solution, but it work for now