Android, animation, How to sliding in and out a la

Question

In my application I need to record by camera. During recording I show some items as menu on screen. I need to slide out menu from screen when user clicks an arrow and slide it in when user touched the screen.

I have two problem. 1) It seems my animation doesn't work. 2) when i set RelativeLayout to visible/invisible just the view take effect, camera view doesn't get the whole of screen as you see in images (I don't want see black background).

R.anim.slide_in_up:

<?xml version="1.0" encoding="utf-8"?>

<translate 
    xmlns:android       = "http://schemas.android.com/apk/res/android"
    android:fromYDelta  = "100%p" 
    android:toYDelta    = "0%p"
    android:duration    = "3000" />

R.anim.slide_out_up:

<?xml version="1.0" encoding="utf-8"?>

<translate 
    xmlns:android       = "http://schemas.android.com/apk/res/android"
    android:fromYDelta  = "0%p" 
    android:toYDelta    = "100%p"
    android:duration    = "3000" />

Code, for showing slide_in_up:

rlMenu = (RelativeLayout) findViewById(R.id.rlMenu);
        imHide  = (ImageView) findViewById(R.id.btn_hide);
        imHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                rlMenu.setVisibility(View.INVISIBLE);
                overridePendingTransition(R.anim.slide_in_up, R.anim.slide_out_up);
            }
        });

Code, for showing slide_out_up:

@Override
    public boolean onTouchEvent(MotionEvent event) {

        rlMenu.setVisibility(View.VISIBLE);
        overridePendingTransition(R.anim.slide_out_up, R.anim.slide_in_up);

        return super.onTouchEvent(event);
    }

Screen layout:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android           = "http://schemas.android.com/apk/res/android"
    android:layout_width    = "fill_parent"
    android:layout_height   = "fill_parent"
    android:orientation     = "vertical" >



     <FrameLayout
        android:id              = "@+id/camera_preview"
        android:layout_width    = "fill_parent"
        android:layout_height   = "0dip"
        android:layout_weight   = "1" />



     <RelativeLayout
         android:id             = "@+id/rlMenu"
         android:layout_width   = "fill_parent"
         android:layout_height  = "wrap_content"
         android:orientation    = "horizontal" >

         <RelativeLayout
             android:layout_width           = "240dip"
             android:layout_height          = "50dip"
             android:background             = "@drawable/btn_top_edge_right"
             android:layout_alignParentLeft = "true" >

             <ImageView 
                 android:id                     = "@+id/btn_hide"
                 android:layout_width           = "40dip"
                 android:layout_height          = "wrap_content"
                 android:src                    = "@drawable/btn_record_hide"
                 android:layout_marginTop       = "10dip"
                 android:layout_marginBottom    = "10dip"
                 android:contentDescription     = "@string/menu_contentdescription"
                 android:scaleType              = "fitXY" />

             <ImageView 
                 android:id                     = "@+id/btn_record"
                 android:layout_width           = "wrap_content"
                 android:layout_height          = "wrap_content"
                 android:src                    = "@drawable/btn_record_start"
                 android:layout_toRightOf       = "@id/btn_hide"
                 android:layout_margin          = "10dip"
                 android:contentDescription     = "@string/menu_contentdescription" />

             <ImageView 
                 android:id                     = "@+id/btn_stop"
                 android:layout_width           = "wrap_content"
                 android:layout_height          = "wrap_content"
                 android:src                    = "@drawable/btn_record_stop"
                 android:layout_toRightOf       = "@id/btn_record"
                 android:layout_marginTop       = "10dip"
                 android:layout_marginBottom    = "10dip"
                 android:contentDescription     = "@string/menu_contentdescription"
                 android:clickable              = "false" />         
         </RelativeLayout>


         <Button
             android:id                         = "@+id/btn_done"
             android:layout_width               = "wrap_content"
             android:layout_height              = "50dip"
             android:background                 = "@drawable/btn_record_done"
             android:layout_alignParentRight    = "true"
             android:text                       = "@string/Record_btn"
             android:paddingLeft                = "15dip"
             style                              = "@style/simpletopic.bold" />

     </RelativeLayout>
</LinearLayout>

How can I remove the whole of RelativeLayout and enlarge camera view with my animation? Thanks

Answer 1

Just try to set visibility GONE to other layout elements, so main view will get stretched.

Answer 2

Answer to second question. Try changing your layout as below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <FrameLayout
        android:id="@+id/camera_preview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <RelativeLayout
        android:id="@+id/rlMenu"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/btn_hide"
                android:layout_width="40dip"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dip"
                android:layout_marginTop="10dip"
                android:contentDescription="@string/menu_contentdescription"
                android:scaleType="fitXY"
                android:src="@drawable/btn_record_hide" />

            <ImageView
                android:id="@+id/btn_record"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dip"
                android:layout_toRightOf="@id/btn_hide"
                android:contentDescription="@string/menu_contentdescription"
                android:src="@drawable/btn_record_start" />

            <ImageView
                android:id="@+id/btn_stop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dip"
                android:layout_marginTop="10dip"
                android:layout_toRightOf="@id/btn_record"
                android:clickable="false"
                android:contentDescription="@string/menu_contentdescription"
                android:src="@drawable/btn_record_stop" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_done"
                style="@style/simpletopic.bold"
                android:layout_width="wrap_content"
                android:layout_height="50dip"
                android:layout_alignParentRight="true"
                android:background="@drawable/btn_record_done"
                android:paddingLeft="15dip"
                android:text="@string/Record_btn" />
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

I had a similar situations with a custum MapView.

Answer 3

I think this will work out if you use frame layout.Add two frames and add the pictures to the frame.Alternatively adding the animation to the two frames and making it play will make this work out.I think this will work and give you what you wanted.A small piece of code is shown below hope this will help you a lil bit.

if (imagesetflag == true) {
                Right_to_left_in = AnimationUtils.loadAnimation(this,
                        R.anim.right_to_left_in);
                Right_to_left_out = AnimationUtils.loadAnimation(this,
                        R.anim.right_to_left_out);
                left_to_Right_in = AnimationUtils.loadAnimation(this,
                        R.anim.left_to_right_in);
                Left_to_Right_out = AnimationUtils.loadAnimation(this,
                        R.anim.left_to_right_out);

                frame1.setImageBitmapReset(decryptedimage, 0, true);

                frame1.bringToFront();
                frame1.setVisibility(View.VISIBLE);
                frame2.setVisibility(View.INVISIBLE);
                frame1.setAnimation(Right_to_left_in);
                frame2.setAnimation(Right_to_left_out);                                     

            } else {
                Right_to_left_in = AnimationUtils.loadAnimation(this,
                        R.anim.right_to_left_in);
                Right_to_left_out = AnimationUtils.loadAnimation(this,
                        R.anim.right_to_left_out);
                left_to_Right_in = AnimationUtils.loadAnimation(this,
                        R.anim.left_to_right_in);
                Left_to_Right_out = AnimationUtils.loadAnimation(this,
                        R.anim.left_to_right_out);

                frame2.setImageBitmapReset(decryptedimage, 0, true);

                frame2.bringToFront();
                frame2.setVisibility(View.VISIBLE);
                frame1.setVisibility(View.INVISIBLE);
                frame2.setAnimation(Right_to_left_in);
                frame1.setAnimation(Right_to_left_out);                 

            }