Thursday, March 20, 2014

Android Pagination Example | Dynamic Horizontal Paging demo in Android | Listview paging in android

Hello Friends,

Some time if you have more data in list and want to show them using pagination, one by one then follow my this post.


1)MainActivity.java

package com.androidhub4you.pagingnation;

/**
 * algorithm
 * 0-0,1,2,3
 * 1-4,5,6,7
 * 2-8,9,10,11
 * 3-12,13,14,15
 * n-postion*n and n++
 */

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.ListView;

/**
 *
 * @author manish
 *
 */
public class MainActivity extends Activity {

       private LinearLayout mLinearScroll;
       private ListView mListView;
       private ArrayList<String> mArrayListFruit;
       private ArrayList<String> mArrayListFruitTemp;
       // change row size according to your need, how many row you needed per page
       int rowSize = 5;

       @Override
       protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);

              mLinearScroll = (LinearLayout) findViewById(R.id.linear_scroll);
              mListView = (ListView) findViewById(R.id.listview1);

              /**
               * add item into arraylist
               */
              mArrayListFruit = new ArrayList<String>();
              mArrayListFruitTemp = new ArrayList<String>();

              mArrayListFruit.add("Apple1");
              mArrayListFruit.add("Apple2");
              mArrayListFruit.add("Apple3");
              mArrayListFruit.add("Apple4");
              mArrayListFruit.add("Apple5");
              mArrayListFruit.add("Apple6");
              mArrayListFruit.add("Apple7");
              mArrayListFruit.add("Apple8");
              mArrayListFruit.add("Apple9");
              mArrayListFruit.add("Apple10");
              mArrayListFruit.add("Apple11");
              mArrayListFruit.add("Apple12");
              mArrayListFruit.add("Apple13");
              mArrayListFruit.add("Apple14");
              mArrayListFruit.add("Apple15");
              mArrayListFruit.add("Apple16");
              mArrayListFruit.add("Apple17");
              mArrayListFruit.add("Apple18");
              mArrayListFruit.add("Apple19");
              mArrayListFruit.add("Apple20");
              mArrayListFruit.add("Apple21");
              mArrayListFruit.add("Apple22");
              mArrayListFruit.add("Apple23");
              mArrayListFruit.add("Apple24");
              mArrayListFruit.add("Apple25");
              mArrayListFruit.add("Apple26");
              mArrayListFruit.add("Apple27");
              mArrayListFruit.add("Apple28");
              mArrayListFruit.add("Apple29");
              mArrayListFruit.add("Apple30");
              mArrayListFruit.add("Apple31");

              /**
               * create dynamic button according the size of array
               */

              int rem = mArrayListFruit.size() % rowSize;
              if (rem > 0) {

                     for (int i = 0; i < rowSize - rem; i++) {
                           mArrayListFruit.add("");
                     }
              }

              /**
               * add arraylist item into list on page load
               */
              addItem(0);

              int size = mArrayListFruit.size() / rowSize;

              for (int j = 0; j < size; j++) {
                     final int k;
                     k = j;
                     final Button btnPage = new Button(MainActivity.this);
                     LayoutParams lp = new LinearLayout.LayoutParams(120,
                                  LayoutParams.WRAP_CONTENT);
                     lp.setMargins(5, 2, 2, 2);
                     btnPage.setTextColor(Color.WHITE);
                     btnPage.setTextSize(26.0f);
                     btnPage.setId(j);
                     btnPage.setText(String.valueOf(j + 1));
                     mLinearScroll.addView(btnPage, lp);

                     btnPage.setOnClickListener(new OnClickListener() {

                           @Override
                           public void onClick(View v) {
                                  // TODO Auto-generated method stub
                                  /**
                                   * add arraylist item into list
                                   */
                                  addItem(k);

                           }
                     });
              }
       }

       //create dynamic temp array list from main-list
       public void addItem(int count) {
              mArrayListFruitTemp.clear();
              count = count * rowSize;
              /**
               * fill temp array list to set on page change
               */
              for (int j = 0; j < rowSize; j++) {
                     mArrayListFruitTemp.add(j, mArrayListFruit.get(count));
                     count = count + 1;
              }
              // set view
              setView();
       }

       //set view method
       public void setView() {

              ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                           MainActivity.this, android.R.layout.simple_list_item_1,
                           mArrayListFruitTemp);
              mListView.setAdapter(adapter);

              /**
               * On item click listner
               */
              mListView.setOnItemClickListener(new OnItemClickListener() {

                     @Override
                     public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                                  long arg3) {
                           // TODO Auto-generated method stub

                           System.out.println(mArrayListFruitTemp.get(arg2));
                     }
              });

       }
}


2)activity_main.xml

<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="match_parent"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listview1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/scroll"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="10dp"
        android:cacheColorHint="#00000000" />

    <HorizontalScrollView
        android:id="@+id/scroll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:id="@+id/linear_scroll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp" >
        </LinearLayout>
    </HorizontalScrollView>

</RelativeLayout>



Thanks!

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!