How can I adjust the size deppending on the visible content in an android view?

Question

I'm creating a list view in an android app and each item expands and collapses.

Here is each item's code:

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/alarme_layout"
    android:backgroundTint="@color/colorPrimaryDark"
    android:padding="20dp">

    <TextView
        android:id="@+id/textView_aHora"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:text="00:00"
        android:textSize="26sp"
        android:textColor="@color/colorOnPrimary"
        android:layout_marginBottom="10dp"/>

    <Switch
        android:id="@+id/switch_aEstado"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />

    <LinearLayout
        android:id="@+id/layout_ultimaLinhaCollapsed"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView_aHora"
        android:layout_alignParentStart="true">

        <LinearLayout
            android:id="@+id/layout_diasRepetir"
            android:orientation="horizontal"
            android:layout_width="0px"
            android:layout_weight=".9"
            android:layout_height="25dp">
        </LinearLayout>

        <ImageView
            android:id="@+id/imageView_arrowDown"
            android:layout_width="0px"
            android:layout_weight=".1"
            android:layout_height="wrap_content"
            android:tint="@color/colorOnPrimary"
            android:src="@drawable/ic_keyboard_arrow_down_24dp"
            android:focusable="true"
            android:clickable="true"/>
    </LinearLayout>


    <RelativeLayout
        android:id="@+id/layout_detalhesExpanded"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView_aHora">

        <CheckBox
            android:id="@+id/checkbox_repetir"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:text="@string/repetir"
            android:textColor="@color/colorOnPrimary"
            android:foregroundTint="@color/colorSecondary"/>

        <LinearLayout
            android:id="@+id/layout_diasRepetirButtons"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/checkbox_repetir"
            android:layout_alignStart="@+id/checkbox_repetir"
            android:layout_marginTop="10dp"
            android:visibility="invisible">
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ultimaLinhaExpanded"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/layout_diasRepetirButtons"
            android:layout_marginTop="10dp">

            <EditText
                android:id="@+id/editText_mensagem"
                android:layout_width="0px"
                android:layout_weight=".9"
                android:layout_height="wrap_content"
                android:hint="@string/mensagemHint"
                android:inputType="text"
                android:backgroundTint="@color/colorOnPrimary"
                android:foregroundTint="@color/colorSecondary"
                android:textColor="@color/colorSecondary"
                android:shadowColor="@color/colorSecondary"
                android:textColorHighlight="@color/colorSecondaryLight" />

            <ImageView
                android:id="@+id/imageView_arrowUp"
                android:layout_width="0px"
                android:layout_weight=".1"
                android:layout_height="wrap_content"
                android:tint="@color/colorOnPrimary"
                android:src="@drawable/ic_keyboard_arrow_up_24dp"
                android:focusable="true"
                android:clickable="true"/>
        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

And here is the "getView()" method of list view:

public View getView(final int position, View convertView, ViewGroup parent) {
            convertView = getLayoutInflater().inflate(R.layout.alarme, null);

            final Alarme alarme = alarmes.get(position);
            //main view
            TextView hora = convertView.findViewById(R.id.textView_aHora);
            Switch estado = convertView.findViewById(R.id.switch_aEstado);
            LinearLayout layoutDiasRepetir = convertView.findViewById(R.id.layout_diasRepetir);
            final ImageView arrowDown = convertView.findViewById(R.id.imageView_arrowDown);

            //detalhes
            final RelativeLayout layoutDetalhesExpanded = convertView.findViewById(R.id.layout_detalhesExpanded);
            CheckBox cbRepetir = convertView.findViewById(R.id.checkbox_repetir);
            LinearLayout layoutDiasRepetirButtons = convertView.findViewById(R.id.layout_diasRepetirButtons);
            EditText editText = convertView.findViewById(R.id.editText_mensagem);
            final ImageView arrowUp = convertView.findViewById(R.id.imageView_arrowUp);

            layoutDetalhesExpanded.setVisibility(View.INVISIBLE);
            hora.setText(alarme.getHora());
            estado.setChecked(alarme.isLigado());
            cbRepetir.setChecked(alarme.isRepete());

            arrowDown.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    arrowDown.setVisibility(View.INVISIBLE);
                    arrowUp.setVisibility(View.VISIBLE);
                    layoutDetalhesExpanded.setVisibility(View.VISIBLE);
                    alarme.setCollapsed(false);
                }
            });

            arrowUp.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    arrowUp.setVisibility(View.INVISIBLE);
                    arrowDown.setVisibility(View.VISIBLE);
                    layoutDetalhesExpanded.setVisibility(View.INVISIBLE);
                    alarme.setCollapsed(true);
                }
            });

            editText.addTextChangedListener(new TextWatcher() {
                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {

                }

                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {

                }

                @Override
                public void afterTextChanged(Editable s) {
                    alarme.setMensagem(s.toString());
                }
            });

            arrowDown.setVisibility(alarme.isCollapsed() ? View.VISIBLE : View.INVISIBLE);
            arrowUp.setVisibility(alarme.isCollapsed() ? View.INVISIBLE : View.VISIBLE);
            layoutDetalhesExpanded.setVisibility(alarme.isCollapsed() ? View.INVISIBLE : View.VISIBLE);
            editText.setText(alarme.getMensagem());

            return convertView;
        }

I thought each item would have its size wrapped depending on the visible content, but I have this result instead:

This is the item when expanded: https://imgur.com/gallery/oIv50dT

This is the item when collapsed: https://imgur.com/gallery/dmzw5GU

I wanted the collapsed item to have its size wrapped to the content.

Answer 1

I am going to guess here that in your XML layout you have set a static height.

You need to set it to be wrap_content which allows for dynamic row heights.

Answer 2

我通过改变从意见能见度解决它View.INVISIBLE到View.GONE 。