I have CirclePageIndicator with three fragments. What I want is to embed same header and footer in all the fragments. When the user swipes the fragments the header and footer should be seen and accessible all the time. I found a solution and tried this way but doing this way the circles get missing or disappear from the view. I spent a lots of time but could not solve. This is my xml layout how I tried to embed according to the link:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above = "#+id/footer"
android:layout_below = "#+id/header" >
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<!-- Footer aligned to bottom -->
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FC0"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fixed Footer"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
</android.support.v4.view.ViewPager>
What am I doing wrong?
just put the circular indicator above the viewpager.. or they would swipe out with the pager..
<relative layout>
<circular indicator />
<viewpager ><--- ---->
</relative layout>
Related
I have a viewpager implemented on my app. In all my fragments I have circlepageindicator, header and footer. My main xml file is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.example.app"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Header aligned to top -->
<include layout="#layout/header" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="33dp"
app:radius="4dp"
app:fillColor="#00CCFF"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dip" />
</RelativeLayout>
<!-- Footer aligned to bottom -->
<include layout="#layout/footer" />
</RelativeLayout>
My header.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/header"
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_centerInParent = "true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/app" />
</RelativeLayout>
My footer.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/footer"
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true" >
<ImageView
android:id="#+id/foot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/app_rotate" />
The output of the code is:
As you can see, the header part is below the background of the fragment but the footer is not. I want to see my header like the footer is. As you can see I have provided all the xml attributes to header like footer but why the output is not same? I hope I get some help from you. Thanks in advance.
Z-order of elements is a "last one on top" model.
Move this line:
<include layout="#layout/header" />
To come after the main body:
</RelativeLayout>
<include layout="#layout/header" />
<!-- Footer aligned to bottom -->
<include layout="#layout/footer" />
I'm trying to put ImageView and TextView in ViewPager circle indicator. I want to display text below to Imageview, but the text is getting hide by footer which has circle indicator. Please suggest how can I adjust three of them in a layout. Layouts are :
ViewPager :
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp"
android:layout_weight="0.8"
android:background="#color/white"
android:orientation="vertical" >
<!-- ViewPager -->
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<!-- Footer -->
<include layout="#layout/footer" />
</FrameLayout>
Footer which has circle indicator:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:layout_gravity="bottom"
android:orientation="vertical" >
<Button android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/btn1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/rounded_celll" />
<Button android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/btn2"
android:layout_toRightOf="#id/btn1"
android:layout_marginLeft="5dip"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/rounded_celll" />
</RelativeLayout>
This is the layout1 which will be displayed in ViewPager :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
android:orientation="vertical"
android:layout_gravity="top|center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sp1"
android:layout_weight="0.7"/>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="0.3"
android:textColor="#color/black"
android:textStyle="bold"
android:text="First Layout First Layout First Layout First Layout "
/>
Lets say as of now you have three layouts -
1) Main layout (which has view pager)
2) footer layout
3) layout having imageView and textView
To achieve your goal, you can do below steps -
remove "<include layout="#layout/footer" from mail layout and add it as a part of 3) layout.
This footer view will also be part of viewPager.
I have a problem to layout my view.
I want the "buttonsLayout" to dock at the bottom of the view. That is no problem, but my "buttonsLayout" overlays the "pager". I want that the "pager" stops, where the "buttonsLayout" begins.
I have read so many posts, but nothing helps. What is wrong ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<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:layout_alignParentTop="true"
android:background="#color/gray" >
</android.support.v4.view.ViewPager>
<RelativeLayout
android:id="#+id/buttonsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Left" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Right" />
</RelativeLayout>
</RelativeLayout>
Add android:layout_above = "#+id/buttonsLayout" to your pager layout. So pager will never overlay buttons.
P.S. I cant see one more closing RelativeLayout tag in your xml...
I have created one scroll view with two list Fragments here is the code:
<?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:background="#drawable/blue_shade_top_gainers_and_loosers"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="1dip"
android:paddingLeft="1dip"
android:paddingRight="1dip"
android:paddingTop="2dip" >
<fragment
android:id="#+id/header_fragment"
android:name="com.lk.ignitionit.cse.util.HeaderFragmentActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView13"
android:layout_width="fill_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/rl_top"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="1dip"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:layout_marginTop="1dip"
>
<LinearLayout
android:id="#+id/headg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" >
<include layout="#layout/top_gainer_header" />
</LinearLayout>
<fragment
android:id="#+id/gain"
android:name="com.lk.ignitionit.cse.application.TopGainersFragmentActivity"
android:layout_width="match_parent"
**android:layout_height="wrap_content"**
android:layout_below="#+id/headg" />
<LinearLayout
android:id="#+id/headl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/gain" >
<include layout="#layout/top_loosers_header" />
</LinearLayout>
<fragment
android:name="com.lk.ignitionit.cse.application.TopLoosersFragmantActivity"
android:layout_width="match_parent"
**android:layout_height="wrap_content"**
android:layout_below="#+id/headl" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
but the out put is not show the entire list
then i change the fragment layout height into 240dip instead of "wrap_content" now it's enough to show entire list.
but the thing is, those data is dynamic and each list fragment have 10 list items.so i can't predict the the fragment height. if the names are long, this height is not enough.
so i need to set fragment height as wrap_content and scroll able. how can i do this?
There are several questions already on SO for this. There seems to be no perfect answer, but there are several pointers. Please do a search for them. One example:
Scrolling with multiple listviews for android
I am using a view pager inside my main view. Depending on the content of the frames I add one of two xml files. The first one is this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff"
android:layout_margin="6dip">
<!-- header -THIS is the source of the problem! -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:textSize="32dip"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- content -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<TextView
android:text=""
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</ScrollView>
<!-- footer -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="Expires on..."
android:gravity="right"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
The alternative xml file is identical apart from the fact that the scrollview's child is an ImageView instead of a TextView.
Now, when using the textview all works fine. I can make use of the scrollview to scroll the text in the view up and down. However, when I use the layout with the imageview the image is frozen and the scrollview does not move it up and down.
Does anybody have any idea why this is??