Sunday, March 16, 2014

Android ListView into ScrollView issue | How to put Listview into ScrollView in Android | Layout-Inflater Example in Android

Hello Friends,

Many days ago I published a post on "ListView into ScrollView in Android", check this url-
http://www.androidhub4you.com/2012/12/listview-into-scrollview-in-android.html

But in case of custom list-view and in other case it not work fine so I relies that I should publish a post on this issue. Actually in Android we should not use list-view inside scroll-view because both used same vertically touch gesture so we face trouble in our UI part.

For this issue we should use Linear or Relative Layout to add our item inside that instead of list-view using Layout-Inflater. See below how I did it-






Step 1-

Replace your list-view with Linear Layout-

<ScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/textView1" >

        <LinearLayout
            android:id="@+id/linear_scroll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/linear_listview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/bottom_item"
                android:layout_gravity="center"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:layout_marginTop="5dp"
                android:text="@string/androidhub4you" />
        </LinearLayout>
    </ScrollView>


See this is- android:id="@+id/linear_listview" , I will add item in this linear layout.

Step 2-

Create row.xml for your custom list-view items. In case of simple list-view you don't need it.

<?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"
    android:orientation="vertical"
    android:padding="10dp" >

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

        <TextView
            android:id="@+id/textViewName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:textSize="18sp"
            android:textColor="#000000"
            android:text="@string/app_name" />

        <TextView
            android:id="@+id/textViewLastName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
             android:textSize="16sp"
            android:layout_marginLeft="5dp"
            android:textColor="#000000"
            android:text="@string/app_name" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:background="#808080" />


</LinearLayout>

Step 3-

Most Important step is adding item using Layout-Infaltor-

       /***
               * adding item into listview
               */
              for (int i = 0; i < mArrayListData.size(); i++) {
                     /**
                      * inflate items/ add items in linear layout instead of listview
                      */
                     LayoutInflater inflater = null;
                     inflater = (LayoutInflater) getApplicationContext()
                                  .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                     View mLinearView = inflater.inflate(R.layout.row, null);
                     /**
                      * getting id of row.xml
                      */
                     TextView mFirstName = (TextView) mLinearView
                                  .findViewById(R.id.textViewName);
                     TextView mLastName = (TextView) mLinearView
                                  .findViewById(R.id.textViewLastName);

                     /**
                      * set item into row
                      */
                     final String fName = mArrayListData.get(i).getmFirstName();
                     final String lName = mArrayListData.get(i).getmLastName();
                     mFirstName.setText(fName);
                     mLastName.setText(lName);

                     /**
                      * add view in top linear
                      */

                     mLinearListView.addView(mLinearView);

                     /**
                      * get item row on click
                      *
                      */
                     mLinearView.setOnClickListener(new OnClickListener() {

                           @Override
                           public void onClick(View v) {
                                  // TODO Auto-generated method stub
                                  Toast.makeText(MainActivity.this, "Clicked item;" + fName,
                                                Toast.LENGTH_SHORT).show();
                           }
                     });
              }

       

Thanks!


9 comments:

  1. Hello,

    First of all, thank you for your example, it works so well. But I still have one problem: How can I add a contextmenu and get the object on this way? (contextmenus is working but I don't find the way to get the object).

    thanks in advance

    ReplyDelete
  2. This only works for small list of items. If you have a list of 100 or so items you are going to create all of those views which is slow. The list view does visualization by reusing the views which is way it's so fast. I believe android L has fixed this issues by propagating the touch events up the hierarchy for this exact reason.

    ReplyDelete
    Replies
    1. I am agree with you but what to do if we needed scroll view with list view? So I think only this way is good and yes me to waiting for android L let us see whats new Google provide for developers :)

      Delete
  3. bt what to do If i want to update info frequently i.e likes ,report user
    etc.

    ReplyDelete
  4. how to update data frequently likes get likes on tapping likes button etc.

    ReplyDelete
    Replies
    1. I think you will store like and other detail on server so get them from there and update your view. And yes you are right noyifydatasetchange will not work.

      Delete
    2. Yes guys you are right linear view will not provide all feature of listview, you have to implement your own logic for your problems and requirement. We are really very poor because Android sdk does not provide any view for this problem.

      Delete