Photoshop Question posted in
The official user guide can be found here.

Expanding animation layout – Photoshop

I am starting to work with Android Studio and I am having some problems without my activity.

I would like to represent a layout, and after clicking on it, I would like to increase the size of it.

I think that MaterialDesign has a way to do that, but I do not really know how to do it.

I will explain it better with a couple of images:

  • Before than clicking on it

enter image description here

  • After clicking on it

enter image description here

The pictures are made by photoshop, not by coding.

So, what I want to do is to increase the size by the middle of the layout, like in the picture.

I was wondering if someone of you knows how to do it.

Thank you.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally got the solution. Just adding to the layout that you want to expand or collapse (and to any of the previous layouts) the following line

                    android:animateLayoutChanges="true"

    and working with the visibility of the layout you would be able to expand it or collapse it.

    Simple method, and it actually works.

    [EDITED]

    The main point of the solution if that you have to code some differents views. Some of the are hidden, and some of them are shown.

    The code needed is the followed:

    • Java Method required to show and hide all the views

      public class Principal_Activity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

       public void tratar_primer_ranking() {
    //Ranking extendido - cerrado
    RelativeLayout ranking_1_completo = (RelativeLayout) findViewById(R.id.ranking_1_completo);
    ranking_1_completo.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            RelativeLayout ocultar_layout_1_1 = (RelativeLayout) findViewById(R.id.ocultar_layout_1_1);
            RelativeLayout ocultar_layout_2_1 = (RelativeLayout) findViewById(R.id.ocultar_layout_2_1);
            LinearLayout ocultar_layout_4_1 = (LinearLayout) findViewById(R.id.ocultar_layout_4_1);
            if (!extendido_1) {
                ocultar_layout_1_1.setVisibility(View.GONE);
                ocultar_layout_2_1.setVisibility(View.VISIBLE);
                ocultar_layout_4_1.setVisibility(View.VISIBLE);
                extendido_1 = true;
            } else {
                ocultar_layout_1_1.setVisibility(View.VISIBLE);
                ocultar_layout_2_1.setVisibility(View.GONE);
                ocultar_layout_4_1.setVisibility(View.GONE);
                extendido_1 = false;
            }
        }
    });
}

      }

    • XML

              <RelativeLayout
            android:id="@+id/parte_1_ranking_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true">

            <ImageView

                android:id="@+id/verificable_1"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_marginLeft="50dp"
                android:layout_marginTop="7dp"
                android:background="@drawable/botonrojo" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:animateLayoutChanges="true"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imagen_categoria_1"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_margin="10dp"
                    android:background="@drawable/categoria_3" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:animateLayoutChanges="true"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxLength="60"
                        android:text="¿Cuántos toques al balón puedes dar con la pierna izquierda?"
                        android:textSize="15sp" />

                    <RelativeLayout
                        android:id="@+id/ocultar_layout_1_1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:animateLayoutChanges="true">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:animateLayoutChanges="true"
                            android:orientation="horizontal">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:animateLayoutChanges="true">

                                <ImageView
                                    android:layout_width="30dp"
                                    android:layout_height="30dp"
                                    android:layout_marginLeft="20dp"
                                    android:layout_marginTop="5dp"
                                    android:background="@drawable/ic_perfil" />

                                <TextView
                                    android:id="@+id/participantes_1_1"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginLeft="55dp"
                                    android:layout_marginTop="10dp"
                                    android:numeric="integer"
                                    android:text="17" />

                                <ImageView
                                    android:layout_width="30dp"
                                    android:layout_height="30dp"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginRight="50dp"
                                    android:layout_marginTop="5dp"
                                    android:background="@drawable/actualizacion" />

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:layout_marginRight="20dp"
                                    android:layout_marginTop="10dp"
                                    android:text="1d" />
                            </RelativeLayout>
                        </LinearLayout>
                    </RelativeLayout>
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout> <!--parte_1_ranking_1-->

  2. 0

    It’s not “basically”, sorry.

    The idea is to divide your layout into 3 pieces – ex. top, middle, bottom – and animate “middle” size change. Maybe, middle piece visibility change will also be needed.

    The realization may be rather hard, especially if you wish to scroll it back on second click.

    My own attempt was based on this example – https://github.com/Udinic/SmallExamples/tree/master/ExpandAnimationExample

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search