Animating multiple views in Android efficiently

Question

I am currently making an application where the user will launch the app and the first this we see is the app logo fade in at the center of the screen. After about a second, the logo will translate up and the rest of the content will appear. I currently have a lot of code and wanted to know if this is the most efficient way of doing what I am doing. It seems like a lot of code for 3 animations.

search_logo_animation.xml:

<?xml version="1.0" encoding="utf-8"?>
<set
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillAfter="true">
 <alpha
 android:duration="800"
 android:fromAlpha="0.0"
 android:interpolator="@android:anim/accelerate_interpolator"
 android:toAlpha="1.0" />
 <translate
 android:duration="800"
 android:fillAfter="true"
 android:fromYDelta="0%p"
 android:startOffset="2000"
 android:toYDelta="-30%p" />
</set>

search_container_animation.xml:

<?xml version="1.0" encoding="utf-8"?>
<set
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillAfter="true">
 <alpha
 android:duration="800"
 android:fromAlpha="0.0"
 android:interpolator="@android:anim/accelerate_interpolator"
 android:toAlpha="1.0" />
</set>

search_button_animation.xml:

<?xml version="1.0" encoding="utf-8"?>
<set
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillAfter="true">
 <alpha
 android:duration="800"
 android:fromAlpha="0.0"
 android:interpolator="@android:anim/accelerate_interpolator"
 android:toAlpha="1.0" />
</set>

search.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/search"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/colorPrimary"
 tools:context=".Search">
 <ImageView
 android:id="@+id/searchLogo"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:contentDescription="@string/app_logo"
 android:visibility="invisible"
 android:src="@mipmap/ic_logo" />
 <LinearLayout
 android:id="@+id/searchContainer"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:layout_marginLeft="@dimen/search_container_margin_left"
 android:layout_marginStart="@dimen/search_container_margin_left"
 android:layout_marginRight="@dimen/search_container_margin_right"
 android:layout_marginEnd="@dimen/search_container_margin_right"
 android:paddingLeft="@dimen/search_container_padding_left"
 android:paddingStart="@dimen/search_container_padding_left"
 android:paddingRight="@dimen/search_container_padding_right"
 android:paddingEnd="@dimen/search_container_padding_right"
 android:paddingTop="@dimen/search_container_padding_top"
 android:paddingBottom="@dimen/search_container_padding_bottom"
 android:orientation="vertical"
 android:visibility="invisible"
 android:background="@drawable/search_container">
 <LinearLayout
 android:id="@+id/searchMakeContainer"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <TextView
 android:id="@+id/searchMakeLabel"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/make" />
 <TextView
 android:id="@+id/searchMakeSelection"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginLeft="@dimen/search_option_margin_left"
 android:layout_marginStart="@dimen/search_option_margin_left"
 android:textSize="@dimen/search_option_text_size"
 android:text="@string/any" />
 </LinearLayout>
 <LinearLayout
 android:id="@+id/searchModelContainer"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="@dimen/search_option_margin_top"
 android:orientation="vertical">
 <TextView
 android:id="@+id/searchModelLabel"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/model" />
 <TextView
 android:id="@+id/searchModelSelection"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginLeft="@dimen/search_option_margin_left"
 android:layout_marginStart="@dimen/search_option_margin_left"
 android:textSize="@dimen/search_option_text_size"
 android:text="@string/any" />
 </LinearLayout>
 </LinearLayout>
 <Button
 android:id="@+id/searchButton"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_below="@id/searchContainer"
 android:layout_marginLeft="@dimen/search_button_margin_left"
 android:layout_marginStart="@dimen/search_button_margin_left"
 android:layout_marginRight="@dimen/search_button_margin_right"
 android:layout_marginEnd="@dimen/search_button_margin_right"
 android:layout_marginTop="@dimen/search_button_margin_top"
 android:text="@string/search_listings"
 android:textColor="@android:color/white"
 android:textAllCaps="false"
 android:visibility="invisible"
 android:background="@drawable/search_button_selector" />
</RelativeLayout>

Search.java:

public class Search extends AppCompatActivity implements AnimationListener {
 ImageView searchLogo;
 LinearLayout searchContainer;
 Button searchButton;
 Animation searchLogoAnimation, searchContainerAnimation, searchButtonAnimation;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.search);
 searchLogo = (ImageView) findViewById(R.id.searchLogo);
 searchContainer = (LinearLayout) findViewById(R.id.searchContainer);
 searchButton = (Button) findViewById(R.id.searchButton);
 searchLogoAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.search_logo_animation);
 searchLogoAnimation.setAnimationListener(this);
 searchContainerAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.search_container_animation);
 searchContainerAnimation.setAnimationListener(this);
 searchButtonAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.search_button_animation);
 searchButtonAnimation.setAnimationListener(this);
 searchLogo.startAnimation(searchLogoAnimation);
 }
 @Override
 public void onAnimationEnd(Animation animation) {
 if (animation == searchLogoAnimation) {
 searchContainer.startAnimation(searchContainerAnimation);
 searchButton.startAnimation(searchButtonAnimation);
 }
 }
 @Override
 public void onAnimationRepeat(Animation animation) {
 }
 @Override
 public void onAnimationStart(Animation animation) {
 }
}

