34,333
edits
Changes
no edit summary
Create a new project in Android Studio, entering SceneTransitions into the Application name field and ebookfrenzy.com as the Company Domain setting before clicking on the Next button.
On the form factors screen, enable the Phone and Tablet option and set the minimum SDK setting to API 19: Android 4.4 (KitKat). Continue to proceed through the screens, requesting the creation of a blank activity named SceneTransitionsActivity with a corresponding layout and menu files named activity_scene_transitionsand menu_scene_transitions.
== Identifying and Preparing the Root Container ==
When working with transitions it is important to identify the root container for the scenes. This is essentially the parent layout container into which the scenes are going to be displayed. When the project was created, Android Studio created a layout resource file in the SceneTransitions -> app -> src -> main -> res -> layout folder named activity_scene_transitions.xml and containing a single RelativeLayout container and TextView. When the application is launched, this is the first layout that will be displayed to the user on the device screen and for the purposes of this example, the RelativeLayout container within this layout will act as the root container for the two scenes.
Begin by locating the activity_scene_transitions.xml layout resource file and loading it into the Android Studio Designer tool. Switch to Design mode if necessary, select the “Hello World!” TextView object and delete it from the layout using the keyboard delete key. Double click on the white layout background and in the resulting panel change the view’s ID property to @+id/rootContainer.
== Designing the First Scene ==
The first scene is going to consist of a relative layout containing three button views. Create this layout resource file by right clicking on the SceneTransitions -> app -> src -> main -> res -> layout entry in the Project tool window and selecting the New -> Layout resource file… menu option. In the resulting dialog, name the file scene1_layout and select RelativeLayout as the root element before clicking on OK.
When the newly created layout file has loaded into the Designer tool drag a Button view from the Widgets section of the palette onto the layout canvas and position it in the top left hand corner of the layout view so that the alignParentLeft and alignParentTop properties are displayed as illustrated in Figure 30-1. Drop the Button view at this position, double click on it and change the text property to “One”. Select the light bulb icon, click on the I18N message and extract the string to a resource named one_string.
[[Image:android_studio_scene_transitions_top_leftandroid_studio_scene_transitions_top_left2.png|Adding a button to an Android Studio layout]]
Figure 30-1
[[Image:android_studio_transition_scene1_uiandroid_studio_transition_scene1_ui2.png|Scene 1 of an Android Studio Scene Transition Tutorial]]
Figure 30-2
The second scene is simply a modified version of the first scene. The first and second buttons will still be present but will be located in the bottom right and left hand corners of the layout respectively. The third button, on the other hand, will no longer be present in the second scene.
For the purposes of avoiding duplicated effort, the layout file for the second scene will be created by copying and modifying the scene1_layout.xml file. Within the Project tool window, locate the app -> src -> main -> res -> layout -> scene1_layout.xml file, right click on it and select the Copy menu option. Right click on the layout folder, this time selecting the Paste menu option and change the name of the file to scene2_layout.xml when prompted to do so.
Double click on the new scene2_layout.xml file to load it into the Designer tool and switch to Design mode if necessary. Select and delete the “Three” button and move the first and second buttons to the bottom right and bottom left locations as illustrated in Figure 30-3:
[[Image:android_studio_scene2_layoutandroid_studio_scene2_layout2.png|Scene 2 of an Android Studio Scene Transition Tutorial]]
Figure 30-3
== Adding the Transition File ==
All of the transition effects for this project will be implemented within a single transition XML resource file. As outlined in the chapter entitled [[Animating User Interfaces in Android Studio using the Transitions Framework]], transition resource files must be placed in the SceneTransitions -> app -> src -> res -> transition folder of the project. Begin, therefore, by right clicking on the res folder in the Project tool window and selecting the New -> Directory menu option. In the resulting dialog, name the new folder transition and click on the OK button. Right click on the new transition folder, this time selecting the New -> File option and name the new file transition.xml.
With the newly created transition.xml file selected and loaded into the editing panel, add the following XML content to add a transition set that enables the change bounds transition animation with a duration attribute setting:
