Mohan S Mohan S - 8 days ago 5
Android Question

How to Create Different frame for Images each row in listview to show images in android?

I'm newbie to android development, I have to create the listview to show images,In each row i have to show varying number of image in the structure of frame. here i have tried the xml to show image views, but performance beacme poor, can you guide me to show images by programatically. i really don't know why it take much time in android. Please help me thanks in advance.

My BaseAdapter class

public class PostImageListAdapter extends BaseAdapter{

ViewmHdr mHdr;
private LayoutInflater l_Inflater;
private String videoId, titleId = "SharedWithMe";
String User_name = "";
int postImgCount;
final int PM_TYPE_1 = 1, PM_TYPE_2 = 2, PM_TYPE_3 = 3;
final int PG_TYPE_1 = 1, PG_TYPE_2 = 2;
String url1 = "", url2 = "", url3 = "", url4 = "", url5 = "";
private boolean isPM_3_PG_2;
private String m_Text;
private Context mCtxt;

@Override
public View getView(final int position, View mCtView, ViewGroup arg2) {
if (mCtView == null) {
mHdr = new ViewmHdr();
mCtView = l_Inflater.inflate(R.layout.inflate_post_new,null);
//5 frames
mHdr.imgVw_fr5_img1 = (ImageView) mCtView.findViewById(R.id.imgVw_fr5_img1);
mHdr.imgVw_fr5_img2 = (ImageView) mCtView.findViewById(R.id.imgVw_fr5_img2);
mHdr.imgVw_fr5_img3 = (ImageView) mCtView.findViewById(R.id.imgVw_fr5_img3);
mHdr.imgVw_fr5_img4 = (ImageView) mCtView.findViewById(R.id.imgVw_fr5_img4);
mHdr.imgVw_fr5_img5 = (ImageView) mCtView.findViewById(R.id.imgVw_fr5_img5);
//casting remaining views
mCtView.setTag(mHdr);
} else {
mHdr = (ViewmHdr) mCtView.getTag();
}
lHeight = mCtView.getHeight();
//To set the Post Array values to List View
Bean postAcc = postArrayValues.get(position);
postImgCount = Integer.parseInt(postAcc.getImages_count());
//Accessing image details for the particular post
try {
int i, j;
for (i = 0; i < postArrayValues.size(); i++) {
Bean mainBean = postArrayValues.get(i);
int imageCOunt = Integer.parseInt(mainBean.getImages_count());
if (imageCOunt > 0) {
ArrayList<Bean> postImagesArray = mainBean.getPostImagesArray(); // get post images details like this (for first post)
//Accessing prost image details
if (postImagesArray.size() > 0) {
for (j = 0; j < postImagesArray.size(); j++) {
Bean postImgsBean = postImagesArray.get(j);
String imgName = postImgsBean.getPg_name();
String postimgName = postImgsBean.getProfile_pic();
try {
Bean tempPostBean = postAcc.getPostImagesArray().get(j);
String imgURLPost_SM = BusinessAccessLayer.IMAGE_URL + path_large + tempPostBean.getPg_name();
int pg_type = Integer.valueOf(tempPostBean.getPg_type());
pg_link = tempPostBean.getPg_link();
String imgURLPost = tempPostBean.getPg_name();
String fbVideoUrl = tempPostBean.getPg_link();

//Check the Image Array count
if (postImgCount > 0) {

switch (pm_type) {
/*PM_TYPE_1, denotes the post values from the API*/
case PM_TYPE_1:
switch (pg_type) {
/* PM_TYPE_1,PG_TYPE_1 have Images*/
case PG_TYPE_1:
mPostHideViews();

mSetImagestoPanes(j, imgURLPost_SM, imgURLPost);
break;
/*PM_TYPE_1,PG_TYPE_2 have Videos*/
case PG_TYPE_2:
mPostHideViews();
mHdr.rLayout_post_Image_Pane.setVisibility(View.VISIBLE);
mHdr.rL_post_video_layout.setVisibility(View.VISIBLE);
mHdr.rL_post_youtube_layout.setVisibility(View.VISIBLE);
mHdr.btnYplayer.setVisibility(View.VISIBLE);
mHdr.imgVwYuthumb.setVisibility(View.VISIBLE);
videoId = extractYoutubeId(imgURLPost);
Log.e("VideoId is->", "" + videoId);
String img_url = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; // this is link which will give u thumnail image of that video
Picasso.with(getActivity()).load(img_url).fit().centerCrop().into(mHdr.imgVwYuthumb);
break;
default:
mPostHideViews();
break;

}
break;
/*========PM_TYPE_1 statement Ends=======*/

/*PM_TYPE_2, denotes the post values from the Facebook domain*/
case PM_TYPE_2:
switch (pg_type) {
/* PM_TYPE_2,PG_TYPE_1 have Images*/
case PG_TYPE_1:
mPostHideViews();
mHdr.rLayout_post_Image_Pane.setVisibility(View.VISIBLE);
mHdr.pFrame1.setVisibility(View.VISIBLE);
Glide.with(getActivity()).load(imgURLPost).centerCrop().into(mHdr.imgVw_fr1_img1);
break;
/*PM_TYPE_2,PG_TYPE_2 have Videos*/
case PG_TYPE_2:
mPostHideViews();
mHdr.rLayout_post_Image_Pane.setVisibility(View.VISIBLE);
mHdr.pFrame1.setVisibility(View.VISIBLE);
Glide.with(getActivity()).load(imgURLPost).centerCrop().into(mHdr.imgVw_fr1_img1);
break;
default:
mPostHideViews();
break;

}
break;
/*========PM_TYPE_2 statement Ends=======*/

/*PM_TYPE_3, denotes the post values from the Instagram domain*/
case PM_TYPE_3:
switch (pg_type) {
/* PM_TYPE_3,PG_TYPE_1 have Images*/
case PG_TYPE_1:
mPostHideViews();
mHdr.rLayout_post_Image_Pane.setVisibility(View.VISIBLE);
mHdr.pFrame1.setVisibility(View.VISIBLE);
Glide.with(getActivity()).load(imgURLPost).centerCrop().into(mHdr.imgVw_fr1_img1);
break;
/*PM_TYPE_3,PG_TYPE_2 have Videos*/
case PG_TYPE_2:
isPM_3_PG_2 = true;
mPostHideViews();
break;
default:
mPostHideViews();
break;

}
break;

/*========PM_TYPE_3 statement Ends=======*/

default:
mPostHideViews();
break;

}

} else if (postImgCount == 0) {
mPostHideViews();

}

} catch (Exception e) {
e.printStackTrace();
}
}
} else {
//System.out.println("postImagesArray size is" + postImagesArray.size());
mPostHideViews();
}
// end of postImages loop
//Accessing profile image details
} else {
mPostHideViews();
}
}
}catch (Exception e){e.printStackTrace();}

return mCtView;
}

private void mSetImagestoPanes(int posOfLoop, String imgPostUrl_src, String imgPost_YoutubeUrl) throws MalformedURLException {
String imgURLPost_SM = imgPostUrl_src;
int j = posOfLoop;
String url_Youtube = "";

if (postImgCount == 1) {
mHdr.rLayout_post_Image_Pane.setVisibility(View.VISIBLE);
mHdr.pFrame1.setVisibility(View.VISIBLE);

} else if (postImgCount == 2) {
mHdr.rLayout_post_Image_Pane.setVisibility(View.VISIBLE);
mHdr.pFrame2.setVisibility(View.VISIBLE);
if (j == 0) {
Glide.with(getActivity()).load(imgURLPost_SM).dontAnimate().centerCrop().into(mHdr.imgVw_fr2_img1);
} else if (j == 1) {
Glide.with(getActivity()).load(imgURLPost_SM).dontAnimate().centerCrop().into(mHdr.imgVw_fr2_img2);
}

} else if (postImgCount == 3) {/*do same like previous condition else if (postImgCount == 2) visible frames*/

} else if (postImgCount == 4) {/*do same like previous condition else if (postImgCount == 2) visible frames*/

} else if (postImgCount == 5) {/*do same like previous condition else if (postImgCount == 2) visible frames*/

}


}

private void mPostHideViews() {hidePostPanes();hidePostVideos();hidePhotoFrames();}
private void hidePhotoFrames() {
mHdr.pFrame1.setVisibility(View.GONE);
mHdr.pFrame2.setVisibility(View.GONE);
mHdr.pFrame3.setVisibility(View.GONE);
mHdr.pFrame4.setVisibility(View.GONE);
mHdr.pFrame5.setVisibility(View.GONE);
mHdr.rL_post_fr5_more_images.setVisibility(View.GONE);
}

private void hidePostPanes() {
mHdr.rL_post_video_layout.setVisibility(View.GONE);
mHdr.wV_postVideos.setVisibility(View.GONE);
mHdr.rLayout_post_Image_Pane.setVisibility(View.GONE);
}

private void hidePostImages_5frames() {//hide frame image views
}

private void hidePostImages_4frames() {
//hide frame image views
}

private void hidePostImages_3frames() {
//hide frame image views
}

private void hidePostImages_2frames() {
//hide frame image views
}

private void hidePostImages_1frames() {
//hide frame image views
}

protected void hidePostVideos() {
mHdr.btnYplayer.setVisibility(View.GONE);
mHdr.btnFb_player.setVisibility(View.GONE);
mHdr.imgVwYuthumb.setVisibility(View.GONE);
mHdr.imgVw_Fb_thumb.setVisibility(View.GONE);
mHdr.wV_postVideos.setVisibility(View.GONE);
mHdr.rL_post_fb_layout.setVisibility(View.GONE);
mHdr.rL_post_youtube_layout.setVisibility(View.GONE);
}

class ViewmHdr {
ImageView btnYplayer, btnFb_player, imgVw_Fb_thumb, imgVwYuthumb, imgVw_profile, imgVw_share, imgVwConti, imgVwLike, imgVwCom,imgVw_fr5_img1, imgVw_fr5_img2, imgVw_fr5_img3, imgVw_fr5_img4, imgVw_fr5_img5,imgVw_fr4_img1, imgVw_fr4_img2, imgVw_fr4_img3, imgVw_fr4_img4,imgVw_fr3_img1, imgVw_fr3_img2, imgVw_fr3_img3,
,imgVw_fr4_img1, imgVw_fr4_img2, imgVw_fr4_img3, imgVw_fr4_img4 ,imgVw_fr3_img1, imgVw_fr3_img2, imgVw_fr3_img3,imgVw_fr2_img1, imgVw_fr2_img2,imgVw_fr1_img1;
RelativeLayout rL_post_video_layout, rL_post_fb_layout, rL_post_youtube_layout, rLayout_post_Image_Pane, rL_post_fr5_more_images;
RelativeLayout pFrame1, pFrame2, pFrame3, pFrame4, pFrame5;
RelativeLayout layout_expand,layout_like,layout_comment,rLayout_deletepost;
LinearLayout lL_tagging_post,lLayout_Add_Comment_Contribution;
WebView wV_postVideos;
}


}


MyExpected OutPut
Present Image FirstRow of ListView Contains 5 Images, Second row Contains 1 Image. this is possible in xml, but i need optimization in listview rendering time.

Answer

Hi Mohan please try this logic, here i created algorithm like structure for the Two Image, Its just an idea. please try for different frames of images in each row of ListView. The Code structure is below. please i need a feedback.

TwoImage.java

Class TwoImage extends View
{
TwoImage(Context _context)
{
uiInit()
}


Void initUi(Context _context)
{

// create object for layout inflator
    // load layout which contain two image
   // create id for image 
   imgOne = (ImageView)inflat.findviewByID(R.id.img1)
   imgTwo = (ImageView)inflat.findviewByID(R.id.img2)

}
Void loadImageToImageView(String _urlOne,string _urlTwo)
{
// Use Image Loader to load image like picasso,glide libraries

}

}

//Invoke class in Lisview adapter. i hope you're using fragment.
TowImg twoImgObj =new TwoImg(getactiviy())
// sett width and height to to

Thanks.