Rotate Text and Change Position of Image at Runtime in Android Studio

Introduction

 

In today's article, you will learn how to rotate text and how to change the position of an image programmatically at run time. You can rotate the text again and again after a regular interval to create a nice effect. Rotating text and changing the position of an image creates a good visual effect. It attracts the user of the app.

 

Step 1

 

Open "activity_main.xml" in the layout and add the following code to it:

<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:background="#c79488">

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/hello_world"
      android:id="@+id/txt"
      android:layout_marginTop="90dp"
      android:layout_marginLeft="90dp"
      android:textSize="@dimen/txtSize"/>
  <ImageView
          android:id="@+id/im"
          android:layout_width="80dp"
          android:layout_height="80dp"
          android:layout_marginTop="160dp"
          android:layout_marginLeft="10dp"
            />

</RelativeLayout>

The layout looks like:

 

 

Step 2

 

Open "MainActivity.java" and add the following code in it:

package com.textrotation;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.app.Activity;
import android.os.Handler;
import android.view.Menu;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends Activity {
    TextView txt;
    static int flag=0;
    private Handler mHandler;
    final Context context=this;
    ImageView im;
    RelativeLayout.LayoutParams par;

    private Runnable mCountUpdater = new Runnable() {
        private int mCount = 0;

        @Override
        public void run() {
            if(mCount>5)
            {
                Intent i=new Intent(context,Second.class);
                startActivity(i);

            }
            else
            {
               rotate();
                flag++;
                mCount++;
                mHandler.postDelayed(this, 900);
            }
        }
    };

    public void rotate()
    {
        if(flag%2==0)
        {
            txt.setRotation(20);
            im.setImageResource(R.drawable.image1);
        }
        else
        {
            txt.setRotation(-20);
            im.setImageResource(R.drawable.image2);
            par = (RelativeLayout.LayoutParams)im.getLayoutParams();
            par.leftMargin += 60;

             im.setLayoutParams(par);
        }

    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        txt=(TextView)findViewById(R.id.txt);
        im=(ImageView)findViewById(R.id.im);
        mHandler = new Handler();
        mHandler.post(mCountUpdater);

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

For rotating the text you just need to use the setRotation function on the object of Image. In the code above, Handler has been used to introduce a delay between two rotations. This creates a good visual effect. LayoutParams is used on the image object to change its position. I have repeated this 5 times. After this another activity is loaded.

 

I have used 2 images above namely "image1" and "image2". Copy the images required to the clipboard. Right-click on "res" then select "New" -> "Android resource directory". Name this directory as "drawable" and select the "resource type" as "drawable". Paste the images copied to the clipboard to this folder. Now you can use these images.

 

Step 3

 

Now create a layout for the second activity. Right-click on layout then select "New"->"Layout Resource file". Name this file "second_layout" and add the following code to it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#454545">
  <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:textSize="50dp"
      android:textColor="#FFFFFF"
      android:text="BYEE"
      android:layout_marginLeft="30dp"
      android:layout_marginTop="190dp"
      android:id="@+id/txtsec"/>

</LinearLayout>

The layout looks like:

 

 

Step 4

 

Right-click on the package then select "New" -> "Java class". Name this file "Second" and add the following code to it:

package com.textrotation;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class Second extends Activity {
    TextView im;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.second_layout);
        im=(TextView)findViewById(R.id.txtsec);
        im.setRotation(20);
    }
}

Step 5

 

Do not forget to add the name of the new activity in "AndroidManifest":

<activity android:name=".Second"
                android:label="Second"/>

Note the use of text rotation.

 

The output snapshots:

 

 

Note the change in image position.

 

The second activity:

 

 

Thank you... Enjoy coding :)