Search code examples
androidandroid-listviewandroid-linearlayoutandroid-dialog

Android how to fit listview in Dialog

I have problems to fit my ListView in a Popup Dialog when the ListView contains more than 12 ListItems. Is there any attribute I'm missing here or do I have to calculate the max size by myself in code behind?

My Layout looks like this when everything fit perfectly:

enter image description here

And when I have too many Items, as you can see my LinearLayout below the listview and Button disappear.

enter image description here

Here is my Layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/backgroundgradient" android:orientation="vertical">
    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:background="@drawable/border" android:orientation="vertical">
            <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:orientation="horizontal">
                <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="Caption" android:textAppearance="?android:attr/textAppearanceMedium" />
            </RelativeLayout>
            <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                <TextView style="@style/dialog_label" android:text="test" />
                <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                <TextView style="@style/dialog_label" android:text="test" />
                <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                <TextView style="@style/dialog_label" android:text="test" />
                <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                <TextView style="@style/dialog_label" android:text="test" />
                <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:background="@drawable/border" android:orientation="vertical">
            <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp">
                <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="Caption" android:textAppearance="?android:attr/textAppearanceMedium" />
            </RelativeLayout>
            <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@android:color/transparent" android:dividerHeight="3dp" android:paddingTop="3dp" android:paddingStart="3dp" android:paddingEnd="1dp" android:choiceMode="singleChoice" android:listSelector="@drawable/selector_list_item"></ListView>
        </LinearLayout>
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="vertical">
            <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:background="@drawable/border" android:orientation="vertical">
                <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
                    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp">
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Caption" android:textAppearance="?android:attr/textAppearanceMedium" />
                    </RelativeLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
                        <TextView style="@style/dialog_label" android:text="test" />
                        <TextView style="@style/dialog_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="vertical">
            <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_weight="1" android:paddingLeft="2dp" android:paddingRight="2dp" android:text="OK" android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>
Solution

  • You can do this in two ways:

    FIRST:

    Put everything, or exactly what you want, into a "ScrollView" and your items will be scrolled no matter how many items you place.

    Ex.:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

       <!-- PUT EVERYTHING YOU WANT HERE -->

    </ScrollView>
</RelativeLayout>

    SECOND:

    Put all your items into ListView using an adapter and an item for the list:

    item_list.xml (in res > layout > New > XML > Layout XML File):

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_margin="20dp"
        android:id="@+id/item_text"
        android:text="Test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

    your list adapter (in java > yourPackageName > new > Kotlin File/Class):

    import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.TextView

class ListAdapter (private val context: Context, private val listItems: ArrayList<String>) : BaseAdapter() {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view = LayoutInflater.from(context).inflate(R.layout.item_list, null)

        val text = view.findViewById<TextView>(R.id.item_text)
        text.text = listItems[position]

        return view
    }

    //It doesn't matter right now
    override fun getItem(position: Int): Any {
        return ""
    }

    //It doesn't matter right now
    override fun getItemId(position: Int): Long {
        return 0
    }

    override fun getCount(): Int {
        return listItems.size
    }
}

    your activity_main.xml (where the ListView is:)

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Caption"
                    android:textAppearance="?android:attr/textAppearanceMedium" />
            </RelativeLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="test" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="test" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="test" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="test" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="" />
            </LinearLayout>
        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp">

            <RelativeLayout
                android:id="@+id/relative"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Caption"
                    android:textAppearance="?android:attr/textAppearanceMedium" />
            </RelativeLayout>

            <ListView
                android:id="@+id/myListView"
                android:layout_below="@id/relative"
                android:layout_above="@id/button"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:choiceMode="singleChoice"
                android:divider="@android:color/transparent"
                android:dividerHeight="3dp"
                android:paddingStart="3dp"
                android:paddingLeft="3dp"
                android:paddingTop="3dp"
                android:paddingBottom="3dp"
                android:paddingEnd="1dp"
                android:paddingRight="1dp"></ListView>

            <Button
                android:id="@+id/button"
                android:layout_alignParentBottom="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_weight="1"
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:text="OK"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

    MainActivity (where you call the adapter for the ListView):

    
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val itemsList = ArrayList(
            arrayListOf(
                "test", "test", "test", "test", "test", "test", "test", "test", "test", "test",
                "test", "test", "test", "test", "test", "test", "test", "test", "test", "test",
                "test", "test", "test", "test", "test", "test", "test", "test", "test", "test"
            )
        )

        myListView.adapter = ListAdapter(this, itemsList)

    }
}