So im trying to animate when i set the visibility of a linearlayout with other widgets, from GONE to VISIBLE and the opposite.Im using togglebuttons to show and hide. Here's an image to show what i want to do:
I can show and hide, but im not following how can i animate the sliding correctly....:(
Heres my xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<ScrollView
android:id="@+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<!-- TITULO1 -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:background="#848284"
android:padding="4px">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView01"
android:text="Informação Geral"
android:textColor="#FFFFFF"
android:gravity="left"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center_vertical"
android:textSize="18px"
android:paddingLeft="4px">
</TextView>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px">
<ToggleButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textOff="Expandir"
android:textOn="Minimizar"
android:id="@+id/mostrar"
android:width="80px">
</ToggleButton>
</LinearLayout>
</LinearLayout>
<!--LINHA SEPARADORA-->
<View
android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="2px">
</View>
<!-- CONTENT INITIALLY HIDDEN (GONE) -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="@+id/informgeral"
android:orientation="vertical">
<LinearLayout
android:id="@+id/LinearLayout01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingBottom="5px"
android:paddingTop="5px"
android:paddingLeft="8px"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/consult_nrprocesso"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:ellipsize="end"
android:layout_width="wrap_content"
android:singleLine="true"
android:text="@string/srch_number_proc"/>
<TextView
android:id="@+id/consult_nrprocessovalue"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:singleLine="true"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:id="@+id/consult_tipoprocinfo"
android:text="Numero Atribuido ao Processo"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="wrap_content"
android:textSize="12px"/>
</LinearLayout>
</LinearLayout>
<View
android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="1px">
</View>
<LinearLayout
android:id="@+id/LinearLayout02"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="5px"
android:paddingBottom="5px"
android:layout_width="fill_parent"
android:paddingLeft="8px">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/consult_tipoproc"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:ellipsize="end"
android:layout_width="wrap_content"
android:singleLine="true"
android:text="@string/proc_type"/>
<TextView
android:id="@+id/consult_tipoprocvalue"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:singleLine="true"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:id="@+id/consult_tipoprocinfo"
android:text="Variante do Processo em causa"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="wrap_content"
android:textSize="12px"/>
</LinearLayout>
</LinearLayout>
<View android:id="@+id/View01"
android:layout_width="fill_parent"
android:background="#B5B5B5"
android:layout_height="1px">
</View>
<LinearLayout
android:id="@+id/LinearLayout03"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="5px"
android:paddingBottom="5px"
android:layout_width="fill_parent"
android:paddingLeft="8px">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/consult_etapa"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:ellipsize="end"
android:layout_width="wrap_content"
android:singleLine="true"
android:text="@string/srch_task"/>
<TextView
android:id="@+id/consult_etapavalue"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:singleLine="true"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:id="@+id/consult_etapainfo"
android:text="Etapa onde se encontra o processo"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="wrap_content"
android:textSize="12px"/>
</LinearLayout>
</LinearLayout>
<View android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="1px">
</View>
<LinearLayout
android:id="@+id/LinearLayout04"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="5px"
android:paddingBottom="5px"
android:layout_width="fill_parent"
android:paddingLeft="8px">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/consult_criadopor"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:ellipsize="end"
android:layout_width="wrap_content"
android:singleLine="true"
android:text="@string/criado_por"/>
<TextView
android:id="@+id/consult_criadoporvalue"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:singleLine="true"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:id="@+id/consult_criadoporinfo"
android:text="Entidade responsável pela criação do Processo."
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="wrap_content"
android:textSize="12px"/>
</LinearLayout>
</LinearLayout>
<View android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="1px">
</View>
<LinearLayout
android:id="@+id/LinearLayout05"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="5px"
android:paddingBottom="5px"
android:layout_width="fill_parent"
android:paddingLeft="8px">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/consult_assunto"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:ellipsize="end"
android:layout_width="wrap_content"
android:singleLine="true"
android:text="@string/proc_subject"/>
<TextView
android:id="@+id/consult_assuntovalue"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:singleLine="true"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:id="@+id/consult_assuntoinfo"
android:text="Assunto do Processo"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="wrap_content"
android:textSize="12px"/>
</LinearLayout>
</LinearLayout>
<View android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="1px">
</View>
<LinearLayout
android:id="@+id/LinearLayout05"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="5px"
android:paddingBottom="5px"
android:layout_width="fill_parent"
android:paddingLeft="8px">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/consult_datainicio"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:ellipsize="end"
android:layout_width="wrap_content"
android:singleLine="true"
android:text="@string/srch_datebeg"/>
<TextView
android:id="@+id/consult_datainiciovalue"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:singleLine="true"
android:ellipsize="end"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView
android:id="@+id/consult_dataincioinfo"
android:text="Data da criação do Processo"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="wrap_content"
android:textSize="12px"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- TITULO2 -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:background="#848284" android:padding="4px">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView01"
android:text="Informação Complementar"
android:textColor="#FFFFFF"
android:gravity="left"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center_vertical" android:paddingLeft="4px" android:textSize="16px">
</TextView>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="right|center_vertical"
android:gravity="right|center_vertical"
android:paddingTop="2px">
<ToggleButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textOff="Expandir"
android:textOn="Minimizar"
android:id="@+id/mostrar2"
android:width="80px">
</ToggleButton>
</LinearLayout>
</LinearLayout>
<View
android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="2px">
</View>
<!-- TITULO3 -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:background="#848284"
android:padding="4px">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView01"
android:text="Documentos Anexados"
android:textColor="#FFFFFF"
android:gravity="left"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center_vertical"
android:textSize="18px"
android:paddingLeft="4px">
</TextView>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="right|center_vertical"
android:gravity="right|center_vertical"
android:paddingTop="2px">
<ToggleButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textOff="Expandir"
android:textOn="Minimizar"
android:id="@+id/mostrar"
android:width="80px">
</ToggleButton>
</LinearLayout>
</LinearLayout>
<!--LINHA SEPARADORA-->
<View
android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="2px">
</View>
<!-- TITULO4 -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:background="#848284"
android:padding="4px">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView01"
android:text="Etapas"
android:textColor="#FFFFFF"
android:gravity="left"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center_vertical"
android:textSize="18px"
android:paddingLeft="4px">
</TextView>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="right|center_vertical"
android:gravity="right|center_vertical"
android:paddingTop="2px">
<ToggleButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textOff="Expandir"
android:textOn="Minimizar"
android:id="@+id/mostrar"
android:width="80px">
</ToggleButton>
</LinearLayout>
</LinearLayout>
<!--LINHA SEPARADORA-->
<View
android:id="@+id/View01"
android:layout_width="wrap_content"
android:background="#B5B5B5"
android:layout_height="2px">
</View>
</LinearLayout>
</ScrollView>
And here's the java code that calls the button event:
final ToggleButton bt=(ToggleButton) findViewById(R.id.mostrar);
bt.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
if (bt.isChecked()) {
/*TranslateAnimation slide = new TranslateAnimation(0, 0, 0,
-findViewById(R.id.informgeral).getHeight()*2);
slide.setDuration(500);
slide.setFillAfter(true);
findViewById(R.id.informgeral).startAnimation(slide);*/
findViewById(R.id.informgeral).setVisibility(View.VISIBLE);;
} else {
/* TranslateAnimation slide = new TranslateAnimation(0, 0, 0,
findViewById(R.id.informgeral).getHeight());
slide.setDuration(500);
slide.setFillAfter(true);
findViewById(R.id.informgeral).startAnimation(slide);*/
//findViewById(R.id.listBut).startAnimation(slide);
findViewById(R.id.informgeral).setVisibility(View.GONE);;
}
}
});
You can use the expandable list view explained in API demos to show groups
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/ExpandableList1.html.
To animate the list items motion, you will have to override the getView method and apply translate animation on each list item. The values for animation depend on the position of each list item. This was something which i tried on a simple list view long time back.
You probably want to use an ExpandableListView, a special ListView that allows you to open and close groups.
Visibility change itself can be easy animated by overriding setVisibility method. Look at complete code: