I having a problem with my xml file. The toolbar is over the relative layout. I tried whit some properties like fitsSystemWindows and others but I cant fix it. Any idea abput which property could fix it?
So, this is my xml file. I tried adding to the relavite layout the fitsSystemWindows property but doesnt work yet
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:fitsSystemWindows="false"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:id="#+id/layout_progress"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:indeterminateOnly="true"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<com.theapplabperu.queestudiar.Utils.EmptyRecyclerView
android:layout_width="match_parent"
android:id="#+id/rv_universities"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<LinearLayout
android:id="#+id/empty_main"
android:visibility="gone"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_marginRight="24dp"
android:layout_marginLeft="24dp"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_intro_brain"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/txt_empty_title"
android:layout_margin="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="24sp"
android:textStyle="bold"
android:text="Ups!"/>
<TextView
android:id="#+id/txt_empty_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="14sp"
android:text="No hay resultados para mostrar."/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Just add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your RelativeLayout. That should put that layout under the appbar
Related
I got problem with LinearLayout, it only shows the first child. I found a solution but i not work.
Here my 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.example.hoangdang.diemdanh.QRCode.QRCodeActivity">
<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/qrcode_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_darker"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
here is the result when i change position of Button and ImageView
and
I think you have to set orientation vertical to linear layout like below
<?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.example.hoangdang.diemdanh.QRCode.QRCodeActivity">
<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/qrcode_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_darker"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
You have defined ImageView's width as MATCH_PARENT so it will take the whole of it's parent and while the parent is HORIZONTAL then the second view will never shown. this may help you
<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/qrcode_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_darker"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
</LinearLayout>
you can try this using weight attribute in image and button
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_weight="1"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
I am working on a UI that utilizes the CoordinatorLayout/AppBarLayout combo as normally seen in most examples but there is this requirement of mine: I want to overlay the AppBarLayout with a View at all times. So, whatever scrolling behavior that happens, should happen under this view. Currently, this is what I am seeing:
Here, the blue bar that you see is the one that I want on top of everything. As you can see, it is hidden initially and only gets exposed when we have scrolled AppBarLayout off the screen. For your reference, here is the code for this layout and its id is android:id="#+id/linearLayout":
<?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"
tools:context="com.example.snapsboardmainpage.MainActivity"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_scrollFlags="scroll|snap"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="112dp"
android:orientation="vertical"
app:layout_scrollFlags="scroll|snap"
android:background="#android:color/holo_green_light">
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/id_tab_photosvideos_albums"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/id_viewpager_photosvideos_albums"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="vertical"
android:layout_gravity="top"
app:layout_behavior="com.example.snapsboardmainpage.TopActionBarBehavior"
android:background="#android:color/holo_blue_light">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="#android:color/holo_orange_light">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
How can I achieve this overlay behavior?(it would be preferable if this blue bar could remain as a direct child of CoordinatorLayout)
Although the question seems to be difficult, the solution turned out to be amazingly simple:
android:elevation="8dp"
Yes, that was it. Just set it on the the view that had to overlay the AppBarLayout.
android:elevation="8dp" work on API level 21.
So You can put your view in side a new AppBarLayout.
In my case , i put my xml code in to new AppBarLayout like below
<?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:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:fitsSystemWindows="true"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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:title="#string/app_name" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.appbar.AppBarLayout>
<!--i want below view on the top of app bar layout of id(android:id="#+id/app_bar")
so i put my all view inside the new app bar layout of id(
android:id="#+id/longClickItem")-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/longClickItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:visibility="gone">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:paddingTop="#dimen/_5sdp"
android:paddingBottom="#dimen/_5sdp">
<ImageView
android:id="#+id/longItemBack"
android:layout_width="#dimen/_25sdp"
android:layout_height="#dimen/_25sdp"
android:layout_centerVertical="true"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/longItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/longItemBack"
android:text="0"
android:textColor="#android:color/white"
android:textSize="#dimen/_18sdp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/longItemDelete"
style="#style/long_press_image_view"
android:src="#drawable/item_long_delete" />
</LinearLayout>
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I got problem with LinearLayout, it only shows the first child. I found a solution but i not work.
Here my 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.example.hoangdang.diemdanh.QRCode.QRCodeActivity">
<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/qrcode_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_darker"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
here is the result when i change position of Button and ImageView
and
I think you have to set orientation vertical to linear layout like below
<?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.example.hoangdang.diemdanh.QRCode.QRCodeActivity">
<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/qrcode_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_darker"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
You have defined ImageView's width as MATCH_PARENT so it will take the whole of it's parent and while the parent is HORIZONTAL then the second view will never shown. this may help you
<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/qrcode_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_darker"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
</LinearLayout>
you can try this using weight attribute in image and button
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/qrCode_imageView"
android:layout_weight="1"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/generate_code_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/generate_code"
android:layout_marginRight="#dimen/de_btn_padding"
android:layout_marginLeft="#dimen/de_btn_padding"/>
I have got the following layout code.
<?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:fab="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:singleLine="true"
android:text="This will run the marquee animation forever"
android:textColor="#color/white"
android:textSize="#dimen/abc_text_size_title_material_toolbar"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.FloatingActionButton
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/ic_menu_share"
app:layout_anchor="#+id/toolbar"
app:layout_anchorGravity="bottom|right|end"
/>
<RelativeLayout
android:layout_width="match_parent"
android:paddingTop="?attr/actionBarSize"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_anchor="#+id/share"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:orientation="vertical">
<RadioGroup
android:id="#+id/segment_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:layout_marginTop="?attr/actionBarSize"
android:background="#android:color/white"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:checkedButton="#+id/button_one"
android:orientation="horizontal"
android:topRightRadius="0dp">
<RadioButton
android:id="#+id/button_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/rbtn_selector"
android:button="#null"
android:checked="true"
android:gravity="center"
android:padding="5dp"
android:text=" A "
android:textColor="#drawable/rbtn_text_selector"
/>
<RadioButton
android:id="#+id/button_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/rbtn_selector_right"
android:button="#null"
android:gravity="center"
android:padding="5dp"
android:text=" B "
android:textColor="#drawable/rbtn_text_selector"/>
</RadioGroup>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/play_song_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:visibility="gone"
fab:fab_colorNormal="#color/dark_navy_blue"
fab:fab_colorPressed="#color/light_navy_blue"
fab:fab_icon="#drawable/ic_play_arrow_white"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Im trying to put up the relative layout below the toolbar. I tried adding app:layout_behavior="#string/appbar_scrolling_view_behavior" but still it does not works. I tried adding android:paddingTop and android:marginTop attributes. Adding these attributes works fine in interface but when it comes to real device, the relative layout is still overlapping the toolbar. why so?
You can put your Toolbar layout inside AppBarLayout. Like this
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
// Your Toolar herer
<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.AppBarLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I'm trying to recreate the search box as it is in Airbnb Android app.
So I'm using CoorinatorLayout with Toolbar and RecyclerView.
But when I insert something inside the Coordinator besides those two things, it doesn't show up.
Here is my code:
<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/slidingLayout"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp" />
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
But actually if this even worked, I would have the trouble of putting the search box above the RecyclerView.
I have tried to put everything inside the RelativeLayout but that didn't work.
Here is also the picture of what I'm trying to make
EDIT:
Here is the code with RelativeLayout
<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/slidingLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
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:background="#00000000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp" />
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
I was trying to do something a little similar, but with an ad banner at the bottom of the screen. My solution was to wrap the RelativeLayout outside the CoordinatorLayout as so:
<?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"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/ad_view">
<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.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/ad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_gravity="center|bottom"
app:adSize="SMART_BANNER"
app:adUnitId="#string/admob_id" />
</RelativeLayout>
The toolbar properly hides when scrolling inside the RecyclerView and everything seems to be working just fine. I would imagine if you followed a similar principle you should be good-to-go.
If you want remove status bar white colour, you must remove the next line
<item name="android:statusBarColor">#android:color/transparent</item>`
in v21/styles.xml
Thanks for example.
<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/slidingLayout"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp"/>
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Check if this works for you.