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 :

enter image description here

android:layout_gravity = float in CSS android:gravity = text-align in CSS ...............Use these property to set your text View because when you animate.. your textView wiil displace.. — Zar E Ahmer, Sep 02 '14 at 08:00
right end width means you have to increase padding-right of your RelativeLayout. — Zar E Ahmer, Sep 02 '14 at 08:23
you have given margin to the Progressbar . it will change due to this parameter . i haven't check but it is what i am expectiong — Zar E Ahmer, Sep 02 '14 at 08:25

score 1 · Answer 1 · answered Sep 02 '14 at 08:26

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);
}

Yes i was also looking into this here : http://stackoverflow.com/questions/16641539/animate-change-width-of-android-relativelayout But the width is increasing from both left and right end, i want to increase only on the right end as the progress is on the right end — Goofy, Sep 02 '14 at 08:28
instead of width you should go for padding-right .. it may solve your issue — Zar E Ahmer, Sep 02 '14 at 09:49

score 0 · Answer 2 · answered Sep 02 '14 at 07:29

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);
                }
            }
        });

    }
}

I tried your code, 1st thing is i need animation as i have explained and second thing is the Text should be in the center and to left end — Goofy, Sep 02 '14 at 07:35

Android expand and contract animation on Layout

2 Answers2