I have a problem testing the focusability of my App with D-pad. Here there are two screenshots of my App:
In the picture of the left side, the fab is "outside(or below)" the list and after the last element it gets the focus when navigating down, so everything is ok in this case. The problem comes with the image of the right side. The fab is "inside" the listView and for that reason(I think but I'am not sure) it doesn't get ever the focus. Is there anything that can be done about it?
An enhacement would be that the fab would get the focus always before the list(that is immediately after the tabs), no matter where the fab is positioned at the momment in the layout, but the problem is that I don't know how to do it, since Android decides the focus order of my Layout.
Any help would be highly appreciated.
UPDATE:
fragment_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:mContext=".FragmentMain">
<!---marginBottom for ads-->
<android.support.v4.view.ViewPager
android:id="#+id/viewpagerMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:layout_marginBottom="60dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.TabLayout
android:id="#+id/tabsMain"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_marginTop="50dp"
android:background="?attr/colorPrimary"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorHeight="5dp"
app:tabMode="fixed"
app:tabPaddingTop="60dp"
app:tabSelectedTextColor="#android:color/white"
app:tabTextAppearance="#style/TabTextAppearance" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="330dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="86dp"
android:background="#color/white"
android:orientation="vertical">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginLeft="5dp"/>
<ProgressBar
android:id="#+id/progressBar"
android:background="#drawable/progress"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:visibility="visible"
tools:visibility="visible">
</ProgressBar>
</FrameLayout>
<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_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- http://antonioleiva.com/floating-action-button/-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabMain"
android:focusable="true"
android:background="#drawable/selector_focusable_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end|right"
android:layout_marginBottom="60dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:src="#drawable/plus_48"
app:pressedTranslationZ="12dp"
app:rippleColor="#color/colorAccent"/>
<include layout="#layout/ad_bottom_bar"
android:id="#+id/advBottomBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
/>
</android.support.design.widget.CoordinatorLayout>
security_item.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- for statedrawable list to work we need to set background in cardview and
immediate linearlayout. Also set android.clickable in cardview AND
android:duplicateParentState in linearlayout-->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:background="#drawable/selector_security"
android:clickable="true"
android:nextFocusRight="#+id/overflow"
app:contentPadding="#dimen/si_card_view_content_padding"
android:id="#+id/cardView"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="#dimen/si_card_view_elevation"
card_view:cardUseCompatPadding="true"
>
<LinearLayout
android:id="#+id/linearParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:nextFocusRight="#+id/overflow"
android:duplicateParentState="true"
android:background="#drawable/selector_security">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#id/ticker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
tools:text="GOOG" />
<TextView
android:id="#+id/market"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="start"
tools:text="EQUITY" />
<ImageView
android:id="#+id/overflow"
android:focusable="true"
android:nextFocusLeft="#+id/cardView"
android:nextFocusDown="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_overflow_mini"
android:tint="#color/gray700"
android:src="#drawable/ic_overflow"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.carlos.capstone.customcomponents.AutoResizeTextView
android:id="#+id/securityName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:textStyle="bold"
tools:text="Alphabet Inc." />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="end"
android:textSize="#dimen/si_label_day"
android:text="Day(max/min)"
tools:text="Day(max/min)" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/price"
android:layout_marginTop="3dp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:textSize="#dimen/si_price_text_size"
tools:text="710,89" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.9"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.carlos.capstone.customcomponents.AutoResizeTextView
android:id="#+id/percentChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="#dimen/si_percent_margin_top"
android:textSize="#dimen/si_percent_text_size"
android:gravity="end"
tools:text="-110.21%" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<com.carlos.capstone.customcomponents.AutoResizeTextView
android:id="#+id/dayMax"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textColor="#color/gray400"
android:gravity="end"
tools:text="716,49" />
<com.carlos.capstone.customcomponents.AutoResizeTextView
android:id="#+id/dayMin"
android:paddingTop="#dimen/si_min_padding_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="end"
android:textColor="#color/gray400"
tools:text="706,02" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
You can create a separate Layout and put your fab there. This will force that part to always be seen.
For example
<LinearLayout>
//list stuff here
<LinearLayout>
//fab stuff
</LinearLayout>
</LinearLayout>
Related
I have an AppBar and other things in my layout. When the user scrolls down, I want AppBar(actually, the Toolbar to hide. This is what I have tried, the app bar isn't hiding all small part it just stays there. Actually I think the problem is with my header of the screen it gets collapsed and adds a small space when I scroll.
As you can see in second image some part stays it doesn't hide. I need to hide that part while scrolling.
Please provide me solution what am I doing wrong?
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Title"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/slideIV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_dish" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomButtonRL"
android:layout_gravity="bottom"
android:background="#drawable/gradient_bg" />
<View style="#style/itemBottomViewLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_margin="#dimen/_20"
android:gravity="center_vertical"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/fake_chef_bg"
app:civ_border_color="#color/border_grey_color"
app:civ_border_width="#dimen/_2" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_5"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/bold_font"
android:text="#string/fatima_al_zahraa"
android:textColor="#color/white"
android:textSize="#dimen/large_text_size"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="#font/regular_font"
android:text="#string/presenter_of_the_cuient"
android:textColor="#color/white"
android:textSize="#dimen/app_text_size" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/bottomButtonRL"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/slideIV"
android:layout_marginTop="-25dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/_0"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/_0"
android:layout_weight="1"
android:background="#color/defaultColor" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingStart="#dimen/_20"
android:paddingLeft="#dimen/_20">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_share" />
<RelativeLayout
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_10"
android:layout_marginLeft="#dimen/_10"
android:background="#drawable/ic_rec1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/regular_font"
android:gravity="center"
android:layout_centerInParent="true"
android:text="#string/add_to_fav"
android:textColor="#color/white"
android:textSize="#dimen/medium_text_size" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bottom_radius_view">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/regular_font"
android:padding="#dimen/_20"
android:text="#string/galetes_fires_au_plates_fires_au_plates_fires_au_plates_fires_au_plates_fires_au_plates"
android:textColor="#color/white"
android:textSize="#dimen/app_text_size" />
</LinearLayout>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:visibility="gone"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="#dimen/_20"
android:paddingTop="#dimen/_10"
android:paddingRight="#dimen/_20">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/bold_font"
android:padding="#dimen/_5"
android:text="#string/les_videos"
android:textColor="#color/medium_grey_text_color"
android:textSize="#dimen/large_text_size" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/itemFRV"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/_5" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
This is the header code:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/header_height"
android:background="#color/white"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="#dimen/_20"
android:paddingRight="#dimen/_20">
<LinearLayout
android:id="#+id/backLL"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:gravity="center"
android:paddingRight="#dimen/_20"
android:layout_marginBottom="#dimen/_10"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_back" />
</LinearLayout>
<ImageView
android:id="#+id/logoIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:adjustViewBounds="true"
android:paddingStart="0dp"
android:paddingTop="#dimen/_15"
android:paddingEnd="#dimen/_10"
android:layout_marginBottom="#dimen/_10"
android:src="#drawable/ic_header_logo" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="#+id/profileIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:adjustViewBounds="true"
android:paddingStart="#dimen/_10"
android:paddingTop="#dimen/_15"
android:paddingEnd="0dp"
android:layout_marginBottom="#dimen/_10"
android:src="#drawable/ic_default_user" />
</LinearLayout>
</layout>
Answer to the problem is just remove
android:fitsSystemWindows="true"
Change the layout_scrollFlags
app:layout_scrollFlags="scroll|exitUntilCollapsed"
replace above line with
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
i want to remove the divider that is shown in sc.
look at the green arrows
(i have 5 fragment that are loaded in the viewpager and my frame,when i touch the tabs ,fragments change)
and this is my xml code for this activity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ir.myinsta.myinstaapp.MainActivity">
<android.support.v7.widget.CardView
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height">
<RelativeLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/my_gradiant">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
style="#style/MyDrawerArrowToggle"
android:layout_width="#dimen/toolbar_height"
android:layout_height="#dimen/toolbar_height"
android:layout_alignParentRight="true">
</android.support.v7.widget.Toolbar>
<ImageView
android:id="#+id/helpImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toLeftOf="#+id/main_toolbar"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:id="#+id/gemLayout"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:clickable="true"
android:gravity="left"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<ImageView
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="8dp"
android:src="#drawable/diamond_white" />
<TextView
android:id="#+id/gemCountTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:layout_gravity="center_vertical"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:elevation="5dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="0dp"
android:background="#color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#00000000"
app:tabIndicatorHeight="0dp" />
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/tab_layout"
android:layout_below="#id/header_layout">
</android.support.v4.view.ViewPager>
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/header_layout"></FrameLayout>
<RelativeLayout
android:id="#+id/centerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="150dp" />
</RelativeLayout>
I don't know this is a divider or elevation.please help me.
using styles? or what?
Try to add app:elevation="0dp" in your ToolBar.
Like this :-
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
style="#style/MyDrawerArrowToggle"
app:elevation="0dp"
android:layout_width="#dimen/toolbar_height"
android:layout_height="#dimen/toolbar_height"
android:layout_alignParentRight="true">
</android.support.v7.widget.Toolbar>
Or you can use:-
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
</android.support.design.widget.AppBarLayout>
I have tried to accomplish something similar to the following layout.
There are a few things to note. The cardview that overlaps the appbar is not supposed to be a part of a nestedscrollview as I have a nestedscrollview in the xml layout. The cardview is positioned correctly but it comes just beneath the appbarlayout.
I just got the solution to this now. I did not give the CardView an elevation value before and that was wrong. I just assumed that making it come last in the CoordinatorLayout should place it on top. It works now. I have added an elevation value. Here is the code -
<xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/quotes"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="32dp"
android:layout_marginLeft="32dp"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|center"
app:cardElevation="#dimen/small_padding"
/>
</android.support.design.widget.CoordinatorLayout>
Try with the following layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/toolbar_logo"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
app:cardCornerRadius="8dp"
app:cardElevation="7dp"
android:layout_marginTop="150dp"
android:id="#+id/cardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Photos" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="376" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1769"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Following"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="127"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
I'm trying to display "Spaces-Navigation-View" from here https://github.com/armcha/Space-Navigation-View
The problem I'm facing is that the view appears perfectly in simple activity but not in my main activity which contains coordinator layout.
Here is the xml for my main activity and the result is below
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:fitsSystemWindows="true"
tools:context="com.rvnd.bookshare.Strt">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="false"
android:background="#color/background"
android:paddingTop="#dimen/appbar_padding_top"
app:elevation="0dp"
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="#color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:text="Book Share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="cursive"
android:textSize="27sp"
android:textColor="#color/text"/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
/>
<TextView
android:id="#+id/status"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:elevation="5dp"
android:textColor="#000000"
android:background="#FFD54F"
android:gravity="center"
android:padding="5dp"
android:layout_gravity="top|center"
android:visibility="gone"
android:text="Syncing..."
android:textAppearance="?android:attr/textAppearanceMedium"/>
</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"/>
<com.luseen.spacenavigation.SpaceNavigationView
android:id="#+id/space"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:space_background_color="#color/colorPrimary"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:layout_behavior="com.luseen.spacenavigation.SpaceNavigationViewBehavior"/>
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:visibility="gone"
app:srcCompat="#drawable/booky"/>
</android.support.design.widget.CoordinatorLayout>
Here is the result of it
On the other hand, if I use the same view in a different simpler activity, the view is rendered properly
Here is the code and below it, is how it should actually look like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/activity_history"
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"
tools:context="com.rvnd.bookshare.History"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:background="#color/skyblue"
android:layout_height="40dp">
<TextView
android:text="All your book transfers are recorded here..."
android:layout_width="0dp"
android:layout_height="match_parent"
android:id="#+id/status"
android:textColor="#ffffff"
android:gravity="center"
android:layout_weight="1"
android:textSize="13sp"/>
<Button
android:text="Clear history"
android:layout_height="match_parent"
android:id="#+id/clear"
android:textAllCaps="false"
android:layout_width="98dp"
android:textSize="12sp"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/rec"/>
<com.luseen.spacenavigation.SpaceNavigationView
android:id="#+id/space"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:space_background_color="#color/colorPrimary"
android:background="#color/colorPrimary"
android:layout_gravity="bottom"
app:layout_behavior="com.luseen.spacenavigation.SpaceNavigationViewBehavior"/>
</LinearLayout>
Here is the result :
I've tried everything and It just doesnt display properly, please do help!
Thanks
I want to add multiple input fields in top bar area of application (toolbar) for search purposes of my app. I see that Airbnb does that at its best! I have tried various scenarios using AppBarLayout in CoordinatorLayout but it all failed. Is it possible to get the same or similar effect? If yes, how do we do that?
Here are the screenshots when I swipe down the top bar:
Yes it is possible to create using appbar layout, I have tried same task, Finally i have figured-out in this way, I guess below code is helpful for you
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--your toolbar-->
<include
android:id="#+id/toolbar_wrapper"
layout="#layout/common_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.CoordinatorLayout
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:background="#color/color_fafafa"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_ffffff"
android:orientation="vertical"
app:layout_scrollFlags="scroll">
<!--your scrolling layout, in your case it will be edit texts and search fields-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_49"
android:background="#color/color_ffffff"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#color/colorAccent"
app:tabSelectedTextColor="#color/color_727272"
app:tabTextColor="#color/color_b6b6b6" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/dp_1"
android:background="#color/color_d9d9d9" />
<!--your main layout-->
<android.support.v4.view.ViewPager
android:id="#+id/detail_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
</layout>
If you are still looking for an answer, I tried to do something similar. My layout is
<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:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:id="#+id/summarized_search_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp"
app:layout_collapseMode="none">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_search" />
<TextView
android:id="#+id/summarized_search_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:id="#+id/extended_search_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginTop="6dp"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_profile" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_calendar" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_poi" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#drawable/background_blue_light_rounded"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:src="#drawable/menu_poi" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp" />
</LinearLayout>
<Button
android:id="#+id/validation_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginEnd="12dp"
android:layout_marginTop="12dp"
android:text="GO" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Popular" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Favorites" />
</android.support.design.widget.TabLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardElevation="8dp"
app:contentPadding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="8dp"
android:text="#string/lorem"
android:textSize="18sp" />
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
You can see I use a Toolbar with visibility = invisible to force my layout to stay partialy visible. I am not really proud of that trick but I failed to find an other solution.
Once you have your layout it's just a matter of animation depending on the progress of the offset.
If you succeed, I would be happy to see your code because I'm not really happy with mine.
I hope it can help you.