How to animate a LinearLayout to look like a header sliding from right to left?
1. First design a layout file that contains the LinearLayout to which you want to set slide animation.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<fragment
android:id="@+id/map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.google.android.gms.maps.SupportMapFragment" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:background="@drawable/transparent"
android:gravity="center_vertical"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:background="@drawable/shape4"
android:gravity="center_vertical|left"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/map_small" />
<TextView
android:id="@+id/app_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff"
android:textStyle="bold" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" >
</View>
<ProgressBar
android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/btn_showlayout"
android:layout_width="40dp"
android:layout_height="60dp"
android:background="@drawable/touch" />
<Button
android:id="@+id/btn_hidelayout"
android:layout_width="40dp"
android:layout_height="60dp"
android:background="@drawable/touch" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/lay_holder"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/header"
android:gravity="center_vertical|left"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<EditText
android:id="@+id/txtPlace"
android:layout_width="150dp"
android:layout_height="40dp"
android:background="@drawable/shape1" />
<Button
android:id="@+id/btn_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/txtPlace"
android:background="@drawable/selector"
android:paddingBottom="7dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="7dp"
android:text="@string/str_btn_find"
android:textColor="#ffffff" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:background="@drawable/transparent"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="@+id/txtDistLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff" />
<TextView
android:id="@+id/txtDistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="__"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/transparent"
android:gravity="bottom"
android:orientation="vertical" >
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" >
</View>
<com.google.ads.AdView
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="@+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="a15158707aecde1"
android:gravity="bottom|center_horizontal" />
</LinearLayout>
<LinearLayout>
</LinearLayout>
</RelativeLayout>
Note: Set the visibility of the LinearLayout you want to set animation to 'View.INVISIBLE'.
2. Add the following two methods to your activity class file:
public void animateLayout(){
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(250);
set.addAnimation(animation);
animation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f );
animation.setDuration(900);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.25f);
holder.setLayoutAnimation(controller);
holder.startAnimation(animation);
holder.setVisibility(View.VISIBLE);
}
public void animateLayoutBack(){
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(1.0f, 0.0f);
animation.setDuration(900);
set.addAnimation(animation);
animation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f );
animation.setDuration(1150);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.25f);
holder.setLayoutAnimation(controller);
holder.startAnimation(animation);
holder.setVisibility(View.INVISIBLE); }
3. There will be two buttons set in same positions using relative layouts. When show button is clicked, it is set invisible, the LinearLayout scrolls from right to left and the hide hide button is set visible. Again when the Hide button is clicked, it is set invisible, the LinearLayout scrolls from left to right and is set invisible and the show button is set visible.
The method for performing the click of the two buttons are given below:
@Override public void onClick(View v) {
if(v == btnShowLayout){
btnShowLayout.setVisibility(View.INVISIBLE);
btnHideLayout.setVisibility(View.VISIBLE);
animateLayout();
} if(v == btnHideLayout){
btnShowLayout.setVisibility(View.VISIBLE);
btnHideLayout.setVisibility(View.INVISIBLE);
holder.setVisibility(View.INVISIBLE);
animateLayoutBack(); }
}
Enjoy coding ! :)
1. First design a layout file that contains the LinearLayout to which you want to set slide animation.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<fragment
android:id="@+id/map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.google.android.gms.maps.SupportMapFragment" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:background="@drawable/transparent"
android:gravity="center_vertical"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:background="@drawable/shape4"
android:gravity="center_vertical|left"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/map_small" />
<TextView
android:id="@+id/app_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff"
android:textStyle="bold" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" >
</View>
<ProgressBar
android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/btn_showlayout"
android:layout_width="40dp"
android:layout_height="60dp"
android:background="@drawable/touch" />
<Button
android:id="@+id/btn_hidelayout"
android:layout_width="40dp"
android:layout_height="60dp"
android:background="@drawable/touch" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/lay_holder"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/header"
android:gravity="center_vertical|left"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<EditText
android:id="@+id/txtPlace"
android:layout_width="150dp"
android:layout_height="40dp"
android:background="@drawable/shape1" />
<Button
android:id="@+id/btn_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/txtPlace"
android:background="@drawable/selector"
android:paddingBottom="7dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="7dp"
android:text="@string/str_btn_find"
android:textColor="#ffffff" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:background="@drawable/transparent"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="@+id/txtDistLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff" />
<TextView
android:id="@+id/txtDistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="__"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/transparent"
android:gravity="bottom"
android:orientation="vertical" >
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1" >
</View>
<com.google.ads.AdView
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="@+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="a15158707aecde1"
android:gravity="bottom|center_horizontal" />
</LinearLayout>
<LinearLayout>
</LinearLayout>
</RelativeLayout>
Note: Set the visibility of the LinearLayout you want to set animation to 'View.INVISIBLE'.
2. Add the following two methods to your activity class file:
public void animateLayout(){
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(250);
set.addAnimation(animation);
animation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f );
animation.setDuration(900);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.25f);
holder.setLayoutAnimation(controller);
holder.startAnimation(animation);
holder.setVisibility(View.VISIBLE);
}
public void animateLayoutBack(){
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(1.0f, 0.0f);
animation.setDuration(900);
set.addAnimation(animation);
animation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f );
animation.setDuration(1150);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.25f);
holder.setLayoutAnimation(controller);
holder.startAnimation(animation);
holder.setVisibility(View.INVISIBLE); }
3. There will be two buttons set in same positions using relative layouts. When show button is clicked, it is set invisible, the LinearLayout scrolls from right to left and the hide hide button is set visible. Again when the Hide button is clicked, it is set invisible, the LinearLayout scrolls from left to right and is set invisible and the show button is set visible.
The method for performing the click of the two buttons are given below:
@Override public void onClick(View v) {
if(v == btnShowLayout){
btnShowLayout.setVisibility(View.INVISIBLE);
btnHideLayout.setVisibility(View.VISIBLE);
animateLayout();
} if(v == btnHideLayout){
btnShowLayout.setVisibility(View.VISIBLE);
btnHideLayout.setVisibility(View.INVISIBLE);
holder.setVisibility(View.INVISIBLE);
animateLayoutBack(); }
}
Enjoy coding ! :)