Saturday, April 11, 2015

Android animation - Move a view from container top left to top right

Android animation - Move a view from container top left to top right
activity_main.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"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:id="@+id/rl"
    android:background="@drawable/relative_layout_border"
    >
    <ImageView
        android:id="@+id/img_square50px"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/square50px"
        />
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/img_square50px"
        />
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Move Square"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        />
</RelativeLayout>
res/drawable/relative_layout_border.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="#ff0000" android:width="1dp"/>
        </shape>
    </item>
</selector>
MainActivity.java (Parital code)

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

 final ImageView img = (ImageView) findViewById(R.id.img_square50px);
 final Button btn = (Button) findViewById(R.id.btn);
 final TextView tv = (TextView) findViewById(R.id.tv);
 final RelativeLayout container = (RelativeLayout) findViewById(R.id.rl);

 btn.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
   //Make the TextView empty
   tv.setText("");

   //.....Get the device screen size in pixel.....
   Display display = getWindowManager().getDefaultDisplay();
   Point size = new Point();
   display.getSize(size);
   int windowWidth = size.x;
   int windowHeight = size.y;
   //..................................

   tv.setText(tv.getText() + "Window Height: "+ windowHeight + "\n");
   tv.setText(tv.getText() + "Window Width: "+ windowWidth + "\n\n");

   tv.setText("Relative Layout Height: "+ container.getHeight()+ "\n");
   tv.setText(tv.getText() + "Relative Layout  Width: "+ container.getWidth()+ "\n");

   tv.setText(tv.getText() + "Relative Layout Padding Left: "+ container.getPaddingLeft()+ "\n");
   tv.setText(tv.getText() + "Relative Layout Padding Top: "+ container.getPaddingTop()+ "\n");
   tv.setText(tv.getText() + "Relative Layout Padding Right: "+ container.getPaddingRight()+ "\n");
   tv.setText(tv.getText() + "Relative Layout Padding Bottom: "+ container.getPaddingBottom()+ "\n\n");

   //Get the ActionBar Height
   float actionBarHeight = getActionBar().getHeight();
   tv.setText(tv.getText() + "Action Bar Height: "+ actionBarHeight + "\n\n");

   //Get Square Image X and Y position
   float imgX = img.getX();
   float imgY = img.getY();
   tv.setText(tv.getText() + "Square Image X: "+ imgX + "\n");
   tv.setText(tv.getText() + "Square Image Y: "+ imgY + "\n\n");

   //Get the Container Right Edge
   float containerRightEdge =container.getWidth() - container.getPaddingRight();
   //Get the Square Image Width
   float imgWidth = img.getWidth();
   //Calculate the ultimate X position of Square Image
   float imgUltimateX = containerRightEdge-imgWidth;

   tv.setText(tv.getText() + "Container Right Edge: "+ containerRightEdge+ "\n");
   tv.setText(tv.getText() + "Square Image Width: "+ imgWidth+ "\n");
   tv.setText(tv.getText() + "Square Image Ultimate X: "+ imgUltimateX+ "\n\n");

   //Move Square Image from Container (ViewGroup) Top left to Top Right
   img.animate().x(imgUltimateX).setDuration(5000).start();
  }
 });
}
Additional imported classes

import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.graphics.Point;
import android.view.Display;


More android examples