I am trying to add an image at the top of a fragment, it should have parallax effect when scrolled to view image details.
Something like this
I tried to get this using collapsible toolbar, but the issue is that the image is not filling the whole toolbar leaving blank space on sideways if image is in portrait mode. and also no parallax is there.
This is the xml code of what I have done till now.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorlayout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="70dp">
<android.support.design.widget.AppBarLayout
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="fill_parent"
android:id="#+id/actionbarlayout"
android:layout_height="207dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/CollapsingToolbarLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:id="#+id/details_Image"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize"/>
</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:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="3dp"
card_view:cardCornerRadius="7dp"
android:layout_margin="5dp"
android:id="#+id/new_order"
card_view:cardBackgroundColor="#color/cardview_shadow_end_color"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/download"
android:background="#null"
android:src="#drawable/ic_action_ic_file_download_white_36dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/favourite"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/zoom"
android:background="#null"
android:src="#drawable/ic_action_ic_zoom_out_map_white_36dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageDescription"
android:text="Sample text"
/>
</ScrollView>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"
android:id="#+id/fullimage"/>
</android.support.design.widget.CoordinatorLayout>
This is what it looks like now.
Please suggest me what changes I need to make in order to attain what I want, thank you very much in advanced.
Use android:scaleType="centerCrop" for the ImageView
Related
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 am working a project. I have a a layout with a view at top and a Scrollview at the bottom of the view. Initially the layout will look like this.
After I scroll up the bottom layout. The view should smoothly change the the below view. And if I scroll down the view should come back to its previous layout.
As you can see there is a change in the position and size of the textviews. How can I achieve this ?
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/home_parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/AT_charcoal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="9dp"
android:background="#drawable/topographybackgroundx">
<RelativeLayout
android:id="#+id/layout_header_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp">
<RelativeLayout
android:id="#+id/top_ExpandedHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/image_invisalignLogo"
android:layout_width="108dp"
android:layout_height="26dp"
android:background="#drawable/invis_logo"
android:contentDescription="#null" />
<ImageButton
android:id="#+id/image_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="#drawable/ic_profile_wht"
android:contentDescription="#null" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/number_RelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/layout_aligner_expanded_change"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<TextView
android:id="#+id/image_alignerNumber"
style="#style/BigNumber"
android:layout_width="wrap_content"
android:layout_height="138dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/textview_alignerTimeChange"
android:maxLength="2"
android:maxLines="1"
android:text="#string/three"
android:textSize="124sp" />
<TextView
android:id="#+id/textview_alignerChange"
style="#style/BodyWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="80dp"
android:layout_toEndOf="#id/image_alignerNumber"
android:letterSpacing="0.03"
android:text="#string/days_alignerchange" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image_selfie_icon"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:civ_border_color="#FFFFFFFF"
app:civ_border_width="2dp" />
<TextView
android:id="#+id/textview_6alignerNumber"
style="#style/HeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/image_alignerNumber"
android:layout_below="#id/image_alignerNumber"
android:layout_marginTop="2dp"
android:letterSpacing="0.03"
android:text="#string/aligner_number" />
<TextView
android:id="#+id/textview_expanalignerNumber"
style="#style/HeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image_alignerNumber"
android:layout_toEndOf="#id/textview_6alignerNumber"
android:text="5" />
<TextView
android:id="#+id/textview_alignerTimeChange"
style="#style/LargeHeaderWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:letterSpacing="0.03"
android:text="#string/aligner_change"
android:visibility="gone" />
<Button
android:id="#+id/button_change"
style="#style/TextButtonWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textview_alignerTimeChange"
android:layout_marginTop="15dp"
android:background="#color/AT_lushGreen"
android:gravity="center_vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="#string/changenow"
android:visibility="gone" />
</RelativeLayout>
<View
android:id="#+id/dividerline"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_below="#id/number_RelativeLayout"
android:layout_marginTop="12dp"
android:background="#color/AT_line" />
<TextView
android:id="#+id/addPhoto_TextView"
style="#style/BtnTextBlue18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dividerline"
android:layout_marginTop="10dp"
android:text="#string/add_photo" />
<TextView
android:id="#+id/goCalendar_TextView"
style="#style/BtnTextGold18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#id/dividerline"
android:layout_marginTop="7dp"
android:text="#string/go_calendar" />
</RelativeLayout>
</RelativeLayout>
<include
layout="#layout/homescreen_scrollview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/layout_header_profile"
android:layout_marginTop="15dp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
You can use the Collapsing Toolbar Layout
Example Here and here
Edit: some piece of 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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/beach_scene"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" >
</android.support.v7.widget.Toolbar>
</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="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/sample_string"/>
</android.support.v4.widget.NestedScrollView>
Using a Collapse Tool Bar as João said, your code should be like this
and getting my answer as base from here
<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:clipToPadding="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#color/WHITE">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:expandedTitleMarginStart="72dp"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<Your Content>
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/homescreen_scrollview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/layout_header_profile"
android:layout_marginTop="15dp" />
On <Your Content> is the place where you should put your string.
Sorry that I can't help more. Your Cody is a little messy and really hard to understand.
Maybe if you edit leaving only the important codes will help.
But maybe this library can help you.
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 have an android interface use coordinatorLayout,AppBarLayout and NestedScrollView to manage the scroll action.
Before scroll Snapshot
After scroll Snapshot
How do I show the AppbarLayout to the top of the screen when I clicked the comment button after scroll?Just like before scroll.
Here is my layout:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#ececec">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f7f7f7"
android:fitsSystemWindows="true"
android:minHeight="1dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/color_3"
android:layout_margin="10dp"/>
<!--<include layout="#layout/wentixiangqing_dingbu_wentidaan"/>-->
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FFF">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="star:123"
android:textColor="#797979"/>
<View
android:layout_width="30dp"
android:layout_height="3dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#F00"/>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="comment:90"
android:textColor="#797979"/>
<View
android:layout_width="30dp"
android:layout_height="3dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#F00"/>
</FrameLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="40dp"
android:layout_marginTop="1dp"
android:overScrollMode="always" />
</android.support.v4.widget.NestedScrollView>
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="bottom|end"
android:text="Comment" /></android.support.design.widget.CoordinatorLayout>
Any suggestion would be appreciated.
have you tried this code on clicking the button ?
AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.appbar);
appBarLayout.setExpanded(true, true);
Also see this : Hide/Show Toolbar programmatically on CoordinatorLayout
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>