Expandable ListView causing trouble with layout

Question

I have Expandable ListView and a lot of other elements in my layout. This is xml code:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<ExpandableListView
    android:id="@+id/lvExp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/dayTime"
    android:layout_below="@+id/imageView2" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/imageView3"
    android:background="@drawable/day_time_color" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/imageView2"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="26dp"
    android:text="Izberi Letnik" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/header_logo" />

<ImageView
    android:id="@+id/dayTime"
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:layout_above="@+id/socialMedia"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:background="@drawable/day_time_color" />

<ImageView
    android:id="@+id/socialMedia"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/kontakt"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:background="@drawable/social_media_color" />

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:background="@drawable/light_blue" />

<ImageView
    android:id="@+id/kontakt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/imageView1"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:background="@drawable/kontakt_color" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/textView2"
    android:layout_alignBottom="@+id/textView2"
    android:layout_toRightOf="@+id/textView2"
    android:text="- URNIKI"
    android:textColor="#42BDCF" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView1"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="44dp"
    android:layout_marginTop="20dp"
    android:text="STPŠ TRBOVLJE "
    android:textColor="#8AAB28" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/textView4"
    android:layout_alignBottom="@+id/textView4"
    android:layout_toRightOf="@+id/textView4"
    android:text="PONEDELJEK*"
    android:textColor="#acc84d"
    android:textSize="18dp" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/textView5"
    android:layout_alignBottom="@+id/textView5"
    android:layout_toLeftOf="@+id/textView7"
    android:text="ČAS: " />

<TextView
    android:id="@+id/textView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/textView6"
    android:layout_alignBottom="@+id/textView6"
    android:layout_alignParentRight="true"
    android:layout_marginRight="35dp"
    android:text="14:25*"
    android:textColor="#acc84d"
    android:textSize="18dp" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/dayTime"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="13dp"
    android:layout_marginLeft="15dp"
    android:text="DANES: "
    android:textColor="#5e5e60" />

This is how it looks like in preview:

enter image description here

I have two problems here. First is that I don't know how big exactly the Expandable ListView will be on the screen and when rows are expanded, I want them to push other layout elements down. Is it possible to do that?

The second problem is the scrollview. If I try to change the height so that I can put more elements in the layout and make it scrollable this happens:

enter image description here

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

First of all NEVER EVER put a [Expandable]ListView into ScrollableView!

Secondly both ExpandableListView, and ListView offer you the ability to add a Header or a Footer, and it seems like exactly what you need

Here's a link that may give you a little bit more info: How to add a footer in ListView?

Unfortunately (as for now) it's impossible to add Footers or Headers in XML, so you'll have to
do it in Java.

edit (example layouts)

expandable_list.xml:

<ExpandableListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lvExp"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

expandable_list_footer.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/imageView3"
        android:background="@drawable/day_time_color" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/imageView2"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="26dp"
        android:text="Izberi Letnik" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/header_logo" />

    <ImageView
        android:id="@+id/dayTime"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_above="@id/socialMedia"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/day_time_color" />

    <ImageView
        android:id="@+id/socialMedia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/kontakt"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/social_media_color" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/light_blue" />

    <ImageView
        android:id="@+id/kontakt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/imageView1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/kontakt_color" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView2"
        android:layout_alignBottom="@id/textView2"
        android:layout_toRightOf="@id/textView2"
        android:text="- URNIKI"
        android:textColor="#42BDCF" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/textView1"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="44dp"
        android:layout_marginTop="20dp"
        android:text="STPŠ TRBOVLJE "
        android:textColor="#8AAB28" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView4"
        android:layout_alignBottom="@id/textView4"
        android:layout_toRightOf="@id/textView4"
        android:text="PONEDELJEK*"
        android:textColor="#acc84d"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView5"
        android:layout_alignBottom="@id/textView5"
        android:layout_toLeftOf="@id/textView7"
        android:text="ČAS: " />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView6"
        android:layout_alignBottom="@id/textView6"
        android:layout_alignParentRight="true"
        android:layout_marginRight="35dp"
        android:text="14:25*"
        android:textColor="#acc84d"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/dayTime"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="13dp"
        android:layout_marginLeft="15dp"
        android:text="DANES: "
        android:textColor="#5e5e60" />

</RelativeLayout>

But it seems like I am only allowed to add a footer and header. As you can see I need to add multipled "footers". Well not exactly "footers" but a few different imageviews with background which have a lot of dynamic textviews in them. — Guy, Sep 04 '13 at 21:00
I don't think I follow. Do you need to add a footer after EACH sub-List? If you need only one, but combined from multitude of images/elements, you can put them all in one ex. `` and then include it. — meeDamian, Sep 04 '13 at 21:11
Also you write `@+id/` **only** in `android:id="@+id/"` in any other case you omit the plus sign, since it indicates creation of a new ID. — meeDamian, Sep 04 '13 at 21:21
I got it! I needed some time to get the header and footer thing but I got it now. Works like a charm. Thank you! — Guy, Sep 04 '13 at 21:28

Expandable ListView causing trouble with layout

1 Answers1

edit (example layouts)