I am getting overlapped Fragments in PageViewer of Android .
PFB my layout for PageViewer
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="900dp"
android:layout_alignParentBottom="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#android:id/tabs" >
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
</TabWidget>
</RelativeLayout>
</TabHost>
I am calling it via my First Fragment Say FragmentA of first Tab . I need to replace it with Fragment A1
Calling this from the button click of list from BaseAdapter
Fragment duedateFrag = new FieldVisitFragment();
FragmentTransaction ft = fragmentActivity.getSupportFragmentManager().beginTransaction();
ft.replace(android.R.id.tabcontent, duedateFrag);
ft.commit();
My Fragment gets called but its overlapped on viewpager .
The tabs runs from below the new Fragment . kindly help
On the hindsight , I think somewhere Nested Fragment or Child Fragment should come into play . Please guide.
I have used ViewPager, extending from PagerAdapter. I think you're not referencing the correct layout, you're using id/tabcontent. I can show an example of what I did, and I think you can follow the same.
In the Fragment xml:
<LinearLayout
...
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/white" />
...
</LinearLayout>
In Fragment code :
mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
In the ViewPager code,
#Override
public Object instantiateItem(ViewGroup container, int position) {
...
View view = getActivity().getLayoutInflater().inflate(R.layout.pager_item, container, false);
...
return view
}
Note: I did not use FragmentTransaction class for displaying the fragment or the tab view.
Keep us posted...
Related
I have a view pager with circle indicator. Now my app has three fragments. First fragment show app logo, second fragment show some details about app and third fragment show that you are ready to use the app and then the MainActivity opened.
Now my previous problem was that i was unable to replace fragment as i wanted to show first fragment 5 seconds and then show next fragment. Now this problem is solved by this: `
private static int startPage = 5000;
new Handler().postDelayed(new Runnable() {
public void run() {
Fragment nextFrag= new LayoutTwo();
getActivity().getSupportFragmentManager().beginTransaction()
.replace(R.id.fragment_container, nextFrag)
.addToBackStack(null)
.commit();
}
},
startPage);
This code will replace the first fragment with second but the problem is that when second fragment shows then circle indicator is not showing in it although it works before replacing the fragment.
My xml code for viewpager is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#E3564C"
android:id="#+id/fragment_container"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/viewPager" />
Please Help why circle indicator is not showing after replacing first fragment with second?
Gradle
dependencies {
compile 'me.relex:circleindicator:1.2.2#aar'
}
Usage
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#E3564C"
android:id="#+id/fragment_container"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/viewPager" />
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="48dp"/>
</FrameLayout>
Add below code in main activity
Main Activity
ViewPager viewpager = (ViewPager) view.findViewById(R.id.viewpager);
CircleIndicator indicator = (CircleIndicator) view.findViewById(R.id.indicator);
viewpager.setAdapter(mPageAdapter);
indicator.setViewPager(viewpager);
i'm trying to do a three page which contains list fragment in an activity. All of the pages are fragment(from v4 support library) but i need list fragment inside them. When i tried that i have encountered a problem(https://stackoverflow.com/questions/29473626/viewpager-gives-error-if-i-turn-page) then i have done some research and learned that there can not be fragment(i mean xml fragment tag not adding dynamically nested fragment) in fragment. But for instance, in the last android update of whatsapp there are three page in one activity and one of them has list fragment(chat list) so i wonder how whatsapp have done that? Thanks.
my xml layout which contains list fragment:
<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" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="17dp"
android:text="Welcome to newsfeed" />
<Button
android:id="#+id/nfButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="52dp"
android:text="#string/signout" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/nfListFragment"
android:name="com.comp.buzz.newsfeed.NFQuestionFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
tools:layout="#layout/item_question" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
onCreativeView method of main fragment:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.activity_newsfeed, container, false);
Fragment fragment = new ListFragment();
FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
transaction.add(R.id.swipe_container, fragment).commit();
return view;
}
You can nest fragments with a few restrictions (according to the doc):
Android 4.2 or higher
You can nest them only programmatically
Update 1
Something like this should do the job:
Fragment fragment = new YourFragment();
FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
transaction.add(R.id.swipe_container, fragment).commit();
Let's say I have 2 fragments, one contain a list view and another contain a loading text. I want when I click on one list item, the loading text fragment appears on top of the list view. I have adjusted the opacity of the loading text background to: android:background="#33FFFFFF" . But still it just shows the loading text on a solid grey background.
<?xml version="1.0" encoding="utf-8"?>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#android:id/list"
android:background="#e8e9ee"
android:divider="#ccc"
android:dividerHeight="1dp"/>
Fragment that contains a textview:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/loadingText"
android:id="#+id/loadingText"
android:textColor="#e8e9ee"
android:background="#33FFFFFF"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
My java code is basically something like this: onItemClick:
FragmentTransaction transaction=manager.beginTransaction();
transaction.show(loadingFragment);
transaction.commit();
I did it and it works perfectly but instead of using .show I used .add:
Activity layout:
<RelativeLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp">
<FrameLayout
android:id="#+id/list_view_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
</FrameLayout>
<FrameLayout
android:id="#+id/loading_text_fragment_container"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
</FrameLayout>
</RelativeLayout>
In the Activity:
First add your List View:
ListViewFragment listViewFragment = new ListViewFragment();
fragmentManager.beginTransaction().add(R.id.list_view_container, listViewFragment).commit();
Then the loading text:
// Create a new Fragment to be placed in the activity layout
YourFragment yourFragment = new YourFragment();
// Add the fragment to the 'loading_text_fragment_container' FrameLayout
fragmentManager.beginTransaction().add(R.id.loading_text_fragment_container, yourFragment).commit();
In YourFragment.java
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.your_fragment_layout, container, false);
}
And the your_fragment_layout.xml has a common TextView without any special attribute.
Hope it to be useful,
regards!
I think you are actually replacing the original fragment rather than overlaying it. You should create two framelayouts that cover the full screen and then assign the loading fragment to the overlaying frame layout
in you activity
<FrameLayout id="#+id/ListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<FrameLayout id="#+id/LoadingFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
and then to load them
FragmentTransaction transaction=manager.beginTransaction();
transaction.add(R.id.ListFragment, listFragment);
transaction.commit();
FragmentTransaction transaction=manager.beginTransaction();
transaction.add(R.id.LoadingFragment, loadingFragment);
transaction.commit();
I have a tab that contains a linear layout with a searchview and a listview. When the user clicks one of the search results, I want to replace that layout with another layout containing the details of the selection.
What happens when I replace the search fragment only the listview portion of the layout gets replaced; the searchview is still visible and active on the screen.
Here is my search layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<SearchView
android:id="#+id/public_calendar_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:iconifiedByDefault="false"
</SearchView>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:choiceMode="singleChoice" />
<TextView
android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center"/>
</LinearLayout>
Here is the detail layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="vertical" >
<Space
android:layout_width="0dip"
android:layout_height="20dip"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal" >
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".1" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".8"
android:text="#string/label_Name" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".1" />
</LinearLayout>
.........
</LinearLayout>
And my code to replace the search fragment:
FragmentTransaction transaction = getFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack.
DetailFragment fragment = DetailFragment.newInstance(cal);
transaction.replace(R.id.search_layout, fragment);
transaction.addToBackStack(null);
transaction.commit();
Detail fragment creation:
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.detail_layout, container, false);
return v;
}
static DetailFragment newInstance(String cal) {
DetailFragment d = new DetailFragment();
return d;
}
What am I doing wrong? How can I get the entire search layout to be replaced.
Thanks!
I figured out my problem. Marco wasn't exactly right but he pointed me in the right direction.
The problem was the the container ID I was passing to the replace method was the ID of the fragment I was replacing, not the ID of the fragment container. This seems to explain why some of the original fragment controls were remaining after the replace - that entire fragment wasn't being replaced.
I changed it to get the fragment container view ID, and that worked! Here's the code:
transaction.replace(((ViewGroup)(getView().getParent())).getId(), fragment);
I found the answer for getting the container view ID of a fragment here, Get fragment's container view id.
I was using the correct ID, then also it wasnt going away. Turns out that you need to set the Background color to your needed color in new Fragment layout, like this.
<RelativeLayout 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:orientation="vertical"
android:background="#color/white_color">
To solve the problem, set the android:background property to “?android:windowBackground” in the fragment layout files.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:windowBackground"
tools:context=".MainFragment">
...
</LinearLayout>
In Fragment_2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:windowBackground"
tools:context=".SomeFragment">
...
</LinearLayout>
I was having the same problem, and the solution didn't work for me. Maybe this will help someone...
I had added a fragment inside the activity layout xml file. This caused a lot of issues.
Instead, add a frame layout in your xml file, and then programatically add and replace fragments. This causes the whole fragment to be replaced.
I had the same problem once, and this is my solution.
Try to do this, use FrameLayout instead of fragment in your layout file. Just like this:
<fragment android:id="#+id/your_fragment" />
Then, add your default fragment in activity method onCreate().
getFragmentManager().beginTransaction()
.add(R.id.your_fragment, YourFragment)
.commit();
Now, the old fragment can be replaced correctly, it looks great.
This worked for me, and I hope it helps you too.
I decided to use a ViewPager in my application and everything is working fine.
I Know that I want to use a PagerTitleStrip in my ViewPager, but I've failed to find any info on how to do it...
The one and only page (sic!!) I found on this class is http://developer.android.com/reference/android/support/v4/view/PagerTitleStrip.html
So it seems I just need to add the PagerTitleStrip within my ViewPager layout, but I don't see anything new on my activity...
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</android.support.v4.view.ViewPager>
Does anyone know how to use it?
Edited:
Sorry it works when implementing the getPageTitle method in the ViewPagerAdapter... but I don't want any text displayed, just a small cursor to show the position of the current View compared to the previous and next ones...
I'm not sure what causing error in your case but this is how I use it, in your layout you should insert following code in your layout:
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTitleStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
Then you should add the following code in your PageAdapter:
#Override
public CharSequence getPageTitle (int position) {
return "Your static title";
}
That's pretty it.
I had this issue too where the PagerTitleStrip was not visible. The answers above did not help. The problem was that I followed the example on http://developer.android.com/reference/android/support/v4/view/ViewPager.html.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mViewPager = new ViewPager(this);
mViewPager.setId(R.id.pager);
setContentView(mViewPager);
The code above shows the view pager but not the PagerTitleStrip.
I changed the code to
protected void onCreate(Bundle savedInstanceData) {
super.onCreate(savedInstanceData);
setTitle(R.string.my_title);
setContentView(R.layout.my_pager);
viewPager = (ViewPager)findViewById(R.id.pager);
res/layout/my_pager.xml:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#fff"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>
I was also able to be backward compatible to API 8 by removing all the code in the ViewPager (javadoc page) example to manipulate the ActionBar and ActionBar.Tab.
PagerTitleStrip is a non-interactive signal of the current, next, and former pages of a ViewPager. It really is designed to be used as a child view of a ViewPager widget
Step 1. Create layout activity_main.xml
<LinearLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.androidviewpagerapp.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<android.support.v4.view.ViewPager
android:id="#+id/myviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/titlestrip"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v4.view.ViewPager>
</LinearLayout>
Step 2. Create Activity contains ViewPager this (MainActvity.java)
public class MainActivity extends Activity {
ViewPager viewPager;
MyPagerAdapter myPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager)findViewById(R.id.myviewpager);
myPagerAdapter = new MyPagerAdapter();
viewPager.setAdapter(myPagerAdapter);
PagerTitleStrip pagerTitleStrip = (PagerTitleStrip)findViewById(R.id.titlestrip);
}
}
Demo : http://photo-wonder.blogspot.com/2016/09/pagertitlestrip-on-viewpager-android.html