I'm using android library Android-ObservableScrollView from ksoichiro. I use his sample Flexible Space with viewpager and i modify it.
But there's some problem. You can see in my xml there is 2 android:fitsSystemWindows. One in LinearLayout, and the other in Toolbar. In LinearLayout working good. but in Toolbar is not working. Why this happen?
Thank you. Sorry for my bad english
theres my xml code:
<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">
<com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:scaleType="centerCrop"
android:src="#drawable/bridge" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:background="?attr/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_height">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_margin="#dimen/abc_action_bar_default_padding_material"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:minHeight="?attr/actionBarSize"
android:textColor="#android:color/white"
android:textSize="20sp" />
</FrameLayout>
<com.bright.nongkrongyuk.ui.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/black"
app:sliding_textColor="#drawable/sliding_tab_profile" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light" />
</LinearLayout>
</com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</FrameLayout>
The android:fitsSystemWindows attribute sets a padding. This means the fitting applies to the child views. You would have to apply this either to your FrameLayout or put the Toolbar into a nested Layout
It's really tricky to make a proper fullscreen layout with views fitted to the screen. I subclassed Fragment where I can declare a content-view which will get padding depending on Status- and/or Navigationbar
Related
I know this seems like a repeated questions but I don't understand why I can't position Tablayout on top of my ViewPager.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp"
app:tabPadding="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop"/>
</RelativeLayout>
Tablayout works just fine if I replace the RelativeLayout with Linearlayout except that's not what I want.
Try below may help you.
Error here : android:layout_alignParentBottom="true"
<?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">
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#9ad195"
android:minHeight="?attr/actionBarSize" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tl_ads"
android:background="#cccccc"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop" />
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop"/>
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp"
app:tabPadding="2dp"/>
</RelativeLayout>
In a RelativeLayout, the widgets are added one on top of the other in the order in which they were declared. You had declared your tab layouts first and then declared the ViewPager. As a result of this, your tabs were being created but were being hidden by the ViewPager which occupied the entire RelativeLayout.
I'm using Support Android Percentage Library's RelativeLayout AKA android.support.percent.PercentRelativeLayout but it has extra margin on the left edge same as RelaytiveLayout I didn't set any margin or padding but it's still has it, Search a lot and done anything which worked for other people... but NOT SOLVED!
Activity Main Layout codes :
<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/mainCoordinatorLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/mainAppbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/mainToolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<TextView
android:id="#+id/mainTitle"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/mainFlexibleSpace"
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.percent.PercentRelativeLayout
android:id="#+id/mainPercentRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/mainEnterLink"
android:text="#string/str_mainMessageText"
android:gravity="center"
android:textColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.percent.PercentRelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Any Help? See This Image of my rendered Layout Code
Check if it's a issue with the toolbar too (mainFlexibleSpace). If yes then,
Declare the toolBar in java and do this.
toolBar.setContentInsetsAbsolute(0,0);
This is the activity_main.xml layout for Androids default tab application:
<?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"
tools:context=".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"
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" />
</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"/>
<!-- When I add my own view here and use match_parent, it fills ENTIRE screen, even over the Toolbar. The ViewPager right above does not do this. Why? -->
</android.support.design.widget.CoordinatorLayout>
I am trying to add my own buttons/textviews/etc to my activity_main.xml but I do not know where to add them. The android.support.v4.view.ViewPager uses match_parent although it does not fit the whole screen, it expands across the entire screen besides the Toolbar area at the top. However, whenever I add my own view underneath the android.support.v4.view.ViewPager, lets say RelativeView and set it to match_parent, it expands OVER the Toolbar. This led me to believe that I should put my contents inside the ViewPager tags but that does not work either.
Where should I put my views so that they are not overlapping the Toolbar?
You can wrap your ViewPager in an RelativeLayout and you can add the view child also.
Here is the code snippet which may help you-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button"
android:background="#color/colorNeutral"
android:layout_above="#+id/button2" />
<Button
android:layout_marginBottom="56dp"
android:layout_alignParentBottom="true"
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable too" />
</RelativeLayout>
I have a problem where sometimes the AppBarLayout will not show its full content all the time when you play around with it:
<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.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:orientation="vertical"
android:layout_height="148dp"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="48dp"
android:background="#color/primarycolor"
.../>
<RelativeLayout
app:layout_scrollFlags="scroll|enterAlways"
android:background="#color/white"
android:layout_height="100dp"
...>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
A solution provided is
CoordinatorLayout Toolbar invisible on enter until full height
BUT: it provides a full line that is not the same color as the primary color I specify in the bottom layout, because its background is white. Thoughts?
This is a solution extending the one provided above:
Use this instead of the one provided, which will blend the appbarlayout and the subtle shadow elevation below it.
<View
android:id="#+id/appbar_bottom"
android:layout_width="match_parent"
android:layout_height=".3dp"
android:background="#606060"
android:visibility="visible"/>
and the resultant layout:
<android.support.design.widget.AppBarLayout
android:orientation="vertical"
android:layout_height="148.3dp"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="48dp"
android:background="#color/primarycolor"
.../>
<RelativeLayout
app:layout_scrollFlags="scroll|enterAlways"
android:background="#color/white"
android:layout_height="100dp"
...>
</RelativeLayout>
<View
android:id="#+id/appbar_bottom"
android:layout_width="match_parent"
android:layout_height=".3dp"
android:background="#606060"
android:visibility="visible"/>
</android.support.design.widget.AppBarLayout>
I have the following XML layout:
<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:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="#drawable/bg_bucket_list">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="144dp"
app:expandedTitleMarginBottom="#dimen/quadruple_margin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_bucket_list" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:background="#color/black_40" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:animateLayoutChanges="true"
android:gravity="top">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quadruple_margin"
android:text="#string/my_places_for"
android:textColor="#color/white"
android:textSize="24sp"
android:visibility="gone" />
<TextView
android:id="#+id/sub_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/text"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quarter_margin"
android:text="#string/pick_category_or_business"
android:textColor="#color/white"
android:textSize="16sp"
android:visibility="gone" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:tabBackground="#color/transparent"
app:tabGravity="center"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/grey_400" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
app:contentInsetLeft="#dimen/triple_margin"
app:contentInsetStart="#dimen/triple_margin"
app:popupTheme="#style/Theme.AppCompat.NoActionBar"
app:theme="#style/Theme.AppCompat.NoActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
If you look at the TabLayout, the gravity assigned to it (bottom) causes it to disappear. If I remove that, it shows but fixed to the top.
The reason I don't have the CollapsingToolBarLayout matching the AppBarLayout in size is because I've been experimenting with putting the TabLayout in that space and setting it's flags independent of the CollapsingToolbarLayout directly as a descendant of the AppBarLayout.
Setting it independent works, but then I don't have the ImageView Background with the mask 60% black opacity mask anymore.
I tried what was suggested here: Similar question
There's no difference however.
EDIT: I figured it out and answered my own question here: Answer
The important thing is to recognize the CollapsingToolBarLayout extends FrameLayout, so you can put more than 1 in An AppBarLayout which extends LinearLayout. You set the scroll behaviour by using the scroll flags available to an AppBarLayout's children views.