Maxrunner Maxrunner - 1 month ago 13
Android Question

Animate visibility modes, GONE and VISIBLE

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:

enter image description here

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);;


}
}
});

Answer

Like tomash said before: There's no easy way.

You might want to take a look at my answer here.
It explains how to realize a sliding (dimension changing) view.
In this case it was a left and right view: Left expanding, right disappearing.
It's might not do exactly what you need but with inventive spirit you can make it work ;)

Comments