Develop Reference

How to remove the divider between the ActionBar and the rest of screen?

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>

How to make CardView overlap AppBarLayout

I have tried to accomplish something similar to the following layout.
There are a few things to note. The cardview that overlaps the appbar is not supposed to be a part of a nestedscrollview as I have a nestedscrollview in the xml layout. The cardview is positioned correctly but it comes just beneath the appbarlayout.

I just got the solution to this now. I did not give the CardView an elevation value before and that was wrong. I just assumed that making it come last in the CoordinatorLayout should place it on top. It works now. I have added an elevation value. Here is the code -
<xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/quotes"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="32dp"
android:layout_marginLeft="32dp"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|center"
app:cardElevation="#dimen/small_padding"
/>
</android.support.design.widget.CoordinatorLayout>

Try with the following layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/toolbar_logo"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
app:cardCornerRadius="8dp"
app:cardElevation="7dp"
android:layout_marginTop="150dp"
android:id="#+id/cardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Photos" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="376" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1769"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Following"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="127"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

Remove left space in toolbar android

I had add some view inside Toolbar but there is showing some left padding which I want to remove.
I want to remove those 'Remove this space section.
Here is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.swornimlab.swornimlab.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:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<include
layout="#layout/layout_inside_toolbar" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
View which I want to add inside toolbar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
<LinearLayout
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
>
<TextView
android:text="Hello, Asmin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="left"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Large"/>
<TextView
android:text="Welcome Home"
android:layout_marginTop="10dp"
android:gravity="left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:src="#drawable/ic_home_vc"
android:tint="#android:color/white"
android:layout_alignParentRight="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView2" />
</LinearLayout>

Just add these two lines in your Toolbar in XML
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"

Remove android:layout_gravity="center_vertical" from layout.
And add app:contentInsetStart and app:contentInsetEnd to the Toolbar :
For e.g.
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
So your code looks like this :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<include
layout="#layout/layout_inside_toolbar" />
</android.support.v7.widget.Toolbar>
layout_inside_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Hello, Asmin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="left"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Large"/>
<TextView
android:text="Welcome Home"
android:layout_marginTop="10dp"
android:gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:src="#drawable/ic_home_vc"
android:tint="#android:color/white"
android:layout_alignParentRight="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView2" />
</LinearLayout>

android:layout_gravity="center_vertical"
This seems to be issue.
Also on another note, i would suggest you to use percentRelativelayout for your layout distribution. Using weight with your linear layout is very expensive

Overlay ImageView on Toolbar

I have this code for my custom toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/new_logo"
android:adjustViewBounds="true"
android:padding="5dp"
android:id="#+id/app_logo" />
</android.support.v7.widget.Toolbar>
Now it looks like this:
What I need to do is this one:
How will I implement that?

try this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="90dp"
android:src="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"
android:id="#+id/app_logo" />
</RelativeLayout>

You need to take a RelativeLayout as a root as follows :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_stripe"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:padding="5dp"
android:id="#+id/app_logo" />
</RelativeLayout>

How to stop scroll on CollapsingToolbarLayout

My collapsingtoolbar layout consists of an image. I want that image to be stopped scrolling before say 270dp and then only scroll the remaining content.
I had already followed 2 answers on Stackoverflow but that doesn't seems to work for me.
How to Stop scroll on CollapsingToolbarLayout so it doesn't completely collapse
How to Stop scroll on CollapsingToolbarLayout so it doesn't completely collapse
Layout xml
<?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="wrap_content"
android:animateLayoutChanges="true">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_imgview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/app_bar_layout"
android:background="#ffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_shadow_height"
android:background="#drawable/shape_shadow" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff"
android:weightSum="1.0">
<Button
android:layout_width="0dip"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dp"
android:layout_weight=".5"
android:background="#drawable/button_bg"
android:text="Set Wallpaper"
android:textColor="#ff4081"
android:textSize="12dp" />
<Button
android:layout_width="0dip"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight=".5"
android:background="#drawable/button_bg_dw"
android:text="Download"
android:textColor="#FFFF"
android:textSize="12dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="?attr/dividerHorizontal" />
<include
layout="#layout/activity_details"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
I have tried setting the height of AppBarLayout as 280dp but it was of no use.
I'm setting image through Universal Image Loader.