Develop Reference

Image Slider Using View Pager(With Transparent Toolbar)

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.

MultiViewPager with multiple view

I have a problem,I can't figure out how do i add images to my MultiViewPager.
i have seen a lot of examples but i don't understand what should i do after i create the MultiViewPager layout.
<com.pixplicity.multiviewpager.MultiViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
app:matchChildWidth="#+id/iv_gallery" />
this is my image xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/iv_gallery"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
this is my java code :
pager = (MultiViewPager) findViewById(R.id.pager);
pager.setAdapter(new PagerAdapter() {
#Override
public int getCount() {
return images.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == (ImageView) object;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
Context context = getApplicationContext();
final ImageView imageView = (ImageView) findViewById(R.id.iv_gallery);
imageView.setImageResource(images[position]);
return imageView;
}
});
what is wrong?
Thank you

In your function instantiateItem() you need to add the view you created to the container param passed in.
like that
container.addView(imageView);

ScrollView inside ViewPager

Please Help me.
I searched everywhere how I can make a ScrollView inside a ViewPager but it was not successfully. The hole layout of the ViewPager should be scrollable.
Important: I only want a ScrollView in the vertical.
Already now I want to say thanks for the answers!
My code
"Main"
public class Rezepte2 extends Fragment {
// Declare Variables
ViewPager viewPager;
PagerAdapter adapter;
String[] rezeptTitel;
String[] naehrwerte;
String[] zubereitung;
int[] rezeptImage;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Get the view from viewpager_main.xml
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View layout = inflater.inflate(R.layout.rezepte_fragment, container, false);
// Generate sample data
rezeptTitel = new String[] { "Nudeln","Fleisch" };
naehrwerte = new String[] { "50kcal","70kcal" };
zubereitung = new String[] { "ganz easy","voll easy" };
rezeptImage = new int[] { R.drawable.ic_action_next_item, R.drawable.ic_action_next_item,
R.drawable.ic_launcher, R.drawable.ic_action_next_item };
// Locate the ViewPager in viewpager_main.xml
viewPager = (ViewPager) layout.findViewById(R.id.viewPager);
// Pass results to ViewPagerAdapter Class
adapter = new ViewPagerAdapter(getActivity(), rezeptTitel, naehrwerte, zubereitung, rezeptImage);
// Binds the Adapter to the ViewPager
viewPager.setAdapter(adapter);
return layout;
}
Adapter
public class ViewPagerAdapter extends PagerAdapter {
// Declare Variables
Context context;
String[] rezeptTitel;
String[] naehrwerte;
String[] zubereitung;
int[] rezeptImages;
LayoutInflater inflater;
public ViewPagerAdapter(Context context, String[] rezeptTitel, String[] naehrwerte,
String[] zubereitung, int[] rezeptImages) {
this.context = context;
this.rezeptTitel = rezeptTitel;
this.naehrwerte = naehrwerte;
this.zubereitung = zubereitung;
this.rezeptImages = rezeptImages;
}
#Override
public int getCount() {
return rezeptTitel.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((RelativeLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
// Declare Variables
TextView txtrezeptTitel;
TextView txtnaehrwerte;
TextView txtzubereitung;
ImageView imagerezept;
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = inflater.inflate(R.layout.rezepte_fragment_basic, container,
false);
// Locate the TextViews in viewpager_item.xml
txtrezeptTitel = (TextView) itemView.findViewById(R.id.rezeptTitel);
txtnaehrwerte = (TextView) itemView.findViewById(R.id.naehrwerte);
txtzubereitung = (TextView) itemView.findViewById(R.id.zubereitung);
// Capture position and set to the TextViews
txtrezeptTitel.setText(rezeptTitel[position]);
txtnaehrwerte.setText(naehrwerte[position]);
txtzubereitung.setText(zubereitung[position]);
// Locate the ImageView in viewpager_item.xml
imagerezept = (ImageView) itemView.findViewById(R.id.image_rezepte_basic);
// Capture position and set to the ImageView
imagerezept.setImageResource(rezeptImages[position]);
// Add viewpager_item.xml to ViewPager
((ViewPager) container).addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
// Remove viewpager_item.xml from ViewPager
((ViewPager) container).removeView((RelativeLayout) object);
}
}
SwipeView xml
`
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>`
ViewPager fragment xml
`
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_red_light" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/rezeptTitel"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/ic_launcher"
android:id="#+id/image_rezepte_basic"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/naehrwerte" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/zubereitung" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>´

maybe you're just not scrolling correctly - an emulator doesn't really have a touch screen. You have to touch and hold part of it while panning with another finger

How to enable full page swiping in viewpager?

How can I make swipe available in the middle of the screen on the VIewPager? Like on the app store, you can swipe anywhere to go to the next tab! Currently that happens only when I swipe from the extreme corner of the screen(Bezel Swipe)
MY code:
public class SwipeFragment extends Fragment {
ViewPager viewPager;
SlidingTabLayout slidingTabLayout;
ArrayList<String> tabs;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.swipe_fragment, container, false);
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
tabs = new ArrayList<String>();
tabs.add("Image");
tabs.add("Something Else");
tabs.add("Some Long Title");
tabs.add("Songs");
tabs.add("Off The Page!");
viewPager = (ViewPager) view.findViewById(R.id.viewPager);
viewPager.setAdapter(new VPAdapterHelper());
slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.slidingTabs);
slidingTabLayout.setViewPager(viewPager);
}
public class VPAdapterHelper extends PagerAdapter {
#Override
public int getCount() {
return tabs.size();
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View view = getActivity().getLayoutInflater().inflate(R.layout.pager_item, container, false);
container.addView(view);
ListView listView = (ListView) view.findViewById(R.id.VP_ListView);
// TODO set different adapters for different tabs
listView.setAdapter(new AdapterHelper(context));
return view;
}
#Override
public boolean isViewFromObject(View view, Object obj) {
return obj == view;
}
#Override
public CharSequence getPageTitle(int position) {
return tabs.get(position);
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
swipe_fragment.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.nischal.test.SlidingTabLayout
android:id="#+id/slidingTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1" />
</LinearLayout>
pager_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:orientation="vertical">
<ListView
android:id="#+id/VP_ListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
I want to be able to swipe to different tabs from anywhere on the page.
I tried overriding the DragListner of the container and dispatched a draylistner to the viewpage, but did not help!
Any help will be appreciated!

Found the answer to my own question. The problem seems to be in the listview item layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="1dip"
android:paddingBottom="1dip"
android:paddingStart="8dip"
android:paddingEnd="8dip">
<ImageView
android:id="#+id/CL_imageView"
android:layout_width="48dp"
android:layout_height="48dp" />
<TextView
android:id="#+id/CL_textView"
android:layout_width="match_parent"
android:layout_height="48dp"
android:ellipsize="end"
android:gravity="center"
android:lineSpacingMultiplier="1.2"
android:singleLine="true"
android:text="New Text"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
here, the textview gravity tag was set to center, which for some reason caused the whole problem. removed the gravity tag and problem solved!

Using viewpager for scrolling children inside a view

I have a menu which looks like this http://flashspeaksactionscript.com/wp-content/uploads/2008/06/vert-menu18.jpg Considering the child as that "3" in the picture I would like to be able to swipe that "3" to the left and see be able to see another item.
Here's my xml code:
<LinearLayout
android:id="#+id/llayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" >
<Button
android:id="#+id/Sum"
style="#style/SummaryButtons"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Item 1" />
<Button
android:id="#+id/nana"
style="#style/SummaryButtons"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Item 1" />
<Button
android:id="#+id/mama"
style="#style/SummaryButtons"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="Item 1" />
</LinearLayout>
<LinearLayout
android:id="#+id/example_get_by_id"
android:layout_width
etc. These are the children. For example I want to be able to swipe through these buttons, just because I cannot use HorizontalScrollViewbecause my application is consisted of fragments and already has a swipe ability to surf through fragments. The swipe ability for those fragments and HorizontalScrollView get mixed up so, that's why I need to be able to use Viewpager for single items and not the whole page. Is there any at least an example for this? I couldn't find anything.
Thanks in advance.

have a look this may be useful to you:
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageArra);
ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
myPager.setAdapter(adapter);
myPager.setCurrentItem(0);
}
private int imageArra[] = { R.drawable.gallery_photo_1, R.drawable.gallery_photo_2,
R.drawable.gallery_photo_3, R.drawable.gallery_photo_5,
R.drawable.gallery_photo_6, R.drawable.gallery_photo_7,
R.drawable.gallery_photo_8, R.drawable.ic_launcher };
}
and ViewPagerAdapter:
public class ViewPagerAdapter extends PagerAdapter {
Activity activity;
int imageArray[];
public ViewPagerAdapter(Activity act, int[] imgArra) {
imageArray = imgArra;
activity = act;
}
public int getCount() {
return imageArray.length;
}
public Object instantiateItem(View collection, int position) {
ImageView view = new ImageView(activity);
view.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));
view.setScaleType(ScaleType.FIT_XY);
view.setBackgroundResource(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 Parcelable saveState() {
return null;
}
}
xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/myfivepanelpager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" >
</ImageView>
</android.support.v4.view.ViewPager>
</LinearLayout>