I'm using a PagerAdapter to swipe through a couple of ImageViews which works perfectly fine. I have a bunch of people in the gallery and I wish to add an individual name/description (id: speaker_name) to them. All I got to work is the same description for all of them. Im absolutely new to this and I am struggling for a day now to get it to work. All the solutions I found used fragments or an OnPageChangeListener but i couldnt figure out how to implement it.
This is what i've got:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/basicBackground">
</android.support.v4.view.ViewPager>
<TextView
android:id="#+id/speaker_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50sp"
android:text="The Name"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="30sp" />
</FrameLayout>
</RelativeLayout>`
PagerAdapter:
public class ImageAdapter extends PagerAdapter {
SpeakerActivity sa;
Context context;
int i = 0;
public int[] GalImages = new int[] {
R.drawable.ben,
R.drawable.brett,
R.drawable.mark,
R.drawable.dusan,
R.drawable.michael,
R.drawable.mike,
R.drawable.ollie,
R.drawable.rebecca,
R.drawable.sebastian,
R.drawable.thomas,
R.drawable.tomasz,
R.drawable.toni,
};
ImageAdapter(Context context){
this.context=context;
}
#Override
public int getCount() {
return GalImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setImageResource(GalImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}
Activity:
public class SpeakerActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.speaker_activity);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageAdapter adapter = new ImageAdapter(this);
viewPager.setAdapter(adapter);
}
}
To change textview text when swiping you can do this inside oncreate() method:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
switch (position){
case 0:
//Do stuff
textview.setText("Ben");
break;
case 1:
//Do stuff
textview.setText("Brett");
break;
//Add other cases for the pages
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
This is the implementation of viewpager OnPageChangeListener() for me the best way.
let me give you the basic idea
ViewPager that the Activity layout is binded to.
ImageAdapter that extends ViewPager/FragmentPager that basically adds views or fragments into the viewpager so that the activity can show it to you.
the activity connects the two objects by setting the viewpager's adapter to your ImageAdapter
Like I said in #2 there are many ways you u can implement the ViewPager there are many sites out there.
refer to https://www.bignerdranch.com/
it explain in great detail
Related
I want to show a ViewPager with all the days of the week with a preview of the following and previous item of the current one.
I've tried a lot of solutions suggested from stackoverflow but none of them is working. I don't wont to use fragments in the ViewPager so I've used a PagerAdapter.
See this image:
My starting point is:
activity_main.xml
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Choose a day of the week:" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/weekOfTheDayPager"/>
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setUpAdapter();
}
private void setUpAdapter() {
ViewPager _mViewPager = (ViewPager) findViewById(R.id.weekOfTheDayPager);
final String[] daysOfTheWeek = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
final Context myContext = getBaseContext();
_mViewPager.setAdapter(new PagerAdapter() {
#Override
public int getCount() {
return daysOfTheWeek.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public Object instantiateItem(ViewGroup collection, int position) {
LayoutInflater inflater = LayoutInflater.from(myContext);
ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.dayoftheweeklayout, collection, false);
((TextView) layout.findViewById(R.id.dayOfTheWeekTextView)).setText(daysOfTheWeek[position]);
collection.addView(layout);
return layout;
}
#Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
});
}}
and finally the layout for the ViewPager item:
dayoftheweeklayout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/dayOfTheWeekTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sunday"
android:layout_gravity="center_horizontal"/>
</FrameLayout>
Any suggestion will be appreciated.
So it looks like you want a carousel view.
Here's the recipe:
First, in order to show pages to the side in ViewPager, you need to provide some padding on the sides and then set clipToPadding to false:
<android.support.v4.view.ViewPager
android:id="#+id/weekOfTheDayPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingEnd="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
android:paddingRight="#dimen/view_pager_padding"
android:paddingStart="#dimen/view_pager_padding"/>
Next, you need to override getPageWidth in your PagerAdapter to tell the ViewPager that you want to display three pages at a time:
#Override
public float getPageWidth(int position) {
return 1F / 3F;
}
Then you need to tell the ViewPager to use a custom PageTransformer:
viewPager.setPageTransformer(false, new MyPageTransformer());
...
public static class MyPageTransformer implements ViewPager.PageTransformer {
private ArgbEvaluator mColorFade = new ArgbEvaluator();
#Override
public void transformPage(View page, float position) {
// position is 0 when page is centered (current)
// -1 when page is all the way to the left
// +1 when page is all the way to right
// Here's an example of how you might morph the color
int color = mColorFade(Math.abs(position), Color.RED, Color.GRAY);
TextView tv = (TextView) page.findViewById(R.id.dayOfTheWeekTextView);
tv.setTextColor(color);
}
}
There's probably something I forgot, but search SO for "android viewpager carousel" and you will find an answer in there somewhere.
I'm using ViewPager as image slider. I'm using Android Studio. Everything works fine, I can slide between images. However beneath my images I have for some reason white space. I know that you can't call wrap_content on ViewPager and I've tried to put the fragment which contains the image slider into an Activity with another fragment below the image-slider-fragment, but between them is still some weird white space and within the white space I can also swipe to another image, which would of course cause only problems later on:
fragment_home.xml:
<FrameLayout 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="HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ImageSliderFragment"
android:id="#+id/fragment1"
tools:layout="#layout/fragment_image_slider"
android:layout_weight="2"/>
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="BottomFragment"
tools:layout="#layout/fragment_bottom"
android:id="#+id/fragment2"
android:layout_weight="2"/>
</LinearLayout>
</FrameLayout>
swipe_layout.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_view_of_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<!-- adjustviewBounds prevents non-defined padding -->
<TextView
android:id="#+id/text_view_of_swipe_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
</RelativeLayout>
fragment_image_slider.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="ImageSliderFragment"
android:id="#+id/image_slide_id">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_of_image_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!--height="wrap_content/match_parent" both have the same result -->
</FrameLayout>
CustomSliderAdapter.java:
public class CustomSliderAdapter extends PagerAdapter {
private int[] image_res = {R.drawable.a,R.drawable.b,
R.drawable.c, R.drawable.d};
private String[] image_names = {"a", "b", "c", "d"};
private Context ctx;
private LayoutInflater layoutInflater;
public CustomSliderAdapter(Context ctx) {
this.ctx = ctx;
}
#Override
public int getCount() {
return image_res.length;
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == (RelativeLayout) object);
}
#Override
public Object instantiateItem(final ViewGroup container, final int position) {
layoutInflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.swipe_layout, container, false);
ImageView imageView = (ImageView) view.findViewById(R.id.image_view_of_slider);
TextView textView = (TextView) view.findViewById(R.id.text_view_of_swipe_layout);
imageView.setImageResource(image_res[position]);
textView.setText(image_names[position]);
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((RelativeLayout) object);
}
}
ImageSliderFragment.class:
public class ImageSliderFragment extends Fragment {
ViewPager viewPager;
CustomSliderAdapter adapter;
View myView;
public static int imageHeight;
public ImageSliderFragment() {}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if(myView==null) {
myView = inflater.inflate(R.layout.fragment_image_slider, container, false);
viewPager = (ViewPager) myView.findViewById(R.id.view_pager_of_image_slider);
adapter = new CustomSliderAdapter(getActivity());
//With this I could set height of ViewPager manually
ViewGroup.LayoutParams params = viewPager.getLayoutParams();
params.height = imageHeight;
viewPager.setLayoutParams(params);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
viewPager.setAdapter(adapter);
} else {
((ViewGroup) myView.getParent()).removeView(myView);
}
return myView;
}
}
How activity looks
I've also tried to change the height of my xml file with numbers (f.e.200dp), which works, but there are so many different device screens that at some point it would get at some point messed up
So again my problem is: make ViewPager fit to Imageview,because I can swipe between images also in the white space.
Help is much appreciated!
You can try like this on your imageview for viewpager image ....
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" />
I want to add an image slide. But cannot make it slide from right to left. (for languages like Arabic or Hebrew)
I checked nearly all replies in stackoverflow, but can not find a clear solution.
I write here the whole code.
Please write me clearly, I am not a professional
mainActivity;
package com.manishkpr.viewpagerimagegallery;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageAdapter adapter = new ImageAdapter(this);
viewPager.setAdapter(adapter);
}
}
here
is
the
ImageAdapter.java;
package com.manishkpr.viewpagerimagegallery;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class ImageAdapter extends PagerAdapter {
Context context;
private int[] GalImages = new int[] {
R.drawable.one,
R.drawable.two,
R.drawable.three
};
ImageAdapter(Context context){
this.context=context;
}
#Override
public int getCount() {
return GalImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setImageResource(GalImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}
and here is the layout file;
<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" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Create a Layout file pager_item.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="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView" />
</LinearLayout>
Change your PagerAdapter like this:
public class ImageAdapter extends PagerAdapter {
Context context;
private int[] GalImages = new int[] {
R.drawable.one,
R.drawable.two,
R.drawable.three
};
LayoutInflater mLayoutInflater;
ImageAdapter(Context context){
this.context=context;
mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return GalImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
imageView.setImageResource(GalImages[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout)object);
}
}
EDIT 1:
A trick :
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageAdapter adapter = new ImageAdapter(this);
viewPager.setAdapter(adapter);
viewPager.setCurrentItem(adapter.getCount()-1);
}
I hope this helps :)
ViewPager is not support RTL.
You have to create custom ViewPager for swipe Right To Left for Arabic and other languages.
If you don't want to make code then there are lots of library available you can use one of them.
1. RtlViewPager
2. RtlViewPager
Instead of using ViewPager I suggest you to use SwipeDeck Because as Niranj Patel said ViewPager does not Support Right to left.
<?xml version="1.0" encoding="utf-8"?>
<com.daprlabs.cardstack.SwipeFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:swipedeck="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.daprlabs.cardstack.SwipeDeck
android:id="#+id/swipe_deck"
android:layout_width="match_parent"
android:layout_height="480dp"
android:padding="20dp"
swipedeck:card_spacing="10dp"
swipedeck:max_visible="3"
swipedeck:render_above="true"
swipedeck:rotation_degrees="15" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button" />
</com.daprlabs.cardstack.SwipeFrameLayout>
Just smiple solution but it is not professional
Write this in xml for VeiwPager
android:rotationY="180"
and also in veiw_item
android:rotationY="180".
ViewPager2 supports RTL paging.
From docs:
RTL paging is enabled automatically where appropriate based on locale, but you can also manually enable RTL paging for a ViewPager2 element by setting its android:layoutDirection attribute:
<androidx.viewpager2.widget.ViewPager2
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layoutDirection="rtl" />
I would like to make banner carousel. Instead of RecyclerView I choose to use ViewPager. I have a problems with adapter implementation:
public class BannerAdapter extends PagerAdapter {
List<Banner> bannerList;
Context context;
ImageView imageView;
public BannerAdapter(List<Banner> list, Context context) {
bannerList = list;
this.context = context;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View v = View.inflate(context, R.layout.fragment_home_layout, null);
imageView = (ImageView) v.findViewById(R.id.image);
Picasso.with(context).load(OpApp.IMAGEORGINAL + bannerList.get(position).getMobileImage() + ".jpg").placeholder(R.drawable.op_logo).into(imageView);
return v;
}
#Override
public void destroyItem(ViewGroup collection, int position, Object view) {
}
#Override
public int getCount() {
return bannerList.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return false;
}
}
The image is not loaded to the ViewPager.
fragment_home_layout.xml
<FrameLayout 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"
android:background="#color/background">
<-- Other Views -->
<android.support.v4.view.ViewPager
android:id="#+id/home_banner_carousel"
android:layout_width="match_parent"
android:layout_height="#dimen/_150sdp"
android:adjustViewBounds="true"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.view.ViewPager>
<-- Other Views -->
</FrameLayout>
Actual result:
Expected result:
Additional to this question, what you can suggest to achieve position indicator functionality ? I think about implements ViewPager.OnPageChangeListener but not sure with that.
I know how to implement 'ViewPager' using 'Fragments' but in my case I need to use 'List' instead of 'Fragments', and I'm confused with that.
P.S. Please don't minus my question, just comment what you don't like and what is wrong and I will try to edit it. I'm newbie here and in android. Anyway, Thank you!
Solution founded, I have changed adapter`s 2 methods and all is working!
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
Picasso.with(context).load(OpApp.IMAGEORGINAL + bannerList.get(position).getMobileImage() + ".jpg")
.placeholder(R.drawable.op_logo).into(imageView);
((ViewPager) container).addView(imageView);
return imageView;
}
#Override
public void destroyItem(ViewGroup collection, int position, Object view) {
((ViewPager) collection).removeView((View) view);
}
I have 25 pictures in my project and I have a Button in my first Activity. When click this Button I want my app show the first pic of 25, then I want to swipe to change my pics.
This is my PagerAdapter:
public class ImageAdapter extends PagerAdapter {
Context context;
private int[] GalImages = new int[] {
R.drawable.one,
R.drawable.two,
R.drawable.three
};
ImageAdapter(Context context) {
this.context = context;
}
#Override
public int getCount() {
return GalImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setImageResource(GalImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}
Then create the xml file and add the ViewPager in layout
<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" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Then create main Activity and create the instance of ViewPager
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageAdapter adapter = new ImageAdapter(this);
viewPager.setAdapter(adapter);
}
}
Everything is good, but when my app arrive to 20th pic of my 25 pics this error appears:
unfortunately, gallery 3 has stopped
please read here :
i find out some pics are very big so this error appears , when i delete them app is good now.......
is not anyway else ??
i do not want delete my pics