How to add image view in collapsingToolbar layout title?

How to add image view in collapsingToolbar layout title? - android

I have this collapsingToolbar layout
I just want to add "rupee" symbol before "6.45" .
But i don't know how to add this image, please help me with that.
XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".Ads.AdsHomeActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collaps_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:textAlignment="gravity"
app:toolbarId="#+id/toolbar">
<LinearLayout
android:id="#+id/coll_balance_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="top|center"
app:layout_collapseMode="parallax"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_wallet_white"
android:layout_gravity="center"
/>
<!-- <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="-10dp"
android:layout_gravity="center">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_india_rupee_white"
android:layout_gravity="center"
android:paddingTop="2dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="20"
android:textSize="20sp"
android:textColor="#color/white"
/>
</LinearLayout>-->
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_ads_home" />
<!--<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />-->
<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/ads_home_banner_adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111"
android:layout_marginTop="3dp"
android:layout_gravity="bottom|center"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
this is my xml file.
Someone says to add imageView i have already tried but it don't appear in front of 6.45 , it's appear in background like this wallet image.

try this code:
1.Direct in XML:
android:text="\u20B9 25"
2.Programmatically in JAVA file
samp_txt.setText("Price : \u20B9"+" 20.25");
ho here we use \u20B9 unicode to print rupees symbol.

Related

How to make toolbar transparent who's parent is Appbarlayout?

I have tried using styles and android:background:"#null" / android:background:"#color/transparent" inside AppBarLayout as well as inside V7 toolbar nothing seems to workout.
Have tried these solutions too :
1.How to make Toolbar transparent?
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ProgressWheel="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/main_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/green"
android:fitsSystemWindows="true"
android:paddingTop="25dp"
app:itemTextColor="#c92e30">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I have included this layout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.g5web.aastha.activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:contentInsetStartWithNavigation="0dp">
<LinearLayout
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:gravity="center">
<ImageView
android:id="#+id/toolbar_title_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/signin"
android:visibility="gone" />
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:visibility="gone" />
<TextView
android:id="#+id/toolbar_title_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:textColor="#color/blue"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/frame_container" />
<!--</LinearLayout>-->
</android.support.design.widget.CoordinatorLayout>

On your AppBarLayout you need to set
android:background="#null"
or
android:background="#android:color/transparent"
im testing it right now and it's working for me
The thing is that if you have layouts inside your toolbar like here you probably need to set their backgrounds aswell
<LinearLayout
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:gravity="center">
<ImageView
android:id="#+id/toolbar_title_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/signin"
android:visibility="gone" />
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:visibility="gone" />
<TextView
android:id="#+id/toolbar_title_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:textColor="#color/blue"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>

Try This
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:theme="#style/AppTheme.PopupOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>

how to achieve this layout using collapsing toolbar

