Using the latest Android Support Package v4 (December 2011), I'm trying to implement a ViewPager with a PagerTitleStrip to show the title of the three panes in my UI.
I've read the sparse docs and successfully created the title strip at the top of my view, using the following XML:
<android.support.v4.view.ViewPager
android:id="#+id/mypager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<android.support.v4.view.PagerTitleStrip
android:layout_gravity="top"
android:id="#+id/titlestrip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:duplicateParentState="true" />
</android.support.v4.view.ViewPager>
However, my view now has a "gap" at the bottom of the layout, with height precisely the same as the title strip. If I increase the size of the title strip at the top of the UI, the gap at the bottom of my view also enlarges. It's as if there is a bug in PagerTitleStrip which is incorrectly placing the title strip at both the top and the bottom, even though it's only displaying it at the top.
If I set layout_gravity to "bottom" instead of top, the strip shows correctly, i.e. at the bottom of the view without any strange artifacts at the top. And if I remove the title strip, the gap disappears.
Anyone have a solution to this, or seen it in their code as well?
When you add views to your view pager in instantiateItem, make sure you call addView(view), NOT addView(view, 0).
This fixed this issue for me.
Related
I'm struggled with this for hours looking for solution on google and stackoverflow. Thought that this is some trivial bug in my app but finally made empty project and can reproduce this too. Just run new project and select "Tabbed Activity" with navigation style "Action Bar Tabs (with ViewPager)
Then try to put any widget at the bottom of the fragment's layout. I did this by modify fragment_main.xml and adding:
android:layout_height="match_parent"
android:gravity="bottom"
android:textAlignment="center"
So the whole layout is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity$PlaceholderFragment">
<TextView
android:id="#+id/section_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:gravity="bottom"
android:text="aaaaaaa"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1" />
</android.support.constraint.ConstraintLayout>
In design mode everything looks fine:
But when you run app:
You will see text only when you swipe action bar to hide it:
So it is impossible to set widget at the bottom of the tab's fragment or even match some list/picture to the height of the parent because bottom edge will be always under navigation bar.
Workaround which I found is here:
ViewPager with Toolbar and TabLayout has wrong height
First one is to put AppBarLayout and ViewPager between LinearLayout but then I lose hidding action bar functionality when scrolling ViewPager's content. Second one is add android:paddingBottom="?attr/actionBarSize" in ViewPager but then there is a gap when I hide action bar. Seriously there is no solution for this?
I think this is an expected behavior since the ActionBar gets hidden when scrolling up. In the design mode the text can be shown because it doesn't display the TabLayout. However, when you launch the app, it will inflate the TabLayout and the fragment will go below it. So it's not like the fragment is getting expanded or giving you wrong height.
Imagine putting an ImageView that has a matching height of the visible field (from below the TabLayout to right above the navigation menu). When you hide action bar from there, it will have a gap on the bottom since there's no content to fill up the space of hidden action bar, unless you stretch the ImageView as you scroll up, which will result in wired stretched image :/
One possible solution I can think of is, if you want to add a view on the bottom of the fragment, I will set the actionbar padding to the view and when I scroll the screen, I will adjust the padding depends on the scroll offset so that I can always be on the bottom.
I have a tabstrip Layout that has been taken from the google github (latest version) and I am having trouble with the tabstrip as there is a gap between the indicator line and the bottom of the tabstrip. To make it more clear the layout consists of a viewPager(white) which goes below the Tabstrip(green), they are both different colors. the text Views in the Tabstrip are evenly distributed along the x axis but not on the Y axis hence there is a gap of green below the Tabstrip. I want to remove this gap but have the same height and when I do reduce the height the text is pushed up.
Code xml layout (in Linear Layout)
<!-- The pager that allows us to swipe between fragments -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#android:color/white" />
I also want to try different colours for the indicator and if not remove it and finally I want to change the colour of the text.
Any help is appreciated. Thanks in advance.
the black part is a video View I left that out of the code
As the title says, I'm setting using setActionView on a MenuItem, here's the layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_margin="4dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
The issue is that the ProgressBar appears aligned to the right. (It should be aligned to the center, same as the MenuItem icon. Icons are 32dp
How can I achieve this?
I faced similar issue today and coudn't find any good QA on SO. Hence I did some research. Here are my findings on the matter:
Android Menu is implemented in this way:
If you have inflated an actionView to have:
icon (optional)
title (optional, or to say it can be made optional by setting it as "")
a custom view
and you don't set icon, set title as "" and set actionView to make the menuItem appear to contain only the custom view which you inflated using setActionView, then:
Android forces the custom view's width to be wrap_content and remaining area gets occupied by icon+title of the menuItem.
We can think of this implementation as:
Think of the entire view after margin as ParentLinearLayout which is divided into LinearLayout1 and LinearLayout2 (depicted in the image above as Layout 1 and Layout 2 respectively)
Now LinearLayout1 has width=0dp and weight=1
And LinearLayout2 has width=wrap_content
Hence no matter what we set, currently, we cannot right align the inflated custom view (action view) in menu.
To be technically accurate, you can right align if you really need this done by checking out the internal implementation code for the navigation menu by Android. But not really worth the effort. Any feature is a tradeoff of time required vs outcome.
Try this android:layout_gravity="center"
You should try android:gravity="center" in RelativeLayout.
I need to do a Sliding Up View wich should slide up from the bottom of the screen when I click a button. It has to show on the bottom of the screen and I need to slide/drag it to the center of the screen. The images below explain it better.
almost like the AndroidSlidingUpPanel from "umano" which you can find here:
The problem is that I want the first child (The content of my View - an image for example) to fill all the screen and also I want the second child(the actual bottom bar) to be showed when I click a button. The images below explain it better. If there is not possible to do this by changing the AndroidSlidingUpPanel, how can I do that? I have never worked with views like this. I would really appreciate any tip or help. Thank you very much.
To hide or show panel, you can use
showPanel()
method.
To hide it try this:
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.hidePanel();
To make it appe
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.showPanel();
This is available only in v 2.0 of AndroidSlidingUpPanel (https://github.com/umano/AndroidSlidingUpPanel). As I know, it's included in android support library v13 now, but not sure if there is latest version.
You can check this library for dragging content from all four edges of the screen https://github.com/SimonVT/android-menudrawer
You can make a custom layout inside this menu drawer to get your expected result.
You can do it with AndroidSlidingUpPanel, just set visibility:
android:visibility="GONE"
on the 2° child of the view (the panel) and use .showPane() and .hidePane() on SlidingUpPanelLayout to show/hide the panel when you click the button.
The following library do it as well
https://github.com/Paroca72/sc-widgets
Inside you will find a widget named ScSlidingPanel.
This widget work different from the other and can be use and customize very easily.
You put it inside a RelativeLayout give an alignment and it will open from that side.. Left, Right, Top and Bottom or mixed..
In your specific case your must align your panel at bottom of the container and it will sliding from the bottom.
<!-- Define the container -->
<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=".MainActivity">
<!-- Sliding from top -->
<scapps.com.library.ScSlidingPanel
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<!-- HERE THE YOUR CONTENT -->
<!-- or you can load by setLayout method -->
</scapps.com.library.ScSlidingPanel>
</RelativeLayout>
Another important property that you can use right for your case is the handle size.
You can define an handle and define the beavior of it.. as your image above you used a button.. you can unsing an image and setting setToggleOnTouch() to true for open/close the panel touching on handle.
I'm tryintg to implement Caldroid calendar in my app with few modifications. There is custom ViewPager there:
<com.antonyt.infiniteviewpager.InfiniteViewPager
android:id="#+id/months_infinite_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp"/>
Pager is located under one parent layout. What I wanted was to position the pager inside it's parent using margin or padding. It appears that setting side (left, right) margin or padding makes the app loop somewhere inside ViewPager onMeasure() method.
Can't find any information, that ViewPager can't have a parent with side margin/padding set. onMeasure() contains now only super.onMeasure(widthMeasureSpec, heightMeasureSpec) and It seems that it loops in native libraries for some reason. That doesn't happen without margin/padding
Problem was in the container layout:
<LinearLayout
android:id="#+id/right_page"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="vertical" >
Just a layout taking half of the screen, so what? It seems the problem was android:layout_width="1dp". Change to android:layout_width="200dp" helped. it doesn't matter if it's 200, 100 or any other number. I think the ViewPager was positioning itself on 1dp first, and then recalculated from percentage width, but just guessing