Toolbar overlapping with elements in Android - java

I am implementing a list view in my app. I am trying to build my app for android 6.0 and chosen the theme "DarkActionBar". I am having this code right now in 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.mycompany.www.mynotes.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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" />
</android.support.design.widget.AppBarLayout>
<ListView
android:id="#+id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</android.support.design.widget.CoordinatorLayout>
I have just added a listview (replacing a textview) in this code. Rest of code was already there when I created my project.
Right now I am adding some items randomly in the listview. Now the problem is, the top most item of list view gets behind the toolbar as shown in the image below. How to fix it? I want this listview to start below the toolbar.

You have to add app:layout_behavior to your LiveView :
<ListView
android:id="#+id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>

Related

Lock tab changing on android with TabLayout

This has been often asked for TabHost, but in my case I'm using a TabLayout and did not found any similiar question or solution.
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/selectedTabTitleColor"
app:tabTextColor="#color/unselectedTabTitleColor" />
<com.sero583.app.view.CustomViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
I'm using as you may can see a custom View Pager and I managed to lock swiping but have no clue how to lock pressing at the Tab header, all methods which are available only return void's and I don't know how to dynamically set it back since I didn't found any method which is something like setViewingTab(int index);

Can't scroll completely down in ViewPager with NestedScrollView in CollapsedToolBarLayout

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

Android - Unable to fix the Toolbar in a Collapsing Toolbar layout

I am currently using CollapsingToolbar Layout in the upper portion of my layout. I want to collpase a particular portion (LinearLayout only) and keep the toolbar fixed on the top. I was able to fix the Toolbar position on top in another project and keep it from collapsing. However, for some reason, I am not able to fix the position of my toolbar. Any help will be appreciated. Here is my the XML of 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profile_coordinate_layout"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_gravity="fill_vertical"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:expandedTitleMarginStart="?actionBarSize"
app:contentScrim="?colorPrimary"
>
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<!--|||||||||||||||Collection Profile and about||||||-->
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="pin"
android:background="#drawable/gradient_feed_bg"
>
<include
layout="#layout/item_collection_profile" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#drawable/dark_primary_no_radius"
app:layout_collapseMode="pin"
android:elevation="#dimen/margin_4dp"
>
<include layout="#layout/action_bar_collection_profile"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
></android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
I am loading another fragment on the ViewPager. and I am using the following code to load the toolbar.
findViewById(R.id.toolbar). setBackgroundResource(R.drawable.dark_primary_no_radius);
setSupportActionBar((android.support.v7.widget.Toolbar)findViewById(R.id.toolbar));
And here is UPDATED the result:
As you can see, in the second image, toolbar collapsed on the top. Any help will be highly appreciated.
Thank you.
You need to use the app:layout_collapseMode="pin" in Toolbar only.
Remove this from other components like the LinearLayout and CollapsingToolbarLayout.
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:layout_gravity="fill_vertical"
android:fitsSystemWindows="true"
app:expandedTitleMarginStart="?actionBarSize"
app:contentScrim="?colorPrimary"
>
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<!--|||||||||||||||Collection Profile and about||||||-->
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="parallax"
android:background="#drawable/gradient_feed_bg"
>
<include
layout="#layout/item_collection_profile" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#drawable/dark_primary_no_radius"
app:layout_collapseMode="pin"
android:elevation="#dimen/margin_4dp"
>
<include layout="#layout/action_bar_collection_profile"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>

a sliding up panel just like google maps app that have a middle state

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.

Views appearing on top of collapsing toolbar

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.

Categories