https://i.stack.imgur.com/j1sPI.png
Please see the link for layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#80000000"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/user_profile_empty"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth"
android:scaleType="centerCrop"
android:visibility="gone" />
<android.support.v4.view.ViewPager
android:id="#+id/photo_pager"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth" />
<com.ogaclejapan.smarttablayout.SmartTabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/viewpagertab"
android:layout_width="wrap_content"
android:layout_height="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_alignBottom="#+id/photo_pager"
android:layout_alignRight="#+id/photo_pager"
android:layout_gravity="bottom"
android:layout_marginBottom="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_marginRight="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_marginTop="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_customTabTextLayoutId="#layout/custom_tab_circle"
app:stl_dividerColor="#color/transparent"
app:stl_dividerThickness="0dp"
app:stl_indicatorColor="#color/Sapio.RED"
app:stl_indicatorCornerRadius="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_indicatorInterpolation="linear"
app:stl_indicatorThickness="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_underlineColor="#color/transparent"
app:stl_underlineThickness="0dp" />
</RelativeLayout>
<!--<android.support.v7.widget.Toolbar-->
<!--android:id="#+id/MyToolbar"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="80dp"-->
<!--app:layout_collapseMode="parallax"/>-->
<RelativeLayout
android:id="#+id/likeIgnore_name_view"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth">
<LinearLayout
android:id="#+id/like_ignor_view_upper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="15dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/skip_button"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="#drawable/close" />
<ImageView
android:id="#+id/superLikeImage"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="#dimen/Default.PaddingMargin.Small"
android:src="#drawable/super_like" />
<ImageView
android:id="#+id/like_button"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="#dimen/Default.PaddingMargin.Small"
android:src="#drawable/heart" />
</LinearLayout>
<LinearLayout
android:id="#+id/nameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="25dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/nameView_margin"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="visible" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:paddingRight="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:layout_weight="1"
android:gravity="center"
android:singleLine="true"
android:text="abc,31"
android:textColor="#color/Header.Text"
android:textSize="#dimen/Registration.Button.TextSize"
android:textStyle="bold" />
<TextView
android:id="#+id/distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:paddingRight="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:layout_weight="1"
android:gravity="center"
android:singleLine="true"
android:text="abc,31"
android:textColor="#color/Header.Text"
android:textSize="#dimen/Registration.Button.TextSize" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/refine_matches_view"
style="#style/TextAppearanceThin"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:background="#drawable/filter_shape"
android:gravity="center"
android:minHeight="0dp"
android:text="#string/filter"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="#dimen/LoginScreen.Button.TextSize"
android:visibility="visible" />
<ImageButton
android:id="#+id/more_button"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="20dp"
android:background="#drawable/ic_more_vert_white_36dp"
android:gravity="center"
android:minHeight="0dp"
android:src="#drawable/filter_shape"
android:visibility="visible" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/user_photo"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="15dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="#drawable/match_bg"
android:visibility="visible"
app:elevation="10dp"
app:layout_anchor="#id/nameView"
app:layout_anchorGravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
<include
android:id="#+id/empty_profile_view"
layout="#layout/section_empty_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
please help me to achieve above type from layout.As i have tried as above and when scrolling the image view go inside the toolbar and half of the image view not visible.

you can follow this link.
http://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.journaldev.collapsingtoolbarlayout.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/photo"
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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_info" />
</android.support.design.widget.CoordinatorLayout>
hopefully you will be helpe from it.

Actually the appbar is already having the elevation that's why it makes all the views to gets inside of itself.
So just you need to give app:elevation="0dp" to the appbar layout. It gives all other views freedom to stay over itself.

Bottomsheet weird behaviour with snackbar

I am having following issues when using bottomsheet with snackbar:
Whenever Snackbar is shown then Bottoomsheet is getting inflated first.
Refer screenshot below
Here is the layout file, id of bottomSheet is details_bottom_sheet
<?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:animateLayoutChanges="true"
android:fitsSystemWindows="true"
tools:context="project.udacity.com.investishare.ui.ItemsDetailActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_subhead_desc"
style="#style/TextAppearance.AppCompat.Caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/subheading_margin_bottom"
android:layout_marginLeft="#dimen/subheading_margin_left"
android:layout_marginStart="#dimen/subheading_margin_left"
android:drawableLeft="#drawable/ic_subtree"
android:drawablePadding="#dimen/subheading_drawable_padding"
android:drawableStart="#drawable/ic_subtree"
android:gravity="center_vertical"
android:paddingLeft="#dimen/subheading_padding_left"
android:paddingStart="#dimen/subheading_padding_left"
android:textColor="#color/color_white"
android:textSize="#dimen/tv_subhead_desc_text_size"
tools:text="#string/tv_subhead_desc_sample_text" />
<TextView
android:id="#+id/tv_shared_with"
style="#style/TextAppearance.AppCompat.Caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_subhead_desc"
android:layout_marginBottom="#dimen/subheading_margin_bottom"
android:layout_marginLeft="#dimen/subheading_margin_left"
android:layout_marginStart="#dimen/subheading_margin_left"
android:drawableLeft="#drawable/ic_shared_white"
android:drawablePadding="#dimen/subheading_drawable_padding"
android:drawableStart="#drawable/ic_shared_white"
android:gravity="center_vertical"
android:paddingEnd="#dimen/tv_shared_with_padding_right"
android:paddingLeft="#dimen/subheading_padding_left"
android:paddingRight="#dimen/tv_shared_with_padding_right"
android:paddingStart="#dimen/subheading_padding_left"
android:textColor="#color/color_white"
android:textSize="#dimen/tv_shared_with_text_size"
tools:text="#string/tv_shared_with_sample_text" />
<ImageView
android:id="#+id/iv_remove_sharing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#id/tv_subhead_desc"
android:layout_marginEnd="#dimen/subheading_drawable_padding"
android:layout_marginRight="#dimen/subheading_drawable_padding"
android:clickable="true"
android:contentDescription="#string/cd_remove_sharing"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:padding="#dimen/subheading_drawable_padding"
android:src="#drawable/ic_cancel_white" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_items_detail" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_detail_activity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_shared_white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="450dp"
android:id="#+id/details_bottom_sheet"
android:elevation="16dp"
android:background="#color/color_white"
app:layout_behavior="#string/bottom_sheet_behavior">
<TextView
android:id="#+id/bottom_sheet_header"
style="#style/Base.TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/textview_bg"
android:padding="10dp"
android:text="hello"
android:textSize="24sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bottom_sheet"
android:layout_width="match_parent"
android:layout_below="#id/bottom_sheet_header"
android:background="#color/color_white"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Extra whitespace between android Views

