Developing Instagram Sharing with MotionLayout

Hello. I am an Android app developer on the Wadiz App Development Team.

We recently added a feature to Instagram Stories that lets you show off your crowdfunding receipts or store receipts. I’d like to share the development process behind it.

When you back a project or make a purchase in the store, a receipt featuring the product’s image, title, and date will be generated, and you’ll see a simulation of it being printed. By tapping the character selection button on the right, you can choose to switch to one of Wadizmascot characters: Jinguk, Genie, or Joy. Once you’ve selected a receipt you like, you can download it or share it on your Instagram Story.

The development process can be broadly divided into animation and rendering. We were able to implement this using MotionLayout, MediaMuxer, and MediaCodec, which are provided by Android.

Animation Implementation: MotionLayout

public class MotionLayout extends ConstraintLayout

First introduced at Google I/O 2018, MotionLayout is a subclass of ConstraintLayout and a ViewGroup that allows you to add various animations. While there were already several ways to create animations before, MotionLayout is extremely convenient because it offers a combination of features and is easy to use.

If your existing screen was built using ConstraintLayout, applying MotionLayout is very simple. First, switch from ConstraintLayout to MotionLayout. Then, app:layoutDescription Include the XML resource file that defines the motionScene using attributes. If a MotionLayout subview is also defined within the motionScene, the definition within the motionScene takes precedence.

<?xml version="1.0" encoding="utf-8"?>
<!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
app:layoutDescription="@xml/motion_scene">
 <!-- 하위 뷰 -->
   <View
             android:id="@+id/button"
             android:layout_width="64dp"
             android:layout_height="64dp"
             android:text="Button" />
</androidx.constraintlayout.motion.widget.MotionLayout>


The Motion Scene XML file is located at the root <MotionScene> It consists of a ConstraintSet, a Transition, and their child elements.

• <ConstraintSet> : Based on a specific point in a motion sequence, multiple <Constraint>Specifies the position and properties of all views, including
• <Constraint> : Defines the position and properties of the view.
• <Transition> : Defines the start and end points of defined ConstraintSets, as well as user interactions.
• <onClick> : Defines the action to be performed when a specific view is clicked.
• <onSwipe> : Defines the action to be performed when a specific view is swiped.
• <KeyFrameSet> , <KeyPosition>, <KeyAttribute> : Specify additional detailed motions frame by frame.

To summarize, regarding points A and B at the start of the animation ConstraintSetCreate each of them. Then, A and B TransitionWhen connected in this way, MotionLayout makes the transition between the two states appear smooth and natural.

When MotionLayout was first introduced, you had to write MotionScenes directly in XML files. However, with the addition of the Motion Editor in the Android Studio 4.0 update, it became much easier to design animations.

There are four cards in total. Each card defines a specific point in the motion sequence. ConstraintSet. The arrows connecting each card indicate the start and end of the motion. Transition . The dotted arrows indicate motion branching from another ConstraintSet (deriveConstraintsFrom)

I broke down the animation of the receipt being printed, defined a total of four ConstraintSets for each motion, and linked them using transitions.

Every transition is autoTransition="animatedToEnd" Since the attribute is defined, the animation will automatically move on to the next transition once it finishes.

First Transition: The receipt slides down, and a hand rises from the bottom to the top starting from the middle.

• By connecting ConstraintSets with different heights, the receipt will feed down from top to bottom.

• I set the keyFrameSet so that the hand starts to rise from the middle of the frame.

• motionInterpolator="easeInOut" I defined the property to specify the animation acceleration.

Second Transition: The receipt twists counterclockwise and tears apart.

1. Create an MP4 file

Create a MediaCodec object using the name of the imported codec.

MediaCodec.createByCodecName(mediaCodecName)

After creating a MediaCodec, create a MediaFormat and configure it by adding it to the codec.

mediaCodec.configure(mediaFormat, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE)

The MediaFormat object accepts data such as the video's MIME type, width, height, bitrate, frame rate, and color.

Create a FileDescriptor using the URI of the file created earlier, and pass it to the constructor along with the OutputFormat settings.

MediaMuxer(fileDescriptor, MediaMuxer.OutputFormat.MUXER_OUTPUT_MPEG_4)

3. Encode as a bitmap and import into MediaMuxer

Extract a bitmap from the View for each animation frame.

Since the animation was created using MotionLayout, setProgress() You can use a function to display a specific frame on the screen.

recordCopyViewBinding.clRecordView.progress = progress
getBitmapFromView(width, height)?.let { // 추출해야 하는 타깃 뷰로부터 Bitmap을 생성
             bitmapToVideoEncoder.encode(it)
}

Source: https://developer.android.com/reference/android/media/MediaCodec

The extracted bitmap is placed into MediaCodec's InputBuffer and encoded by the codec.

mediaCodec.queueInputBuffer(inputBufIndex, 0, byteConvertFrame.size, ptsUsec, 0)

You can retrieve the encoded data from MeidaCodec's OutputBuffer.

mediaCodec.getOutputBuffer(encoderStatus)

Add it to MediaMuxer.

4. End

Call the stop() and release() methods of MeidaCodec and MediaMuxer, respectively.

mediaCodec.stop()
mediaCodec.release()
mediaMuxer.stop()
mediaMuxer.release()

Use the contentResolver to close the file.

private fun closeMedia(uri: Uri) {
             val contentValues = ContentValues()
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                          contentValues.put(MediaStore.MediaColumns.IS_PENDING, 0)
             }
             try {
                          context.contentResolver.update(uri, contentValues, null, null)
             } catch (e: Exception) {
             e.printStackTrace()
             }
}

The most challenging part was video rendering, which was a first for me. In particular, optimizing for various devices involved a lot of considerations, so I had to think it through carefully. There were also many bugs, but the following two stood out the most.

First, Bitmap Memory Management

Bitmap Memory Management | Android Developers | Android Developers

Bitmap memory is such an important factor that it has its own dedicated page in the Android development documentation. For this project, we ended up generating over 100 bitmaps to ensure smooth video frames. If we were to keep all of these bitmaps in a list at once, OutOfMemoryError An error might have occurred. To avoid this, I started MediaCodec and MediaMuxer first, then loaded the bitmaps one by one. To free up memory quickly, recycle()I set it up to call that.

Although implementing it synchronously does take a bit of time, it ensures that it runs smoothly even on low-spec devices.

Second, codec optimization for low-end devices

On low-end devices, limitations in supported codec performance may prevent rendering or cause playback issues. (Galaxy J7 codec screenshot) To resolve this, we modified the system to ensure videos are encoded at an appropriate resolution based on the information for each codec in the MediaCodecList.

Resolution support range available in MediaCodecInfo

If you encode at a fixed resolution or a resolution that's too low, the pixels may appear pixelated. That's why device optimization is important!

I really enjoyed working on this challenging and exciting project. It was a meaningful project from which I learned a great deal. Thank you to all the senior developers who provided so much help. 😊

Do you still have questions? 👀

Curious about the app development team’s culture? 👉Click here
Who’s the star of the Wadiz Praise Relay in the app development team? 👉Click here