i have group of of images url in array of string ,now i want to display them in view pager , i tried to display images from folders and it's worked .but when i used array of string ,the images don't show . so what's the problem? that is part of my code.
ViewPager viewPager;
CustomerAdapter adapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String [] urls={"https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia20645_main.jpg?itok=dLn7SngD","http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg","http://humminglove.com/wp-content/uploads/2013/08/l-is-l.jpg"};
viewPager = (ViewPager)findViewById(R.id.view_pager);
adapter = new CustomerAdapter(this,urls);
viewPager.setAdapter(adapter);
}
that is adapter
public class CustomerAdapter extends PagerAdapter{
private int[] images = {R.mipmap.img1,R.mipmap.img2,R.mipmap.img3,R.mipmap.img4};
private Context ctx;
private String[] urls;
private LayoutInflater inflater;
public CustomerAdapter(Context ctx,String []urls){
this.ctx = ctx;
this.urls=urls;
}
#Override
public int getCount() {
return urls.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view ==(LinearLayout)object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
inflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.swip,container,false);
ImageView img =(ImageView)v.findViewById(R.id.imagee);
TextView tv = (TextView)v.findViewById(R.id.textView);
Picasso.with(ctx).load(urls[position]).into(img);
tv.setText("Image :"+position);
container.addView(v);
return v;
}
#Override
public void destroyItem(View container, int position, Object object) {
container.refreshDrawableState();
}
}
that's my main_activity xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="web.blu_ray91111.example.commyc.newwww.MainActivity">
<android.support.v4.view.ViewPager
android:id ="#+id/view_pager"
android:layout_height="300dp"
android:layout_width="match_parent"
>
</android.support.v4.view.ViewPager>
swip.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25dp"
android:text="Hello world!"
android:id="#+id/textView"
android:textStyle="bold"
android:layout_marginTop="30dp"
android:gravity="center" />
<ImageView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imagee"
/>
In your case it is not clear why it didn't loaded.
1) It might take time to load big images
2) Some network error occurred on loading images
So I am you to use placeholders to coverup the error and on loading time of images.
Picasso.with(mContext).load(fileImage)
.placeholder(R.drawable.placeholder_img)
.error(R.drawable.error_placeholder_img).into(img)
Check you can access the url by normal browser
Related
I try to made a example simple ViewPager app but Ive got error. I thought it was the image resolution fault but after changing ImageView as TextView and writing example text on it Ive got the same error. (after commented the ViewPAger implementation works fine)
channel '2d5df67 com.example.k.myapplication/com.example.k.myapplication.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
public class MainActivity extends AppCompatActivity {
List<String> list;
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = new ArrayList<>();
list.add("https://www.w3schools.com/css/trolltunga.jpg");
list.add("http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/1488980395_548_image.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/image.png");
list.add("https://www.w3schools.com/css/trolltunga.jpg");
list.add("http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/1488980395_548_image.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/image.png");
viewPager = (ViewPager)findViewById(R.id.viewPAger);
ViewPAgerAdapter adapter = new ViewPAgerAdapter(MainActivity.this,list);
viewPager.setAdapter(adapter);
}}
Adapter Class
public class ViewPAgerAdapter extends PagerAdapter {
private List<String> record;
private Context context;
private LayoutInflater inflater;
public ViewPAgerAdapter(Context context, List<String>record) {
this.record=record;
this.context=context;
inflater=(LayoutInflater)context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View view = inflater.inflate(R.layout.item,container);
ImageView img = (ImageView)view.findViewById(R.id.image);
Glide.with(context).load(record.get(position)).fitCenter().into(img);
container.addView(view);
return view;
}
#Override
public int getCount() {
return record.size();
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
}
Item layout
<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/image"
/>
</LinearLayout>
activity layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.k.myapplication.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPAger"/>
</LinearLayout>
try adding this to your manifest -- android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize|mcc|mnc"
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 have Created an Image Slider using View Pager by following some tutorials.
So my problems is I wanted my slider to have a transparent toolbar.
And when i clicked on the screen the toolbar will hide.
Here's my code together with the output(I made), and the output i Want.
My Activity
public class viewInfo extends AppCompatActivity{
private ViewPager viewPager;
private Toolbar toolbar;
private CustomSwipeAdapter adapter;
PhotoViewAttacher mAttacher;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_info);
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
viewPager = (ViewPager) findViewById(R.id.view_pager);
adapter = new CustomSwipeAdapter(this);
viewPager.setAdapter(adapter);
}
public class CustomSwipeAdapter extends PagerAdapter {
private int[] image_resources = {R.drawable.bsu, R.drawable.gameover2};
private Context context;
private LayoutInflater layoutInflater;
public CustomSwipeAdapter(Context context) {
this.context = context;
}
#Override
public int getCount() {
return image_resources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == (LinearLayout) object);
}
#Override
public Object instantiateItem(View container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View item_view = layoutInflater.inflate(R.layout.swipe_layout, (ViewGroup) container, false);
ImageView imageView = (ImageView) item_view.findViewById(R.id.image_view);
imageView.setPadding(5, 5, 5, 5);
imageView.setImageResource(image_resources[position]);
((ViewGroup) container).addView(item_view);
mAttacher = new PhotoViewAttacher(imageView);
mAttacher.update();
return item_view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
}
2.XML(swipe_layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#000"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
/>
</LinearLayout>
3.XML(My Activity's XML)
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:orientation="vertical"
tools:context="com.thesis.juandirection.juandirectionfinale.viewInfos.viewInfo">
<include
android:id="#id/app_bar"
layout="#layout/app_bar" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
What i want Is this effect..
Transparent toolbar.
I tried to put a listener to Linearlayout that when the user
clicked the layout it will hide the toolbar, but no luck.
I'm currently writing an app and it's been suggested I try a square list with tiles instead of a standard list. I've included an example mock up underneath of what it could look like. I'm relatively new to android and can't quite get my head around how I could do it.
Any help is much appreciated. Thanks!
You would have to use a 2 column GridView.
Assuming you have some model for an Alarm.
public class Alarm {
private String title;
private String time;
private int color;
public Alarm(String title, String time, int color) {
this.title = title;
this.time = time;
this.color = color;
}
}
You will have to create a custom layout to be used in the GridView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:id="#+id/title"
android:textColor="#FFFFFF"
android:text="title"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="18sp"
android:id="#+id/time"
android:layout_below="#id/title"
android:text="time"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:textColor="#FFFFFF"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/time"
android:layout_centerHorizontal="true"
android:src="#android:drawable/ic_media_play"/>
</RelativeLayout>
And create an adapter, just like you would when using a listview
public class AlarmGridAdapter extends BaseAdapter {
private Context context;
private List<Alarm> alarms;
public AlarmGridAdapter(Context context, List<Alarm> alarms) {
this.context = context;
this.alarms = alarms;
}
#Override
public int getCount() {
return alarms.size();
}
#Override
public Object getItem(int position) {
return alarms.get(position);
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View root = layoutInflater.inflate(R.layout.grid_item, parent, false);
Alarm alarm = alarms.get(position);
TextView titleText = (TextView) root.findViewById(R.id.title);
TextView timeText = (TextView) root.findViewById(R.id.time);
root.setBackgroundColor(alarm.getColor());
titleText.setText(alarm.getTitle());
timeText.setText(alarm.getTime());
return root;
}
}
The activity simply contains a grid view, with the number of columns 2 and vertical/horizontal spacing 0
<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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<GridView
android:id="#+id/grid"
android:layout_width="match_parent"
android:numColumns="2"
android:horizontalSpacing="0dp"
android:verticalSpacing="0sp"
android:layout_height="match_parent" />
</RelativeLayout>
And finally, in the activity(or fragment):
private GridView gridView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView = (GridView) findViewById(R.id.grid);
Alarm alarm1 = new Alarm("Alarm 1", "10:04:16", Color.parseColor("#39C6F4"));
Alarm alarm2 = new Alarm("Alarm 2", "10:04:16", Color.parseColor("#A33293"));
Alarm alarm3 = new Alarm("Alarm 3", "10:04:16", Color.parseColor("#F79922"));
Alarm alarm4 = new Alarm("Alarm 4", "10:04:16", Color.parseColor("#84C542"));
AlarmGridAdapter adapter = new AlarmGridAdapter(this, Arrays.asList(alarm1, alarm2, alarm3, alarm4));
gridView.setAdapter(adapter);
}
Result:
I am trying to put a carousel on my top half of Android screen.
I like Bootstrap carousels like:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
I am not sure the best way to approach this? Do I use a GridView in top half of my screen??
First you must create a Viewpager into your xml like:
<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"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#+id/relativeLayout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
For a custom Adapter you need to create a res/layout/pager_item.xml which will be used to inflate and generate a view into Adapter:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView" />
</LinearLayout>
After that, you can create the custom Adapter to set your ViewPager:
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
private LayoutInflater mLayoutInflater;
private int[] mResources;
public CustomPagerAdapter(Context context, int[] resources) {
mContext = context;
mResources = resources;
mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mResources.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(mResources[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
Then put the following code into onCreate in your Activity:
mViewPager = (ViewPager) findViewById(R.id.pager);
// This is just an example. You can use whatever collection of images.
int[] mResources = {
R.drawable.first,
R.drawable.second,
R.drawable.third,
R.drawable.fourth,
R.drawable.fifth,
R.drawable.sixth
};
CustomPagerAdapter mCustomPagerAdapter = new CustomPagerAdapter(this, mResources);
mViewPager.setAdapter(mCustomPagerAdapter);
Take a look the following tutorial for more details: http://codetheory.in/android-image-slideshow-using-viewpager-pageradapter/
Of simply use Android Image Slider, it's a beautiful and simple to use Library :
https://github.com/daimajia/AndroidImageSlider