0

I am trying to create a screen where i can select multiple images from SDCard and load them in to ViewPager & Gridlayout like how in WhatsApp Sending Multiple images (like in the below screen shot).

whats app screen shot for referance

I am able to achieve like in the screen shot by using ViewPager and GridLayout(for below Image selection view). when user swiping the ViewPager I need to change the selector in GridLayout. This Selectoion Change part also Implemented by using Relative Layout as Child of GridLayout and updating the RelativeLayout's Background. Below ade those xmls

gridlayout_item.xml

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layoutContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/on_select"
android:padding="2dp" >

<ImageView
    android:id="@+id/imageone"
    android:layout_width="65dip"
    android:layout_height="65dip"
    android:layout_gravity="center_vertical"
    android:background="@drawable/on_select"
    android:padding="1dip"
    android:scaleType="center" />

</RelativeLayout>

activity_multi_seletion.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/imagepreviewouterlayout" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/imagepreviewouterlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/bottom_layout"
    android:layout_marginBottom="10dip"
    android:layout_marginTop="10dip"
    android:background="@android:color/transparent"
    android:padding="5dp" >

    <GridLayout
        android:id="@+id/imagepreviewlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="5"
        android:horizontalSpacing="10dip"
        android:orientation="horizontal"
        android:rowCount="1"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dip" >

        <RelativeLayout
            android:id="@+id/layoutContainer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/on_select"
            android:padding="2dp" >

            <ImageView
                android:id="@+id/imageone"
                android:layout_width="65dip"
                android:layout_height="65dip"
                android:layout_gravity="center_vertical"
                android:background="@drawable/on_select"
                android:padding="1dip"
                android:scaleType="center" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/add"
            android:layout_width="65dip"
            android:layout_height="65dip"
            android:background="@drawable/extrabtn_style"
            android:layout_gravity="center" >

            <Button
                android:id="@+id/button1"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:background="@drawable/addaccountimg" />

            <RelativeLayout
                android:id="@+id/addmoreimageBtn"
                android:layout_width="406dp"
                android:layout_height="match_parent"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:clickable="true" >
            </RelativeLayout>
        </RelativeLayout>

    </GridLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/tabbar1" >

    <LinearLayout
        android:id="@+id/bottom_layout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:weightSum="1" >

        <Button
            android:id="@+id/cancelBtn"
            android:layout_width="178dip"
            android:layout_height="50dp"
            android:layout_weight="0.5"
            android:background="@drawable/imageselector_btn"
            android:text="Cancel"
            android:textColor="#E9E9E9" />

        <Button
            android:id="@+id/sendImageBtn"
            android:layout_width="178dip"
            android:layout_height="50dp"
            android:layout_marginLeft="0.5dp"
            android:layout_weight="0.5"
            android:background="@drawable/imageselector_btn"
            android:text="Send"
            android:textColor="#E9E9E9" />
    </LinearLayout>
</RelativeLayout>

</RelativeLayout>

on_select.xml (selection drawable)

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/box" android:state_selected="true"></item>
<item android:drawable="@drawable/box" android:state_checked="true"></item>
<item android:drawable="@drawable/box" android:state_focused="true"></item>
</selector>

But i am facing performance issue while changing the Background of relativeLayout on ViewPager's PageChange(onPageSelected). I mean ViewPager page is getting struck for a while and moving.

If i comment that update gridlayout item's background on ViewPager's PageChange(onPageSelected) its moving smooth. below is the code snippet.

     @Override
            public void onPageSelected(final int arg0) {

                        if (griditemView!= null)
                            griditemView.setSelected(false);

                        griditemView = imagepreviewgridlayout.getChildAt(arg0);
                        if(griditemView!=null)
                        {
                            griditemView.setSelected(true);
                        }
            }

please help me to solve this issue.

Raj
  • 1,843
  • 2
  • 21
  • 47
  • Do you [display bitmaps efficientely](http://developer.android.com/training/displaying-bitmaps/index.html)? – Lamorak Jun 16 '15 at 11:23
  • I am creating Drawables by using Drawable.createFromPath(path); API – Raj Jun 16 '15 at 11:39
  • Yeah, if the bitmap is unnecessearily large this would exactly cause the lag – Lamorak Jun 16 '15 at 11:42
  • But i am not creating bit map – Raj Jun 16 '15 at 12:09
  • What did you think `Drawable.createFromPath(path)` does? Load the file, decode to bitmap, create drawable from bitmap. What are the dimensions of your images? – Lamorak Jun 16 '15 at 12:12
  • Images from sd card. those may have diff dimentions – Raj Jun 16 '15 at 12:14
  • 1
    Well there you have it. Just implement [loading bitmaps efficiently](http://developer.android.com/training/displaying-bitmaps/load-bitmap.html), the code is already there. It definitely should speed up – Lamorak Jun 16 '15 at 12:17
  • Thanks for your suggestions. I'll implement that and update – Raj Jun 16 '15 at 12:19

0 Answers0