Android animation for corner radius

Question

What I want to achieve

I have an application, where in the bottom left corner, I have a button. This button is a circular ImageButton. When I press the button (with the magnifying glass icon, the following transition should happen:

Also, if it is not clear in the image, the button is a ImageButton, while the "end result" is a SearchView. This doesn't necessarily have to be like this, but it seems to be the best way to go.

What I have now

I have an XML-file for the style of the circular button, called search_button_layout.xml that looks like this:

    <?xml version="1.0" encoding="utf-8"?> shapexmlns:android="http://schemas.android.com                        /apk/res               /android"     android:shape="rectangle"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<corners
    android:topLeftRadius="100dp"
    android:topRightRadius="100dp"
    android:bottomLeftRadius="100dp"
    android:bottomRightRadius="100dp"
    />
<solid
    android:color="#31DE65"
    />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="45dp"
    android:height="46dp"
    />
</shape>

The button itself is created in the activity_main.xml file, and looks like this.

    <ImageButton

    android:id="@+id/search_btn"
    android:layout_width="65dp"
    android:layout_height="66dp"
    android:background="@layout/search_button_layout"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:onClick="goToSearch"
    android:src="@drawable/ic_action_name"
    android:scaleType="fitCenter" />

I have been trying to search, but I only end up with unanswered questions that are outdated.

Please respond if informations is lacking, or if you have a source to a solution that I haven't been able to find.

Short version

When I click the circular imagebutton (left in the image) I want an animation that looks like a searchview (right in the image).

score 1 · Accepted Answer · answered Dec 24 '15 at 06:59

Please check the below code to implement it and use images in background insted of Animation ..hope it would be helpful

activity_layout.xml

 <?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:gravity="center"
        >
    <TextView
        android:id="@+id/txtglass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:drawable/ic_menu_search"
        android:layout_gravity="center|left"/>

        <EditText
            android:id="@+id/ettext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Type to Search"
            android:drawableRight="@android:drawable/ic_menu_search"
            />

    </LinearLayout>
</RelativeLayout>

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
        TextView txtglass;
        EditText ettext;
        int count =0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ettext=(EditText)findViewById(R.id.ettext);
        txtglass=(TextView)findViewById(R.id.txtglass);
        ettext.setVisibility(View.GONE);

        txtglass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (count==0){
                ettext.setVisibility(View.VISIBLE);
                count=1;

                }
                 else{
                    ettext.setVisibility(View.GONE);
                    count=0;
                }


            }
        });

    }
}

Hope it would help

I will try your answer in a couple of hours. Christmas is in the way. :) — user2990057, Dec 24 '15 at 11:32
This sort of solved my problem. I applied it to my project and it works, even though it wasn't exactly as I pictured it in my head. — user2990057, Jan 21 '16 at 14:54

Android animation for corner radius

1 Answers1