I am using a ViewPager to load images from server using Picasso. I see whitespace below the actual image. When I swipe the area with whitespace the image is swiped.
I have set scaleType="fitXy" to stretch to the ImageView's size.Below is the xml layout and code.
Please dont mark it as duplicate.I have googled it and the solutions did not help me.
#dimen/viewpager_img=150dp in w320dp-xhdpi
amblnce_display.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:id="#+id/amblnce_dsp_lyt"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="#dimen/viewpager_img"
android:id="#+id/pager"
>
</android.support.v4.view.ViewPager>
view_pager_lyt.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="#dimen/viewpager_img"
android:id="#+id/image1"
android:scaleType="fitXY"
/>
</LinearLayout>
ImagePagerAdapter.java:
public class ImagePagerAdapter extends PagerAdapter {
public ImagePagerAdapter(Context context,String ctgry){
if (category.equalsIgnoreCase("Ambulance")){
count=AmbulanceDisplayData.getInstance().imagecount();
}
layoutInflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
Log.e("Count",Integer.toString(count));
return count;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
view=layoutInflater.inflate(R.layout.view_pager_lyt,container,false);
linearLayout=(LinearLayout) view.findViewById(R.id.pgr_lyt);
imageView=(ImageView) view.findViewById(R.id.image1);
if (category.equalsIgnoreCase("Ambulance"))
{
count= ambulanceDisplayData.getInstance().imagecount();
images =ambulanceDisplayData.getInstance().getArrayList();
if(count!=0)
{
Log.e("Images", (String) images.get(position));
Picasso.with(context).load("http://abcd.com/xyz/"+(String) images.get(position))
.placeholder(R.drawable.noimage)
.fit().into(imageView);
}
}
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
if(view==object){
return true;
}
else {
return false;
}
}}
You should Set match_parent .
Hard-Coded Value causing problem here .
MATCH_PARENT means that the view wants to be as big as its parent,
minus the parent's padding .
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/image1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
Add android:adjustViewBounds="true" like
<ImageView
android:layout_width="match_parent"
android:layout_height="#dimen/viewpager_img"
android:id="#+id/image1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
Related
I am working on a short news app. It's parsed JSON from a URL. I want to show one news per view pager.on swipe on next ViewPager, I want to show next news like the list. How can I can do that with ViewPager?
Set JSON data to PagerAdapter as we set to Base Adapter or other adapters & create custom layout for adapter.
view_pager_layout.xml
<RelativeLayout
android:id="#+id/loutPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/loutCirIndicator"
android:background="#android:color/transparent"
android:padding="5dp"/>
<LinearLayout
android:id="#+id/loutCirIndicator"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:background="#android:color/transparent"
android:gravity="center_vertical"
android:orientation="horizontal">
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
app:ci_drawable="#drawable/bg_selected_indicator"
app:ci_drawable_unselected="#drawable/bg_unselected_indicator" />
</LinearLayout>
</RelativeLayout>
row_pager_item.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:clickable="false"
android:scaleType="centerInside" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="abc" />
</LinearLayout>
ViewPager Adapter
public class SamplePagerAdapter extends PagerAdapter {
Activity activity;
List<Response_Model> Arr_ResultList;
ImageView imageView;
TextView textView;
public SamplePagerAdapter(final Activity activity,final List<Response_Model> Arr_ResultList) {
this.activity = activity;
this.Arr_ResultList = Arr_ResultList;
}
#Override
public int getCount() {
return Arr_ResultList.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
final int pos = position;
View view = LayoutInflater.from(container.getContext()).inflate(R.layout.row_pager_item, container, false);
imageView = (ImageView) view.findViewById(R.id.imageView);
textView = (TextView) view.findViewById(R.id.textView);
Glide.with(activity).load(Arr_ResultList.get(pos).getImage())
.thumbnail(0.5f)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageView);
textView.setText(Arr_ResultList.get(pos).getName());
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
Set Pager Adapter to ViewPager
SamplePagerAdapter pagerAdapter = new SamplePagerAdapter(MainActivity.this, Arr_Result_List);
viewPager.setAdapter(pagerAdapter);
indicator.setViewPager(viewPager);
You can use PagerAdapter for ViewPager and create your custom xml layout and
set your view on cell by position. Pass your list into pager adapter in adapter constructor.
You can refer this link it will be help you.
https://www.journaldev.com/10096/android-viewpager-example-tutorial
I did a PagerAdapter, and it works very well but when I put my phone horizontally, many things like TextView are not visible, because they are "below" the screen of the phone. I know I could put a ScrollView, but this option gives a lot of errors.
Is there another option besides the ScrollView or what does the error mean?
This is my code with the LinearLayout without any errors but the PagerAdapter isn't scrollable.
Java code:
public class SlideAdapter_info extends PagerAdapter {
Context context;
LayoutInflater inflater;
public SlideAdapter_info(Context context){
this.context = context;
}
#Override
public int getCount() {
return 1;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view==(LinearLayout)object);
}
#Override
public void destroyItem(ViewGroup container, int position, Object object{
container.removeView((LinearLayout)object);
}
#NonNull
#Override
public Object instantiateItem(ViewGroup container, int position) {
inflater = (LayoutInflater)
context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.slide_info, container, false);
//other code to set the textviews and the imageview
container.addView(view);
return view;
}
}
xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/slidelinear_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView /> ....
<!-- This allows me to have a circle shaped image-->
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/slideimg"
android:layout_width="200dp"
android:layout_height="200dp"
android:paddingTop="10dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:civ_border_color="#color/black"
app:civ_border_width="3dp" />
<TextView /> ....
</LinearLayout>
This is the result: (horizontal)
This is the result:(vertical)
If instead of LinearLayout I put the ScrollView, Android Studio gives me this error:
java.lang.IllegalStateException: ScrollView can host only one direct child
at esame.progetto.xhondar.github.com.info.SlideAdapter_info.instantiateItem(SlideAdapter_info.java:87)
This is the row:
View view = inflater.inflate(R.layout.slide_info, container, false);
java.lang.IllegalStateException: ScrollView can host only one direct child is telling you exactly what your problem is. By just converting your LinearLayout to a ScrollView, you have multiple children. If you want your current layout to be scrollable within your ViewPager, you need to wrap your LinearLayout with the ScrollView in your layout xml file.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/slidelinear_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView /> ....
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/slideimg"
android:layout_width="200dp"
android:layout_height="200dp"
android:paddingTop="10dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:civ_border_color="#color/black"
app:civ_border_width="3dp" />
<TextView /> ....
</LinearLayout>
</ScrollView>
I am using view tag inside PercentRelativeLayout. I need to set background color to respective tag which I am unable to do programmatically.
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/leaderboardRowRelativeLayout"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent">
<View
android:id="#+id/percentile_scored"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_widthPercent="50%"
app:layout_heightPercent="15%"
/>
<View
android:id="#+id/percentile_left_scoring"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_widthPercent="50%"
app:layout_heightPercent="15%"
android:layout_toRightOf="#+id/percentile_scored"
/>
The place where I try set background:
if(String.valueOf(userId).equals(leaderBoardDb.getUserId())){
leaderboardFriendsViewHolder.percent_scored.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.leaderboard_user_color));
}else {
leaderboardFriendsViewHolder.percent_scored.setBackground(ContextCompat.getDrawable(getApplicationContext(),R.drawable.leaderboard_row_color));
}
Well I tried same code as you.
1) In design:
<android.support.percent.PercentRelativeLayout
android:id="#+id/leaderboardRowRelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/percentile_scored"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_heightPercent="15%"
app:layout_widthPercent="50%"
/>
<View
android:id="#+id/percentile_left_scoring"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#+id/percentile_scored"
app:layout_heightPercent="15%"
app:layout_widthPercent="50%"
/>
</android.support.percent.PercentRelativeLayout>
2) In RecyclerAdapter:
...
#Override
public void onBindViewHolder(ProductImagesRecyclerAdapter.ViewHolder holder, int position) {
Timber.e("Position: " + position);
if(position%2 == 0) {
holder.aa.setBackgroundColor(ContextCompat.getColor(context, R.color.colorAccent));
} else {
holder.aa.setBackgroundColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
}
}
...
public static class ViewHolder extends RecyclerView.ViewHolder {
ImageView productImage;
int position;
View aa;
public ViewHolder(View v, final ProductImagesRecyclerInterface productImagesRecyclerInterface) {
super(v);
aa = v.findViewById(R.id.percentile_scored);
}
public void setPosition(int position) {
this.position = position;
}
}
And result seems totaly OK:
Problem is probably somewhere else. Maybe views width and height are zeros or some other views overlap them.
Hi I am working with custom GridView.
The GridView placed in the following xml/layout file.
<?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="match_parent" >
<View
android:id="#+id/music_home_ad_view"
android:layout_width="match_parent"
android:layout_height="50dp" />
<ScrollView
android:id="#+id/music_home_root_container"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ScrollView>
<FrameLayout
android:id="#+id/music_home_promo_frame"
android:layout_width="match_parent"
android:layout_height="#dimen/music_home_promo_height"
android:layout_marginTop="20dp" >
<android.support.v4.view.ViewPager
android:id="#+id/music_home_promo_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.raaga.home.CirclePageIndicator
android:id="#+id/music_home_page_indicator"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_gravity="bottom"
android:padding="10dp" />
</FrameLayout>
<GridView
android:id="#+id/music_home_grid_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/music_home_promo_frame"
android:numColumns="3" >
</GridView>
</RelativeLayout>
The GridView contains the following views
music_grid_item.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="match_parent"
android:background="#android:color/transparent"
>
<ImageView
android:id="#+id/music_grid_image"
android:layout_width="60dp"
android:layout_height="70dp"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:src="#drawable/new_releases"
/>
<TextView
android:id="#+id/music_grid_category_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/music_grid_image"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="New Releases"
android:textColor="#color/text_white"
/>
</RelativeLayout>
I have used the custom adapter class and followed this link
MusicCategoryAdapter.java
public class MusicCategoryAdapter extends BaseAdapter{
ArrayList<Integer> categoryImageList;
ArrayList<String> categoryNameList;
Context mContext;
public MusicCategoryAdapter(Context mContext, ArrayList<Integer> categoryImageList, ArrayList<String> categoryNameList) {
this.mContext= mContext;
this.categoryImageList = categoryImageList;
this.categoryNameList = categoryNameList;
}
#Override
public int getCount() {
//send the list length
return categoryImageList.size();
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
GridHolder holder;
View grid = convertView;
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
grid = new View(mContext);
convertView = inflater.inflate(R.layout.music_grid_item, null);
holder = new GridHolder();
holder.categoryTitle = (TextView) convertView.findViewById(R.id.music_grid_category_name);
holder.categoryImage = (ImageView)convertView.findViewById(R.id.music_grid_image);
holder.categoryTitle.setText(categoryNameList.get(position));
holder.categoryImage.setImageResource(categoryImageList.get(position));
convertView.setTag(holder);
} else {
holder = (GridHolder) convertView.getTag();
}
return convertView;
}
public class GridHolder{
ImageView categoryImage;
TextView categoryTitle;
}
}
I am facing the problem that the items are repeating by changing the position when scrolling.
Could anyone help on this problem? What mistake I did in this?
Put the scrollview at the starting of relative layout and end the tag in the end of the relative layout.
This would make your entire layout scrollable and you will overcome the problem.
My image is not adapting the screen completely. Is getting with white borders at the top and bottom
My images have 700x1002.
Please can someone help me get these edges and make the image/container fully fit the screen?
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="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linearActions" >
<android.support.v4.view.ViewPager
android:id="#+id/tourImageViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</FrameLayout>
<LinearLayout
android:id="#+id/linearActions"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/tour_bg"
android:orientation="horizontal" >
<Button
android:id="#+id/btnIdentify"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginBottom="24dp"
android:layout_marginLeft="30dp"
android:background="#color/buttonColorWhite"
android:layout_marginTop="27dp"
android:textSize="16sp"/>
<Button
android:id="#+id/btnGoHome"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginBottom="24dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="30dp"
android:layout_marginTop="27dp"
android:background="#color/buttonColorBlue"
android:textSize="16sp"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/relativeCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearActions"
android:layout_marginBottom="24dp"
android:background="#null" >
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/tourImageIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
app:fillColor="#027CC3"
app:pageColor="#CCCCCC" />
</RelativeLayout>
</RelativeLayout>
MyAdapter:
public class MyAdapter extends PagerAdapter {
Activity activity;
int imageArray[];
public MyAdapter(Activity act, int[] imgArray) {
imageArray = imgArray;
activity = act;
}
public Object instantiateItem(View collection, int position) {
ImageView view = new ImageView(activity);
view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
view.setScaleType(ScaleType.FIT_CENTER);
view.setImageResource(imageArray[position]);
((ViewPager) collection).addView(view, 0);
return view;
}
#Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
}
#Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
#Override
public int getCount() {
return imageArray.length;
}
#Override
public Parcelable saveState() {
return null;
}
}
try to change your view.setScaleType(ScaleType.FIT_CENTER); to view.setScaleType(ScaleType.CENTER_CROP);
Its little bit late but none of the solution stated above did not work for me. So thought of sharing my solution which perfectly works.
If we set the ScaleType and Params in view(ImageView) then we might face problems either with LinerLayout/RelativeLayout.
So just set the ScaleType of ImageView something like below in viewpagerAdapter layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/sampleImage"
android:id="#+id/img_pager_item"
android:scaleType="center"
android:clickable="false"
/>