Android expand and contract animation on Layout

Question

I have a normal Relative Layout with text view and progress bar.

Now, since i have a fixed width and height of the layout the text is properly placed in the center and looks good, onclick of layout we are changing the visibility of progress bar to "Visible", but since i have a fixed width the progress bar is on top of the text.

What i am trying to achieve is , onclick increase the right end width of the layout along with animation.

Here is my code :

<RelativeLayout
        android:id="@+id/rellyt"
        android:layout_width="150dp"
        android:layout_height="35dp"
        android:layout_margin="5dp"
        android:background="#B7E4FF"
        android:clickable="true" >

        <TextView
            android:id="@+id/txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerInParent="true"
            android:text="click on this button"
            android:textColor="#000000"
            android:textSize="14sp" />

        <ProgressBar
            android:id="@+id/prgbar"
            style="@android:style/Widget.ProgressBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="8dp"
            android:visibility="visible" />
    </RelativeLayout>

Screen shot of the layout :

Answer 1

Animation

public class ResizeWidthAnimation extends Animation
{
    private int mWidth;
    private int mStartWidth;
    private View mView;

    public ResizeWidthAnimation(View view, int width)
    {
        mView = view;
        mWidth = width;
        mStartWidth = view.getWidth();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t)
    {
        int newWidth = mStartWidth + (int) ((mWidth - mStartWidth) * interpolatedTime);

        mView.getLayoutParams().width = newWidth;
        mView.requestLayout();
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight)
    {
        super.initialize(width, height, parentWidth, parentHeight);
    }

    @Override
    public boolean willChangeBounds()
    {
        return true;
    }
}

Usage

if(animate)
{
    ResizeWidthAnimation anim = new ResizeWidthAnimation(leftFrame, leftFragmentWidthPx);
    anim.setDuration(500);
    leftFrame.startAnimation(anim);
}
else
{
    this.leftFragmentWidthPx = leftFragmentWidthPx;
    LayoutParams lp = (LayoutParams) leftFrame.getLayoutParams();
    lp.width = leftFragmentWidthPx;
    leftFrame.setLayoutParams(lp);
}

Answer 2

Try this way,hope this will help you to solve your problem.

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/customLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#B7E4FF"
        android:gravity="center"
        android:padding="5dp">

        <TextView
            android:id="@+id/txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="click on this button"
            android:textColor="#000000"
            android:textSize="14sp" />

        <ProgressBar
            android:id="@+id/prgbar"
            style="@android:style/Widget.ProgressBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:visibility="invisible" />
    </LinearLayout>
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {

    private LinearLayout customLayout;
    private ProgressBar prgbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        customLayout = (LinearLayout) findViewById(R.id.customLayout);
        prgbar = (ProgressBar) findViewById(R.id.prgbar);
        customLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(prgbar.getVisibility() == View.INVISIBLE){
                    prgbar.setVisibility(View.VISIBLE);
                }else{
                    prgbar.setVisibility(View.INVISIBLE);
                }
            }
        });

    }
}