1

So I have this animation I have been working on. Essentially, when you click the image all it does is simply animate the image to a new Y coordinate. Note: Keep in mind that my images are all scaled appropriately for mdli, hdpi, xhdpi etc. So I have 2 problems: 1. When I use .setY on an image view, the y coordinate is loaded differently on other phones. 2. When I use both my image and txt animate methods, they both animate to different y coordinates based on different phones/screens. So my question is how do I fix both of these problems so that they are consistent across all screen sizes?

public class MainActivity extends Activity {

    final String tag = "My activity";

    ImageView mWhatsTheAnswerImg, mInspireMeImg, mHelpMeThink, mTalkToVince;


    ObjectAnimator mImageAnimation, mTxtAnimation;



    TextView mWhatsTheAnswerText, mInspireMeTxt, mHelpMeThinkTxt, mTalkToVinceTxt;
    boolean mWhatsTheAnswerBOOL,  mInspireMeBOOL, mHelpMeThinkBOOL, mTalkToVinceBOOL =false;


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



        ActionBar actionBar = getActionBar();
        actionBar.hide();



        mInspireMeImg = (ImageView) findViewById(R.id.inspireme);

        mInspireMeImg.setY(750);

        mInspireMeTxt = (TextView) findViewById(R.id.inspireMeTxt);

        mInspireMeTxt.setY(750);


        mInspireMeImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if (mInspireMeBOOL) {



                    imageAnimate(mInspireMeImg, 750);
                    txtAnimate(mInspireMeTxt, 750);

                    Log.w(tag, "DOWN Coordinates: " + mInspireMeImg.getY() + "Txt: " + mInspireMeTxt.getY());





                    mInspireMeBOOL = false;
                } else {



                    mInspireMeBOOL = true;



                    imageAnimate(mInspireMeImg, +290);
                    txtAnimate(mInspireMeTxt, +290);

                    Log.w(tag, "UP Coordinates: " + mInspireMeImg.getY() + "Txt: " + mInspireMeTxt.getY());



                }

            }
        });

Image animate and txt animate methods:

private void imageAnimate(ImageView img, float YCoordinates){

     mImageAnimation =ObjectAnimator.ofFloat(img, View.TRANSLATION_Y,YCoordinates);

        Log.w(tag, "IMG Coordinates: " + img.getY());

        mImageAnimation.setDuration(1000);

        mImageAnimation.start();

    }


    private void txtAnimate(TextView txt, float YCoordinates){


        mTxtAnimation = ObjectAnimator.ofFloat(txt, View.TRANSLATION_Y, YCoordinates);

        Log.w(tag, "TXT Coordinates: " + txt.getY());


        mTxtAnimation.setDuration(1000);

        mTxtAnimation.start();
    }



}

Edit: XML

<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"

    tools:context="com.wyatt.avinceandroid.app.MainActivity">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/Background"
        android:src="@drawable/coachvincebackground"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/inspireme"
        android:src="@drawable/inspiremescreen"
        android:scaleType="fitXY"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/inspireMeTxt"
        android:layout_alignTop="@+id/helpMeThink"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="89dp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/helpMeThink"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="71dp"
        android:src="@drawable/helpmethinkscreen"
        android:scaleType="fitXY"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/helpMeThinkTxt"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/whatsTheAnswer"
        android:src="@drawable/whatstheanswerscreen"
        android:scaleType="fitXY"
      />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/whatsTheAnswerTxt"
        android:layout_alignTop="@+id/AskVince"
        android:layout_alignLeft="@+id/inspireMeTxt"
        android:layout_alignStart="@+id/inspireMeTxt" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/AskVince"
        android:src="@drawable/askvincescreen"
        android:scaleType="fitXY"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/askVinceTxt"
        android:layout_below="@+id/helpMeThinkTxt"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
user3683815
  • 235
  • 1
  • 2
  • 9

1 Answers1

0

The setY and other similar methods expect values in pixels. Now, this is exactly where the problem lies. Different phones have screens of different resolutions and so the 750th pixel will be located at different positions on different phones unless two displays are identical.

The solution is simple. Use values in DP:

mInspireMeImg.setY(dpToPx(750));

and keep this method stored somewhere:

public static int dpToPx(float dpValue, Context context){
    return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
}

More about DP unit:

http://developer.android.com/training/multiscreen/screendensities.html

What is the difference between "px", "dp", "dip" and "sp" on Android?

Community
  • 1
  • 1
Saket
  • 2,945
  • 1
  • 29
  • 31
  • Thanks will give it a try. What would I pass in for the context parameter? – user3683815 Jun 15 '14 at 19:48
  • Context is perhaps one of the most important elements of Android. You should first learn about it before doing anything else. `this` will only work in classes that are wrapped inside a ContextWrapper like an Activity, Service, etc. I cannot help you without seeing your full code. – Saket Jun 15 '14 at 19:59
  • Thanks for the links, will check. I updated my code. See above. I can post literally the whole thing, but that seems silly. This is really my only issue. Really want to learn from my mistake. – user3683815 Jun 15 '14 at 21:10
  • Cool, try this. Use `this` for `mInspireMeImg.setY(750);` & `mInspireMeTxt.setY(750);` and `getBaseContext()` or `MainActivity.this` in `imageAnimate(mInspireMeImg, 750);` & `txtAnimate(mInspireMeTxt, 750);`. – Saket Jun 15 '14 at 21:34