enter image description here

There is an application with a lower toolbar. It is necessary to make the camera window, which leaves the bottom by pressing the left button. The window should go to 1/3 of the screen, the toolbar should be above it. Made a camera in SurfaceView. How to make a trip?

<?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:id="@+id/parent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" tools:context=".activity.MainActivity"> <SurfaceView android:id="@+id/camera_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:visibility="gone" /> <RelativeLayout android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="#f4f5f7"> <ImageButton android:id="@+id/btn_camera" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:background="#f4f5f7" android:padding="10dp" android:scaleType="fitCenter" android:src="@drawable/camera59" /> <ImageButton android:id="@+id/btn_mic" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:background="#f4f5f7" android:padding="10dp" android:scaleType="fitCenter" android:src="@drawable/microphone85" /> <ImageButton android:id="@+id/btn_cat" android:layout_width="50dp" android:layout_height="50dp" android:layout_toLeftOf="@id/btn_mic" android:layout_toStartOf="@id/btn_mic" android:background="#f4f5f7" android:padding="10dp" android:scaleType="fitCenter" android:src="@drawable/square234" /> <com.superup.smartshelf.utils.ClearableAutoComplete android:id="@+id/autocomplete" android:layout_width="match_parent" android:layout_height="30dp" android:layout_marginTop="10dp" android:layout_toEndOf="@id/btn_camera" android:layout_toLeftOf="@id/btn_cat" android:layout_toRightOf="@id/btn_camera" android:layout_toStartOf="@id/btn_cat" android:background="@drawable/round_rect_shape" android:padding="3dp" android:singleLine="true" /> </RelativeLayout> <com.superup.smartshelf.view.SnappingRecyclerView android:id="@+id/item_list" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_above="@id/toolbar" /> </RelativeLayout> 
  • one
    Add a snippet and, if necessary, show it with animation, that it leaves the bottom. - VAndrJ
  • Your question does not apply to the camera, you need to animate the SurfaceView just like any other View. - Vladyslav Matviienko
  • @metalurgus can share an example? - Andrey Rankov
  • Well, yes, it's simple, the longer your "toolbar" will have to impose, if you add your markup, I can quickly give you an example. - Shwarz Andrei
  • @ShwarzAndrei added. SurfaceView is a view that should go below. Now it opens in the background by clicking on the first ImageButton - Andrey Rankov

1 answer 1

Camera_Activity.class

 public class Camera_Activity extends AppCompatActivity { ImageButton btn_camera; ImageButton btn_mic; SurfaceView sv; LinearLayout show_video; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.anim_footer); show_video = (LinearLayout) findViewById(R.id.show_video); btn_camera = (ImageButton) findViewById(R.id.btn_camera); btn_mic = (ImageButton) findViewById(R.id.btn_mic); sv = (SurfaceView) findViewById(R.id.camera_view); btn_camera.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (sv.getVisibility() == View.GONE) { sv.setVisibility(View.VISIBLE); final Animation show = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.show_video); show_video.startAnimation(show); } } }); btn_mic.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (sv.getVisibility() == View.VISIBLE) { final Animation hide = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.hide_video); hide.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { sv.setVisibility(View.GONE); } @Override public void onAnimationRepeat(Animation animation) { } }); show_video.startAnimation(hide); } } }); } } 

anim_footer.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:id="@+id/parent" android:background="@drawable/gradient" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".activity.MainActivity"> <LinearLayout android:id="@+id/show_video" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"> <RelativeLayout android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#80000000"> <ImageButton android:id="@+id/btn_camera" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:padding="10dp" android:scaleType="fitCenter" android:src="@android:drawable/ic_media_play" /> <ImageButton android:id="@+id/btn_mic" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:padding="10dp" android:scaleType="fitCenter" android:src="@android:drawable/ic_delete" /> <ImageButton android:id="@+id/btn_cat" android:layout_width="50dp" android:layout_height="50dp" android:layout_toLeftOf="@id/btn_mic" android:layout_toStartOf="@id/btn_mic" android:padding="10dp" android:scaleType="fitCenter" android:src="@android:drawable/ic_lock_lock" /> </RelativeLayout> <SurfaceView android:visibility="gone" android:background="@drawable/photo" android:id="@+id/camera_view" android:layout_width="match_parent" android:layout_height="300dp" /> </LinearLayout> </RelativeLayout> 

Two animations:

show_video.xml

 <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:interpolator/accelerate_cubic" android:startOffset="150" android:fromYDelta="86%" android:toYDelta="0" android:fillAfter="true" android:duration="2000"/> 

hide_video.xml

 <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:interpolator/bounce" android:fromYDelta="0" android:toYDelta="85%" android:duration="1500"/> 

Result: enter image description here

I tried for min. hurt your markup, it turns out that only LinerLayout was added, as a container for this whole thing below. Icons are standard. In general, there is nothing special in the code, but one moment I think is worth explaining. Translate animation: since the panel is always visible, we need to push the panel smaller by this size, but it will not be difficult to calculate it, even if it changes dynamically, you just have to rewrite the animation programmatically. And in one of the animations, 1% more, this is a feature, so that the start seemed smoother, you can bet 85% understand why. The rest seems to be all standard.

  • Andrew, thank you. Works great. The camera slows down a little when opened, but apparently this is due to its initialization. I have only one question left. Over the traveling view I have a RecyclerView (id = item_list, at the end of my layout). I need it to increase dynamically when the camera is opened and decrease when closing. - Andrey Rankov
  • Try to formulate the question as a new one, I can’t immediately understand what needs to be done. Preferably with sample code and image of the desired result. Good luck) - Shwarz Andrei