I have a ViewPager that shows 3 fragments. One of the fragments has got a WebView and I am experiencing 2 issues:
1) It seems that the size of the ViewPager (height) is bigger than the screen size. (see following image)
2) Scrolling is working correctly when switching from a tab to another on, while it is not working vertically when the APP is landscape orientation.
When in landscape mode I can scroll up the page touching the toolbar and the TabLayout but I cannot scroll up touching the WebView.
What I am trying to do is to scroll up touching the WebView and not only the Tab or Toolbar.How can I do that?
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="com.it.rocks4x4.activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<!--
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="REGISTRA"
android:elevation="6dp"
android:textSize="18dp"
android:textColor="#color/black"
app:layout_anchor="#id/fab"
app:layout_anchorGravity="center"/>-->
<TextView
android:id="#+id/fab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="10dp"
android:background="#drawable/button_shape"
android:elevation="10dp"
android:fontFamily="sans-serif"
android:gravity="center"
android:text="#string/msg_inizia_registrare"
android:textColor="#FFF"
android:textSize="#dimen/size25sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="28dp" />
</android.support.design.widget.CoordinatorLayout>
fragment
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/black"
tools:context="com.it.rocks4x4.activities.MainActivity$PlaceholderFragment">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/webviewbussola"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Thanks
Related
I have a TabLayout having menus and a chat screen, Previously the TabLayout was align on top of the screen. I just change the Tab layout to bottom,
After TabLayout change to bottom when comes to chat screen (chat screen edit text in bottom position) UI is flickering
Now chat edit text shows just above of TabLayout, I don't know is it related to focus issue
is there any reason for UI flickering ?
Layout
<?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-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MissingPrefix">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/tb_toolbar_main_activity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/tb_heading"
fontPath="#string/font_bebas_neue_bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp"
android:text="#string/app_name_caps"
android:textAlignment="center"
android:textColor="#color/heading_color"
android:textSize="#dimen/toolbar_title_text" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_back_selected"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabSelectedTextColor="#android:color/white"
app:tabTextAppearance="#style/MyTabLayoutTextAppearance"
app:tabTextColor="#color/home_sub_text" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#id/app_bar"
android:layout_above="#id/tabs"/>
</RelativeLayout>
I have been following the a toturial to make a material design with tabs from Android Hive.
Now I am trying to add a ScrollView in a fragment. The fragment is added to the ViewPager. But it does not show the last +-50 dp of the content in ScrollView. I think it is somewhere in the layout_height propperty but i do not know how to fix this.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Fragment_one.xml:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scroll"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
tools:context="com.a42.pthong.philips.CompanyFragment">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:orientation="vertical">
<TextView
android:text="#string/title"
android:id="#+id/textView"
android:textSize="20sp"
android:textStyle="bold"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/content1"
android:text="#string/content"
android:textSize="12sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
This is because you are using CoordinatorLayout with ScrollView. Change your implementation to android.support.v4.widget.NestedScrollView to achieve correct scroll.
CoordinatorLayout scroll works properly with the children of NestedScrollingChild.
Same sort of question was answered here by me.
I observed that adding appbar_scrolling_view_behavior to a ViewPager and that viewPager is not fullScreen (in my case contains some bottom buttons/tabs), then the viewPager has a bigger height (with the height of the toolbar I guess) and overlaps with the other layout(in my case those tabs)
See the images below (one is with the toolbar scrolled up)
This is the xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".AudioRecActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomLayout">
<android.support.design.widget.AppBarLayout android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar android:id="#+id/acb_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/bottomLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<audiorec.com.gui.views.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/secondary" >
</audiorec.com.gui.views.SlidingTabLayout>
<FrameLayout
android:id="#+id/adsContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/secondary" >
<TextView
android:id="#+id/loading_ad_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/advertisement_loading"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff" />
</FrameLayout>
</LinearLayout>
How the ViewPager/CoordinatorLayout content can be under that Linearlayout if I specified not to be?
I found an answer here:link and works for me as well
It appears it is a "problem" from android team....see here: issue on android
I am working on code that have FrameLayout and customview at bottom. I loaded a fragment inside FrameLayout, which is having CoordinatorLayout with ViewPager inside.
So problem is ViewPager takes full height of the phone and hide contents of list behind customview. Here is Code:
main_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/playerView"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:layout_alignParentBottom="true"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</RelativeLayout>
fragment_view.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs_view_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabs_view_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In above image you can see some content of list is hidden beside PlayerView.
Try to use LinearLayout with layout_weight instead of RelativeLayout inside main_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</LinearLayout>
I have recently migrated my listview to recyclerview, so that I could have the effect on the toolbar that disappear to show only tabs / RecyclerView.
Thing is now, when I try to align an element to bottom, that element is getting out of the screen from the bottom.
I have to add like 60dp of margin bottom to fix it.
But in my FloatingActionButton, those 60dp affect animation, so I don't like it so much...
Does anyone know the trick???
Here is my code:
First Tab
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#CCC">
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lista_tiendas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:divider="#android:color/transparent"
android:dividerHeight="1.0sp" />
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="76dp"
android:src="#drawable/ic_add_white_24dp"
app:fab_type="normal"
app:fab_shadow="true"
app:fab_colorNormal="#color/spg_rosa"
app:fab_colorPressed="#color/spg_rosa_dark"
/>
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="#+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="right|bottom"-->
<!--android:src="#drawable/ic_add_white_48dp"-->
<!--app:backgroundTint="#color/spg_rosa"-->
<!--android:transitionName="#string/transition_add_pdv"-->
<!--app:borderWidth="0dp"-->
<!--app:elevation="8dp"-->
<!--app:fabSize="normal" />-->
</FrameLayout>
Second tab
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="50">
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/maps_unavailable"
style="#style/placeholder_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/maps_unavailable"
android:visibility="gone" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="#dimen/map_pager_height"
android:layout_gravity="bottom"
android:layout_marginBottom="55dp"/>
</FrameLayout>
And the CoordinatorLayout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Any Idea???