Circle Indicator not showing when replacing fragment with fragment - android

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);

Related

Fragment getting overlapped in ViewPager

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...

Having trouble with starting a new fragment, app is built using ViewPager Swipe template

I have an activity that holds a ViewPager, set up as the template Swipe ViewPager. I have attached two fragments to that ViewPager via an adapter. I am now trying to open a new fragment but I am having great trouble getting it to work. I don't fully understand this idea of changing fragments with FragmentTransaction (I tried reading the Android docs to no avail) so I pieced the FragmentTransaction code together from places over the web.
This is my activity_main.xml
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"/>
This is the code I used to try to open the fragment
private void openVolumeSettingsFragment() {
Activity activity = getActivity();
FragmentTransaction transaction = activity.getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.pager, new VolumeSettingsFragment());
transaction.addToBackStack(null);
transaction.commit();
}
This is the blank xml file for my new fragment fragment_volume_settings.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="com.velixo.bitchtalkandroid.fragments.VolumeSettingsFragment">
<ListView
android:id="#+id/volume_settings_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
The only thing this does is freezes my current fragment from being swipeable. Does anybody have any idea of what I should be doing?
Posted the same question on reddit, x-posting the answer from jeffinmadison in case anyone reading this question will need it:
If you want to replace the pager fragment with your settings fragment you should make the activity_main be a FrameLayout with a #+id/content and within the FrameLayout put the ViewPager with #+id/pager and then call the replaceFragment on the R.id.content
<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"
android:id="#+id/content">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"/>
</FrameLayout>

Add ViewPager to Activity which extends superclass with a Navigation Drawer

I have several activities which extend my class DrawerActivity, so they will have a navigation drawer. Only one of these activities requires a ViewPager.
Question: How can I add a ViewPager to only one of the activities, ActivityA?
I am somewhat familiar with creating a ViewPager, but in this situation I'm unsure of where to put the ViewPager code, and what layouts to use. I've seen a few examples including the official tutorial on Google's developer site, but I'm not sure how to best implement it into my application.
I've provided some relevant code below, but please let me know if you need to see more. Any advice is appreciated, thanks!
In DrawerActivity's onCreate:
setContentView(R.layout.activity_fragment);
if (fragment == null)
{
fragment = createFragment();
fm.beginTransaction()
.add(R.id.fragmentContainer, fragment)
.commit();
}
Layout activity_fragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
<ListView android:id="#+id/leftDrawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
In ActivityA:
public class ActivityA extends DrawerActivity
{
//this is all I do in this activity
#Override
protected Fragment createFragment()
{
UUID id = (UUID) getIntent().getSerializableExtra(FragmentA.EXTRA_ID);
return FragmentA.newInstance(id);
}
}
In FragmentA's onCreateView:
View v = inflater.inflate(R.layout.fragment_a, parent, false);
Layout fragment_a.xml is a simple LinearLayout with a few Button and TableLayout children.
fragment_a.xml:
<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.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
and create an adapter for example FragmentStatePagerAdapter and fill it with what you want to show in viewpager. notice that because you are using viewpager inside a fragment you should pass ChildFragmentManaget instead of activity FragmentManager.

Android: Fragment overlay another fragment with semi transparent

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();

Creating a Multi-pane layout using android actionbar and navigation drawer

I'm currently creating an app which can handle different screen support and multi-pane view using fragments. Now I used the default navigation drawer and actionbar using android studio and created two fragments to test for this and layouts for portrait: fragment_1 and fragment_2 which just replaces the container on the MainActivity. But now the problem is how can I implement the fragment_1 and fragment_2 in 1 layout? I Tried to research on the multi-pane development on this link but I think to properly implement it I need to use an ActivityFragment but in this case I am limited on using just Fragments which is why I'm lost on what to do. Here's the code so far:
#Override
public void onNavigationDrawerItemSelected(int position) {
// update the main content by replacing fragments
FragmentManager fragmentManager = getSupportFragmentManager();
switch (position) {
case 0:
fragmentManager.beginTransaction()
.replace(R.id.container, FragmentMain.newInstance(position + 1))
.commit();
break;
case 1:
fragmentManager.beginTransaction()
.replace(R.id.container, FragmentAbout.newInstance(position + 1))
.commit();
break;
/*create the other cases here for navigation*/
}
}
fragment_main.xml (the 1st 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"
tools:context="com.kahel.main.MainActivity$PlaceholderFragment">
<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">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list_news"
android:choiceMode="singleChoice" />
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
fragment_about.xml (2nd 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"
tools:context="com.kahel.main.MainActivity$PlaceholderFragment">
<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">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list_news"
android:choiceMode="singleChoice" />
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
fragment_main.xml (landscape)
<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"
tools:context="com.kahel.main.MainActivity$PlaceholderFragment"
android:orientation="horizontal"
android:weightSum="1">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe_container"
android:layout_width="#dimen/land_scoop_feed"
android:layout_height="match_parent">
<ListView
android:layout_width="150dp"
android:layout_height="match_parent"
android:id="#+id/list_news"
android:choiceMode="singleChoice" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
When I tried to change the layout it just force close my app. :/
Please let me know what to do or what to search for. Thanks! :)
Well, I ran into the exact same problem and after doing a lot of research I was surprised on the lack of documentation for this, in my opinion, common situation. But, after trying a few things I came up with a solution.
My first approach was to replace the Navigation Drawer container with a "root fragment" that at the same time would have two layouts available containing the fragments that I want. The problem was that nested fragments declared on the layout are not permitted.
To overcome this other issue, in my "final layouts" I replaced the Fragment definitions for FrameLayouts and then load the fragments programatically on the "root fragment".
To summarize: You have your Navigation Drawer and upon clicking what you want, you replace your fragment container with a "root fragment". This "Root fragment" has two layouts: a default one and another for landscape. These layouts contain FrameLayout elements arranged as we want that upon initialization are replaced by our "final fragments".
I doubt that this is the best way to achieve the goal of having Multi-pane layouts with a Navigation Drawer but is what I was able to do that best suited my needs. I welcome any suggestions!.
I illustrate the solution with some code.
MainActivity.java (The one with the navigation drawer)
...
void drawerOptionSelected(String option) {
if(option.equals(XXXX)) {
Fragment fragment = new RootFragment();
final FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.replace(R.id.content_frame, fragment);
transaction.commit();
drawerList.setItemChecked(menuOptions.indexOf(option), true);
drawerLayout.closeDrawer(drawerList);
}
}
...
root_fragment_layout.xml (Default)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/entries_list_single"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent" />
root_fragment_layout.xml (Landscape)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout android:id="#+id/entries_list"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent" />
<FrameLayout android:id="#+id/entries_post"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent" />
</LinearLayout>
RootFragment.java
public class RootFragment extends Fragment {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.root_fragment_layout);
if(savedInstanceState != null) { //Fragments already loaded, avoid replacing them again
return;
}
ListFragment listFragment = new ListFragment();
final FragmentTransaction transaction = getChildFragmentManager().beginTransaction(); //IMPORTANT! Use child fragment manager
if (findViewById(R.id.entries_list_single) == null) { //We are loading the landscape layout
PostFragment postFragment = new PostFragment();
transaction.replace(R.id.entries_list, listFragment);
transaction.replace(R.id.entries_post, postFragment);
transaction.commit();
} else { //We are loading the default layout
transaction.replace(R.id.entries_list_single, listFragment);
transaction.commit();
}
}
}

Categories

Resources