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!
Related
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);
I have an image slider with the bottom code:
public class MainActivity extends Activity {
private class ImagePagerAdapter extends PagerAdapter {
private final int[] mImages = new int[] {
R.drawable.chiang_mai,
R.drawable.himeji,
R.drawable.petronas_twin_tower,
R.drawable.ulm
};
#Override
public void destroyItem(final ViewGroup container, final int position, final Object object) {
((ViewPager) container).removeView((ImageView) object);
}
#Override
public int getCount() {
return this.mImages.length;
}
#Override
public Object instantiateItem(final ViewGroup container, final int position) {
final Context context = MainActivity.this;
final ImageView imageView = new ImageView(context);
final int padding = context.getResources().getDimensionPixelSize(
R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setImageResource(this.mImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public boolean isViewFromObject(final View view, final Object object) {
return view == ((ImageView) object);
}
}
#Override
public void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
final ImagePagerAdapter adapter = new ImagePagerAdapter();
viewPager.setAdapter(adapter);
final CirclePageIndicator circleIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
circleIndicator.setViewPager(viewPager);
final TextView tvText = (TextView) findViewById(R.id.text);
tvText.setText(getResources().getString(R.string.bodyText));
}
}
And this is the XML code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:padding="10dip"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
So I need to set a text Hover on the Viewpager so that when I swipe it, it will show up for a specific picture. How can I create a hover text on this image slider while making it run automatically for some specific time, and after a swipe show a hover text.
Have you just one XML Layout? If you've two it makes it quite alot easier to work with.
So this layout below is where the actual image slider will be place on the Home Fragment in this case.
<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="com.example.****.****.HomeFragment"
android:background="#000000"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="fill_parent"
android:layout_height="204dp"
android:scaleType="centerCrop"
></android.support.v4.view.ViewPager>
Secondly, this XML Layout below is the Layout for the ViewPager itself. As you can see it is made up of an ImageView and a TextView. With the TextView placed on top of the ImageView.
Hope this helps a bit.
<?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">
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="centerCrop"
/>
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/image_view"
android:layout_alignTop="#+id/image_view"
android:layout_alignRight="#+id/image_view"
android:layout_alignBottom="#+id/image_view"
android:layout_margin="1dp"
android:gravity="bottom"
android:textSize="35dp"
android:text="******"
android:textStyle="bold"
android:textColor="#17baef" />
</RelativeLayout>
I have a ViewPager and it is working. It is showing one image and text on every page.
This is my adapter:
private class SuggestionsAdapter extends PagerAdapter implements ViewPager.OnPageChangeListener {
private LayoutInflater inflater;
private ViewPager pager;
public SuggestionsAdapter(ViewPager pager) {
this.pager = pager;
}
#Override
public void onPageSelected(int position) {
if (position == 0) {
pager.setCurrentItem(gallery.size(), true);
} else if (position == gallery.size() + 1) {
pager.setCurrentItem(1, true);
}
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
#Override
public int getCount() {
return gallery.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public Object instantiateItem(ViewGroup container, final int position) {
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = inflater.inflate(R.layout.one_suggestion_layout, container, false);
ImageView ivImage = (ImageView) itemView.findViewById(R.id.ivImage);
ivImage.setImageBitmap(gallery.get(position));
// Add viewpager_item.xml to ViewPager
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
// Remove viewpager_item.xml from ViewPager
container.removeView((RelativeLayout) object);
}
}
And I'm using very simple in my code:
ViewPager vpSuggestions = (ViewPager) findViewById(R.id.vpSuggestions);
SuggestionsAdapter sugAdapter = new SuggestionsAdapter(vpSuggestions);
vpSuggestions.setAdapter(sugAdapter);
This is mu xml for slider:
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="7">
<TextView
android:gravity="center"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/suggestions"
android:id="#+id/textView"
android:layout_gravity="center_horizontal" />
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/vpSuggestions" />
</LinearLayout>
And this is xml for one page:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ivImage1"
android:adjustViewBounds="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="0dp"
android:src="#drawable/cat_321_sofa" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="center"
android:id="#+id/tvTitle1"
android:padding="10dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_below="#+id/ivImage"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</LinearLayout>
Because the size of pager is rectangle (small height, huge width) I want to show two images in one page.
The pager now looks like this image:
I want to be like this image:
How can I do that?
The solution is to override getPageWidth() and divide it with 2
#Override
public float getPageWidth(int position) {
return (super.getPageWidth(position) / 2);
}
Halo guys, I followed the android developer steps:http://developer.android.com/training/animation/screen-slide.html
How can I call get the "btnRight" & "btnLeft" in MainJava to create a onClick function?
i have no idea about that, (???).findViewByID ?
btw, is there an another better coding design to create this effect?
i wanna create 3 page that can slide or maybe click to change screen, did i use this viewpager incorrectly? Is it probably add some new view instants of using the pagenumber trick?
please help me a bit, thanks!!
MainJava.java:
public class MainJava extends FragmentActivity {
private static final int NUM_PAGES = 3;
private ViewPager mPager;
private PagerAdapter mPagerAdapter;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
actionBar.hide();
mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter = new ScreenSlidePagerAdapter(getFragmentManager());
mPager.setAdapter(mPagerAdapter);
mPager.setCurrentItem(1);
}
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return ScreenSlidePageFragment.create(position);
}
#Override
public int getCount() {
return NUM_PAGES;
}
}
}
ScreenSlidePageFragment.java:
public class ScreenSlidePageFragment extends Fragment {
public static final String ARG_PAGE = "page";
private int mPageNumber;
public static ScreenSlidePageFragment create(int pageNumber) {
ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
Bundle args = new Bundle();
args.putInt(ARG_PAGE, pageNumber);
fragment.setArguments(args);
return fragment;
}
public ScreenSlidePageFragment() {
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPageNumber = getArguments().getInt(ARG_PAGE);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout containing a title and body text.
ViewGroup rootView = (ViewGroup) inflater
.inflate(R.layout.scroll_view_content, container, false);
//rootView.addView(inflater.inflate(R.layout.scroll_view_content, null));
View pageLeft = (View) rootView.findViewById(R.id.pageLeft);
View pageRight = (View) rootView.findViewById(R.id.pageRight);
View pageMain = (View) rootView.findViewById(R.id.pageMain);
if (mPageNumber==0){
pageLeft.setVisibility(View.VISIBLE);
pageMain.setVisibility(View.GONE);
pageRight.setVisibility(View.GONE);
}else if (mPageNumber==1){
pageLeft.setVisibility(View.GONE);
pageMain.setVisibility(View.VISIBLE);
pageRight.setVisibility(View.GONE);
}else if (mPageNumber==2){
pageLeft.setVisibility(View.GONE);
pageMain.setVisibility(View.GONE);
pageRight.setVisibility(View.VISIBLE);
}
return rootView;
}
public int getPageNumber() {
return mPageNumber;
}
scroll_view_content.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Dummy content. -->
<LinearLayout
android:id="#+id/pageLeft"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
style="?android:textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:lineSpacingMultiplier="1.2"
android:text="AAA" />
</LinearLayout>
<LinearLayout
android:id="#+id/pageRight"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
style="?android:textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:lineSpacingMultiplier="1.2"
android:text="CCC"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/pageMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#123456"
android:orientation="vertical" >
<TextView
android:id="#+id/textB"
style="?android:textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingMultiplier="1.2"
android:background="#654321"
android:text="BBB"/>
<LinearLayout
android:layout_below="#+id/textB"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<Button
android:id="#+id/btnLeft"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00ffff"
android:text="A"/>
<Button
android:id="#+id/btnRight"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffff00"
android:text="B"/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Thats simple really. You have to use the setCurrentItem(int) of the view pager class. The algorithm would be:
int currPage=1 //Points to second page in the viewpager
if left button clicked //listener for the button
2a. currPage--
2b. mPager.setCurrentItem(currPage) //pager is object of your viewpager class
if right button clicked //listener for the button
3a. currPage++
3b. mPpager.setCurrentItem(currPage)
Check out this link for for info.
I'm having problems working with fragments. The problem is: I have a layout in my activity with a ListView. When i select an item in this ListView, instantiates a fragment replacing the activity layout. My result is both fragment and activity contents are showing on screen, overlaying each other. What can I fix that (the fragment just replacing the activity content)? Here is the codes:
activityLayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/activity"
android:orientation="vertical">
<FrameLayout android:id="#+id/fragment_to_replace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
android:orientation="vertical"
android:layout_gravity="center" >
<TextView android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="#string/textView_select_table"
android:textSize="30dp"/>
<ListView android:layout_marginTop="20dp"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:id="#+id/listView"
android:visibility="visible"
android:paddingTop="40dp" />
</FrameLayout>
</LinearLayout>
Activity.java
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity);
View view = findViewById(R.id.activity);
//Getting the ListView
ListView listView = (ListView) view.findViewById(R.id.listView);
listView.setTextFilterEnabled(true);
//Setting the adapter
listView.setAdapter(new Adapter(this));
listView.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
//Creates a fragment
addFragment();
}
});
}
public void addFragment(){
MyFragment newFragment;
FragmentTransaction newFragmentTransaction = getSupportFragmentManager().beginTransaction();
newFragment = (MyFragment) getSupportFragmentManager()
.findFragmentById(R.id.fragment);
if (newFragment == null){
newFragment = new MyFragment(this, getSupportFragmentManager());
newFragmentTransaction.replace(R.id.fragment_to_replace,
new SelectDrinkFragment(this, getSupportFragmentManager()));
newFragmentTransaction.addToBackStack(null);
newFragmentTransaction.commit();
}
}
fragmentLayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="#string/textView_two"
android:textSize="20dp"/>
<LinearLayout android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="#string/textView" />
<TextView android:id="#+id/textView_two"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="visible"/>
</LinearLayout>
<TextView
android:id="#+id/textView_three"
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="#string/textView_three"/>
<ListView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/listView_two"
android:visibility="visible"
android:paddingTop="40dp" />
</LinearLayout>
Fragment.java
public View onCreateView(final LayoutInflater inflater, final ViewGroup container, Bundle saveInstanceState){
View view = inflater.inflate(R.layout.fragment, container, false);
final ListView listView = (ListView) view.findViewById(R.id.listView_two);
CharSequence [] list = getResources().getStringArray(R.array.array);
listView.setAdapter(new ListAdapter(getContext(), list));
return view;
}
ListAdapter.java
public class ListAdapter extends BaseAdapter{
private Context context;
private CharSequence[] drinkArraySize;
public ListAdapter(Context context, CharSequence[] array){
super();
this.context = context;
this.array= array;
}
#Override
public int getCount() {
return array.length;
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
public Context getContext(){
return context;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LinearLayout linearLayout = new LinearLayout(getContext());
RadioButton radioButton = new RadioButton(getContext());
radioButton.setText(array[position]);
linearLayout.addView(radioButton);
return linearLayout;
}
}
FragmentTransaction.replace() looks like it only replaces another fragment (and not just any View), so I'm pretty sure this is expected behavior (or at least, I know I've had this happen to me before). I suppose you have a few options:
I don't see in your code anything that would make the fragment's background opaque. You could try that first and see if it helps. If it does, that might be the simplest.
You could just set the other items' visibilities to View.GONE at the same time you perform your transaction, but that has some issues as far as backstack goes.
You could replace the ListView and TextView with a ListFragment instead. This is probably the "best" way to do it, but also is probably the most work.