I asked this question previously but I think I worded it poorly. I'm using the provided Tabbed Activity with Action Bar Tabs (with viewpager) default project layout in Android Studio 1.4 and I'm trying to get a button to appear at the bottom of my fragment that is displayed in one of the tabs. The issue I'm having it that that my AppBarLayout/Toolbar in my activity is pushing part of my fragment view offscreen. Here is what I am seeing.
My fragment in the editor with a button aligned with the bottom of its parent relative view.
How this fragment looks when displayed inside the activity on my device. As you can see the button in the relative view is rendered off screen (I know because I can add padding below the button and it will eventually appear on screen) and I think this is being caused by the AppBarLayout/Toolbar pushing it there.
Here is my fragment 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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity$PlaceholderFragment">
<TextView android:id="#+id/section_label" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
And the parent activity.
<android.support.design.widget.CoordinatorLayout
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" android:id="#+id/main_content"
android:layout_width="match_parent" android:layout_height="match_parent"
android:fitsSystemWindows="true" tools:context=".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:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<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/container"
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Does anyone know how I can prevent this?
This was apparently an issue with the CoordinatorLayout I was using in my activity XML, switching to a RelativeLayout fixed the issue.
Related
I'm creating a fragment with a collapsing Toolbar Layout using a ViewPager. This is the XML for the Layout:
<?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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.AppActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:backgroundTint="#color/completeWhite">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="420dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/completeWhite"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<RelativeLayout
android:id="#+id/brand_page"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:paddingTop="24dp"
android:layout_marginTop="?attr/actionBarSize">
//Lots of images and texts that are collapsed
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="75dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/lightGreen"
app:tabTextColor="#color/grey"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<io.brandie.brandie.custom.NoSwipeViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginBottom="#dimen/spacing_giant"
android:background="#color/white"/>
</android.support.design.widget.CoordinatorLayout>
The viewPager is filled with fragments that use a gridview to display different cards, this is the xml for the Fragment of the first tab:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
android:id="#+id/NestedScroll"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_gravity="fill_vertical"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/all_campaigns_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="io.brandie.brandie.fragments.AllCampaignsFragment">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/all_campaigns_grid"
android:descendantFocusability="blocksDescendants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
With this I can scroll down anywhere on the screen to make the toolbar collapse and the view-pager expand. The problem is, when the tool-bar is completely collapsed and only the tabs are showing, I can't scroll the viewPager anymore. Since it holds a gridView with a lot of items, it results in that I can't scroll through them all, since the scroll just "stops".
I want it to look like this
But instead, when the toolbar is collapsed, I can't scroll the viewPager down anymore. I can however scroll it up to reveal the toolbar again, that works without issues. I am using Android API 16, is that an issue?
How do I fix this very irritating problem?
EDIT:
If I remove the NestedScrollView from the fragment XML, the collapsed Toolbar only collapses if I scroll on the toolbar. If I scroll the ViewPager, I can scroll through all content correctly, but the toolbar doesn't collapse.
Answer for your EDIT: Try using setNestedScrollingEnabled(false) on your GridView
I have a horizontalScrollView containing 1 image that is used as the background. This image can be scrolled left to right. I would like to place other imageviews on to the background image but not have them scroll with it. At the moment if I place another imageview on top of this, when I scroll the image comes as well.
The scroll view at far left:
The scroll view at far right:
XML Code:
<?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:id="#+id/activity_rear_gunner"
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:focusable="true"
tools:context="com.example.mr_br.ibcc_bomber_command.rear_gunner">
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_alignParentTop="true"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent" app:srcCompat="#drawable/background_scroll_2"
android:id="#+id/scrollView" android:layout_centerVertical="true"
android:scaleType="centerCrop"
/>
</HorizontalScrollView>
<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:id="#+id/item_frame"
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:focusable="true"
tools:context="com.example.mr_br.ibcc_bomber_command.rear_gunner">
</RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" app:srcCompat="#drawable/placeholder_bomber"
android:id="#+id/enemy" android:layout_centerVertical="true"
/>
</RelativeLayout>
Very new to using layouts in android. Hope I made my problem clear if not I do apologize and will try to clarify if asked. I know this could have something to do with what layouts I am using and the child and parents of them layouts but like I said new to this.
The HorizontalSCrollView can have only one child, but that child could be another layout, so you can add as many ImageView you want.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="3000dp"
android:layout_height="match_parent"
android:background="#a30"
/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#aa0"
/>
</RelativeLayout>
</HorizontalScrollView>
I want the Exact thing that Google Map app has for its business pages.
I'm using SlidingUpPanel (lib) in my project. I have a map activity and I want to have a sliding up panel like google map with a fab button on top of my sliding panel.
this is what i want
This is my layout XML:
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="96dp"
sothree:umanoShadowHeight="4dp"
sothree:umanoAnchorPoint="0.7"
sothree:umanoParallaxOffset="100dp"
sothree:umanoOverlay="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/NestedScrollView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/SlidingPanelToolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/aaa"
android:background="#android:color/white"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
The problem is that this slide up doesn't have any middle state. it is either up or closed but I need a half-open state too.
What you need is a BottomSheet UI pattern.
It was added to the Google's Design Support Library in version 23.2
Here is a sample tutorial on how to use it.
EDIT: Problem solved. See Blackbelt's comment
I've been trying to implement the collapsing toolbar into my project, sticking to an example provided by Google. I've gotten it to work for the most part, but views are appearing on top of the toolbar rather than below them.
Below, I've pasted the XML code for the activity that hosts the toolbar.
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="android.jochemkleine.com.popularmovies.ui.MovieDetailActivity"
android:background="#57ffffff">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:id="#+id/toolbarImage"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_detail_container">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/btn_star_big_off"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:scaleType="center"
app:backgroundTint="#ffffff"/>
Note that the FrameLayout with id item_detail_container will contain a fragment.
Said fragment uses to the following XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_movie_details"
tools:context="android.jochemkleine.com.popularmovies.ui.m"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST TEXTVIEW"
/>
</LinearLayout>
Note that right now, the LinearLayout in this XML file serves no purpose at all, because there is only one TextView present. It will however be of use later, as NestedScrollView can only host one direct child.
I am fairly sure that the fault lies somewhere within the first XML file, likely with the use of the FrameLayout. What baffles me is that the Google example does it almost exactly the same way, the only difference is that they include a layout, instead of using a FrameLayout.
Thanks in advance; any and all help is appreciated.
currently I am using Android's new toolbar (in appcompat). It works fine until I try the following method: toolbar.bringToFront(). When I call this, the toolbar disappears. My layout:
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:orientation="vertical"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/colorPrimary"
app:theme="#style/ToolbarTheme"
app:popupTheme="#style/ToolbarThemePopup"
/>
<com.asdev.sechat.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
/>
Now the reason I need it in front is that the SlidingTabLayout has a shadow which covers the toolbar, and I don't want that. Anyone know how I can bring the toolbar to the top and still have it visible? Thanks.
from the docs:
Change the view's z order in the tree, so it's on top of other sibling views. This ordering change may affect layout, if the parent container uses an order-dependent layout scheme (e.g., LinearLayout). Prior to KITKAT this method should be followed by calls to requestLayout() and invalidate() on the view's parent to force the parent to redraw with the new child ordering.
https://developer.android.com/reference/android/view/View.html#bringToFront()
It makes sense that this would mess up your layout. you may have to look into a relative layout or find a different way to get rid of the shadow. or if you're min sdk 21 you could probably set the elevation on the toolbar manually.
relativelayout example:
<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"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<com.asdev.sechat.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/colorPrimary" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/sliding_tabs" />
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
android:layout_width="match_parent"
android:align_parentTop="true"
android:layout_height="56dp"
android:background="#color/colorPrimary"
app:popupTheme="#style/ToolbarThemePopup"
app:theme="#style/ToolbarTheme" />
</RelativeLayout>
Use bringToFront in your java file for toolbar will solve your problem.
Edit
This is working solution in my app
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/Toolbar" />
<com.asdev.sechat.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/tab_height"
android:background="#color/primaryColor"
android:minHeight="#dimen/tab_height"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>