I am making an xml layout file consists of 3 parts:
Part 1: some information and image about a place.
Part 2: two horizontal Buttons.
Part 3: RecyclerView of some people reviews.
This is my layout file:
<ScrollView
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:name="com.example.abdo.foodproject.OneItemFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.abdo.foodproject.OneItemFragment"
tools:layout="#layout/activity_item"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/oneitem_background_theme"
android:orientation="vertical"
android:weightSum="13"
>
<LinearLayout>
(...) <!--part 1-->
</LinearLayout>
<LinearLayout <!--part 2-->
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/review_list"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/reviews"
android:background="#color/colorPrimaryDark"
/>
<Button
android:id="#+id/bestMeal_list"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryLight"
android:text="#string/best_meal"
/>
</LinearLayout>
<android.support.v7.widget.RecyclerView <!--part 3-->
android:id="#+id/recyclerViewItem"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
I want to have the buttons fixed at my screen, at the top of the window, without losing their view from the scrolling.
Does anyone have any idea how to do so?
You can use CoordinatorLayout to achive such an affect.
CoordinatorLayout has 2 childs which one has also 2 childs as you wish
AppBarLayout: is a linear layout with vertical orientation. It's contents can disappear or pin according to "app:layout_collapseMode" attribute when scroll completed.
1.1. CollapsingToolbarLayout: you can put your "part 1" view in this place with app:layout_collapseMode="parallax" to parallax when disappearing.
1.2. Fixed view. LinearLayout: feel free to replace with your "part 2" view. This part will be pinned when scroll completed.
Scrollable view: it is RecyclerView in your example.
Final code should be similar like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<!--part 1-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax">
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<!--part 2-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weight_sum="2">
<Button
android:id="#+id/review_list"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/reviews"
android:background="#color/colorPrimaryDark"
/>
<Button
android:id="#+id/bestMeal_list"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryLight"
android:text="#string/best_meal"
/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<!--part 3-->
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.CoordinatorLayout>
Related
Hiii,
I am Struggling with ScrollView issue for long time.but unable to solve the issue.
Issue is
I Created one Layout in which I have multiple frame Layouts
Each frame layout is used to contain single fragments.(eg. frame2 is used for fragment 2,frame 3 fro fragment 3 etc.)
frame layouts are oneBelow other.
this is Code :
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
android:fitsSystemWindows="false"
android:id="#+id/svStudentData"
android:layout_marginTop="5dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/lnlFrames"
android:visibility="visible">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame2"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame3"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame4"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame5"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame6"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame7"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame8"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame9"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame10"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame11"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame12"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame13"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame14"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame15"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame16"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame17"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame18"></FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame19"></FrameLayout>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/btnSave"
android:text="Save"
android:visibility="gone"
android:layout_margin="10dp"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Data is Already saved "
android:visibility="gone"
android:textSize="28sp"
android:textStyle="bold"
android:layout_marginTop="20dp"
android:textColor="#color/white"
android:typeface="sans"
android:gravity="center_horizontal|center_vertical"
android:id="#+id/tvNoData"/>
</LinearLayout>
</ScrollView>
fragments are one below other like frag1 then frag2 etc.
Now my question is when my first fragment visibility is gone then the second fragment comes at the top but it goes up.means we cant see the second fragment from the top we have to scroll up to see the top portion of the second fragment.
I tried using things like..
scroll_view.pageScroll(View.FOCUS_UP) ;
also
scroll_view.fullScroll(View.FOCUS_UP) ;
and
scroll_view.smoothScrollTo(0,0);
but none worked for me
/Just Simply try to use NestedScrollView instead of ScrollView/
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- <include layout="#layout/project_content_main" />-->
Note: Include you LineaeLayout like above example.
</android.support.v4.widget.NestedScrollView>
And don't forget to add android support design Library in Builf.gradle file
compile 'com.android.support:design:your_version'
Try puting this in your scrollView xml tag
android:descendantFocusability="beforeDescendants"
My listview is in a scrollable view, when I reach the Upper bound limit or the lower bound limit the listview doesn't show the blue circle from the bounds. How can I make the layout shows it?
After adding the overScrollMode=Always still it is not working, This Layout is added in the ScrollingActivity sample provided by Android.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:overScrollMode="always"
android:fillViewport="true>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/snackBarLocation">
</android.support.design.widget.CoordinatorLayout>
<ListView
android:id="#+id/list2"
android:layout_width="match_parent"
android:layout_height="55dp"/>
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="50dp"
/>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="50dp"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text"
/>
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="10dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
This is called "over-scroll".
You can change the over-scroll mode via XML:
android:overScrollMode="always"
Or via Java:
setOverScrollMode(OVER_SCROLL_ALWAYS);
See https://developer.android.com/reference/android/widget/ScrollView.html#setOverScrollMode(int) for more information.
Here is my coordinator layout. Everything is ok, I can see everything.
But I can't see the ImageView. In code I am initializing ImageView correctly and have an object. I need Image view in center of screen.
If I change ImageView to button I see button in center of screen, but if I change to something other I can´t seen that element.
Please how Can I add ImageView to coordinatorLayout?
This code is in coordinatorlayout.
Thank you.
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/status_btn"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center"
android:background="#color/red" />
<Button
android:id="#+id/delete_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Smazat"
android:visibility="gone" />
<include
layout="#layout/panel_camera_preview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<!--height a width se nastavuje dynamicky-->
<LinearLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<RelativeLayout
android:id="#+id/bottom_sheet_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/header_vg"
android:layout_width="match_parent"
android:layout_height="#dimen/vision_bottom_sheet_header_height"
android:layout_alignParentTop="true"
android:background="#color/gray_header_vision"
android:gravity="center">
<TextView
android:id="#+id/header_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#color/white"
android:textSize="16sp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/vision_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header_vg"
android:background="#color/white"
android:scrollbars="vertical"
android:visibility="gone" />
<include
android:id="#+id/empty_vg"
layout="#layout/panel_vision_tutorial"
android:layout_width="match_parent"
android:layout_height="#dimen/vision_bottom_sheet_item_height"
android:layout_below="#+id/header_vg" />
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Here is my panel_camera_preview:
<my_package.CameraSourcePreview
android:id="#+id/camera_preview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray">
<my_package.GraphicOverlay
android:id="#+id/face_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</my_package.CameraSourcePreview>
CoordinatorLayout is a FrameLayout, thus the last View in order overlays the previous ones. Then Imageview results not visible because it is covered by your panel_camera_preview, while Button results visible, but only if is running on Lollipop or greater, cause its default elevation (2dp).
I have Working on a layout in which my TabLayout is between some content and should be sticked to top ( below Toolbar) on reaching top while scrolling.
Following is my layout xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<com.sample.retail.ui.view.StickyScrollView
android:id="#+id/sticky_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:stuckShadowDrawable="#drawable/sticky_shadow_default">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/home_activity_views_elevation"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/home_top_banner_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_banner_layout_height">
<com.sample.retail.ui.view.viewPager.ScrollerViewPager
android:id="#+id/home_banner_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="#dimen/home_activity_views_elevation" />
<com.Sample.retail.ui.view.viewPager.SpringTabIndicator
android:id="#+id/home_banner_indicator"
android:layout_width="#dimen/home_banner_indicator_width"
android:layout_height="#dimen/home_banner_indicator_height"
android:layout_alignBottom="#id/home_banner_view_pager"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:elevation="12dp"
app:stiIndicatorColor="#color/theme_primary"
app:stiIndicatorColors="#array/spring_indicator_colors"
app:stiRadiusMax="4dp"/>
</RelativeLayout>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="#dimen/home_activity_views_elevation">
<LinearLayout
android:id="#+id/home_category_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_category_layout_height"
android:orientation="horizontal">
<TextView
android:id="#+id/cat_textView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_wallet_giftcard"
android:gravity="center"
android:text="Fashion" />
<TextView
android:id="#+id/cat_textView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_phone"
android:gravity="center"
android:text="Electronics" />
<TextView
android:id="#+id/cat_textView3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_phone"
android:gravity="center"
android:text="Sports" />
<TextView
android:id="#+id/cat_textView4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/grey_ripple"
android:drawableTop="#drawable/ic_action_list_2"
android:gravity="center"
android:text="Categories" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_marginBottom="4dp"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="#dimen/home_activity_views_elevation">
<LinearLayout
android:id="#+id/home_lower_banner_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_lower_banner_height"
android:orientation="horizontal">
<ImageView
android:id="#+id/lower_banner_firstImageView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:background="#drawable/shape_bg_strike_thru"
android:scaleType="fitXY"
android:src="#drawable/banner3" />
<ImageView
android:id="#+id/lower_banner_secondImageView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:background="#drawable/shape_bg_strike_thru"
android:scaleType="fitXY"
android:src="#drawable/banner4" />
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:id="#+id/recently_viewed_text_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/home_view_headertext_layout_height"
android:layout_marginBottom="4dp"
android:background="#66000000"
android:elevation="#dimen/home_activity_views_elevation"
android:gravity="center">
<TextView
android:id="#+id/recently_viewed_item_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/recently_viewed"
android:textColor="#color/white"
android:textSize="#dimen/home_section_header_textSize"
android:textStyle="bold" />
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/categoryTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/theme_primary"
android:tag="sticky"
app:tabMode="scrollable"
app:theme="#style/AppTabTheme" />
<android.support.v4.view.ViewPager
android:id="#+id/product_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</com.sample.retail.ui.view.StickyScrollView>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/menu_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I have also tried StickyItemView https://github.com/emilsjolander/StickyScrollViewItems/issues/27 Library as above but its not gonna work for me as Its pretty hard for me to redirects touch and motion Events between stickked views like TabLayout. I Will use Recycler view in ViewPager below Tabs.How do I achieve this on scroll sticking things of TabLayout? Any help would be appreciated.
I have found a answer by working around it a bit more. Following is my trick working for me.
<Coodinatorlayout
<Appbarlaout -- with marginTop=height of toobar
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
<View> --with android:layout_scrollFlags = "scroll"
.....
....
<View> --with android:layout_scrollFlags = "scroll"
<TabLayout>--with android:layout_scrollFlags = "scroll|exitUnitlCollapsed|"
</Appbarlayout>
<Viewpager> --with app:layout_behavior="#string/appbar_scrolling_view_behavior"
<Toobar> --with gravity top //this is the main trick part. Put a separate toolbar in parent coordinate layout instead of putting it in AppbarLayout. and set this as support Action bar
</Coordinatorlayout>
So if I understand what you are trying to do is have at the top some static tabs and at the bottom of it some recyclerview? Then you don't need to encapsulate the recyclerview with a scrollview since recyclerview comes with its own scrolling. Can you post an image of what you're trying to achieve?
So I have a linear layout with two elements in it a ViewPager and a RecyclerView. Currently when the user scrolls down the ViewPager stays at the top of the page. Preferably the what would happen is that the user would scroll past the ViewPager so that the RecyclerView took up the page. How can I make this happen?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
style="#style/AppTheme"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".ListEventsActivity">
<android.support.v4.view.ViewPager
android:id="#+id/fragment_pager"
android:layout_height="300dp"
android:layout_weight="1"
android:layout_width="match_parent"/>
<android.support.v7.widget.RecyclerView
android:layout_weight="1"
android:id="#+id/user_recycler"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Use this, you need to set the height to 0dp while applying
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
style="#style/AppTheme"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".ListEventsActivity">
<android.support.v4.view.ViewPager
android:layout_weight="0.7"
android:id="#+id/fragment_pager"
android:layout_height="0dp"
android:layout_width="match_parent"/>
<android.support.v7.widget.RecyclerView
android:layout_weight="0.7"
android:id="#+id/user_recycler"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>