Answer 1

First of all you could define styles for your layout search.xml files in your /res/values/styles.xml:

 <style name="LayoutStyleWide"> 
 <item name="android:layout_width">match_parent</item>
 <item name="android:layout_height">wrap_content</item>
 </style>
 <style name="TextViewSelectionStyle" parent="@style/LayoutStyleWide">
 <item name="android:layout_marginLeft="@dimen/search_option_margin_left"</item>
 <item name="android:layout_marginStart="@dimen/search_option_margin_left"</item>
 <item name="android:textSize="@dimen/search_option_text_size"</item>
 <item name="android:text="@string/any"</item>
 </style>

etc.

Combine anything that views have in common in styles.

Part of your layout search.xml file then could look like this:

 <LinearLayout
 android:id="@+id/searchMakeContainer"
 style="@style/LayoutStyleWide"
 android:orientation="vertical">
 <TextView
 android:id="@+id/searchMakeLabel"
 style="@style/LayoutStyleWide"
 android:text="@string/make" />
 <TextView
 android:id="@+id/searchMakeSelection"
 style="@style/TextViewSelectionStyle"/>
 </LinearLayout>
 <LinearLayout
 android:id="@+id/searchModelContainer"
 style="@style/LayoutStyleWide"
 android:layout_marginTop="@dimen/search_option_margin_top"
 android:orientation="vertical">
 <TextView
 android:id="@+id/searchModelLabel"
 style="@style/LayoutStyleWide"
 android:text="@string/model" />
 <TextView
 android:id="@+id/searchModelSelection"
 style="@style/TextViewSelectionStyle"
 android:textSize="@dimen/search_option_text_size"/>
 </LinearLayout>

About your Java code:

Personally I like to keep my onCreate method clean and readable, so I`d separate these lines into methods:

 private void initializeViews() {
 searchLogo = (ImageView) findViewById(R.id.searchLogo);
 searchContainer = (LinearLayout) findViewById(R.id.searchContainer);
 searchButton = (Button) findViewById(R.id.searchButton);
 accelerate = new AccelerateInterpolator();
 }

Then you can replace your XML animations with these methods, which are more dynamic:

 private void animateAlpha(View view, float toAlpha,
 int duration, Interpolator interpolator) {
 view.animate().alpha(toAlpha).setDuration(duration).setInterpolator(interpolator);
 }
 private void animateTranslation(View view, float translateToX, 
 float translateToY, int duration, Interpolator interpolator, int startDelay){
 view.animate()
 .translationY(translateToY)
 .translationX(translateToX)
 .setDuration(duration)
 .setInterpolator(interpolator)
 .setStartDelay(startDelay)
 .setListener(this);
 }

This way you can extend and reuse the animation methods easily, and you can get rid of all your animation XML files because you are using ViewPropertyAnimator.

Since you are only using AccelerateInterpolator you can define it as a field too.

Your search.java then could look like this:

public class Search extends AppCompatActivity implements AnimationListener {
 ImageView searchLogo;
 LinearLayout searchContainer;
 Button searchButton;
 Interpolator accelerate;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.search);
 initializeViews();
 animateAlpha(searchLogo, 1.0f, 800, accelerate);
 animateTranslation(searchLogo, 0, -30, 800, accelerate, 2000); // I'll leave it to you to get the -30% ;) 
 }
 @Override
 public void onAnimationEnd(Animation animation) {
 animateAlpha(searchContainer, 1.0f, 800, accelerate);
 animateAlpha(searchButton, 1.0f, 800, accelerate); 
 }
 @Override
 public void onAnimationRepeat(Animation animation) {
 }
 @Override
 public void onAnimationStart(Animation animation) {
 }
 private void initializeViews() {
 searchLogo = (ImageView) findViewById(R.id.searchLogo);
 searchContainer = (LinearLayout) findViewById(R.id.searchContainer);
 searchButton = (Button) findViewById(R.id.searchButton);
 accelerate = new AccelerateInterpolator();
 }
 private void animateAlpha(View view, float toAlpha,
 int duration, Interpolator interpolator) {
 view.animate().alpha(toAlpha).setDuration(duration).setInterpolator(interpolator);
 }
 private void animateTranslation(View view, float translateToX, 
 float translateToY, int duration, Interpolator interpolator, int startDelay){
 view.animate()
 .translationY(translateToY)
 .translationX(translateToX)
 .setDuration(duration)
 .setInterpolator(interpolator)
 .setStartDelay(startDelay)
 .setListener(this);
 }
}

But after all, it's just a matter of taste...