In the following layout , after the AppBarLayout and before RecyclerView , some extra whitespace is coming , i am unable to figure out how it is coming.
I've checked margins and all , seems to be fine .
Also due to same reason , i believe the last element of RecyclerView is cropped out of the layout view .
Any help appreciated .
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/transMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="80dp"
android:fitsSystemWindows="true"
android:paddingLeft="12dp"
app:contentScrim="?android:attr/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarAct"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--button was here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/monthSelLay"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/monthButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textColor="#000"
android:textSize="14sp" />
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginTop="12dp"
android:layout_toRightOf="#id/monthButton"
android:src="#drawable/ic_keyboard_arrow_down_black_24dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/syncLay"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/syncButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="8dp"
android:text="SyncUp"
android:textAlignment="center"
android:textColor="#000" />
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/syncButton"
android:src="#drawable/ic_cached_black_48dp" />
</RelativeLayout>
</LinearLayout>
<!--switch was here-->
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.SearchView
android:id="#+id/searchTrans"
android:layout_width="350dp"
android:layout_height="40dp"
android:layout_below="#+id/toolbar"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#fff"
android:hint="Start typing an Amount/Description"
android:textColor="#000"
android:textColorHint="#ccc"
app:tabMode="scrollable" />
<!--need to change the background as an object oval prbbly-->
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/trans"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/colorAccent"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
</FrameLayout>
In the first image , i've scrolled up slightly to show the whitespace.
With cropped last element of RecyclerView .

Remove this line from your RecyclerView
android:layout_gravity="center_horizontal"

Remove this line:
android:layout_gravity="center_horizontal"
or
Make your coordinator height to wrap_content.
<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/transMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">

Recyclerview does not follow the collapsing toolbar

I created a collapsing toolbar and placed a recyclerview below it but when I run the app the cardviews inside the recycleview overlaps the image of the collapsing toolbar .How can I fix this
MainActivity.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<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"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rv"
android:orientation="vertical"
android:clipToPadding="false"
android:layout_marginTop="?attr/actionBarSize"
android:layout_below="#+id/image"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:layout_anchor="#id/app_bar_layout"
style="#style/fab"
app:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
Item.xml (layout containing the cardview inside the recyclerview)
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.co nbm/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:cardElevation="6dp"
android:padding="6dp"
android:id="#+id/cv">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.co nbm/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#4682b4"
android:padding="16dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp"
android:src="#drawable/li"
android:id="#+id/imageView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:text="Aayush Chaubey"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/imageView"
android:textColor="#ffffff"
android:textSize="30sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:text="app developer"
android:textColor="#ffffff"
android:textSize="25sp"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Capsule"
android:textColor="#00bfff"
android:textSize="20sp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:id="#+id/textView3"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</android.support.v7.widget.CardView>

Well, I think you need to add this line app:layout_behavior="#string/appbar_scrolling_view_behavior"
in your RecyclerView
Eg:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Most importantly you will also need to add
xmlns:app="http://schemas.android.com/apk/res-auto"
in coordinatorLayout tag.
Another point: Make sure you're using com.android.support:recyclerview-v7:22.2.0 with prior version it might not work properly
Hope it helps.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to add image view in collapsingToolbar layout title? - android

try this code: 1.Direct in XML: android:text="\u20B9 25" 2.Programmatically in JAVA file samp_txt.setText("Price : \u20B9"+" 20.25"); ho here we use \u20B9 unicode to print rupees symbol.

Related

How to make toolbar transparent who's parent is Appbarlayout?

how to achieve this layout using collapsing toolbar

Bottomsheet weird behaviour with snackbar

Extra whitespace between android Views

Recyclerview does not follow the collapsing toolbar

Categories

Resources