How to Hide Toolbar When I Scrolling Content Up

How to hide ToolBar when I scrolling content up?

you have to do many changes in your both layout. first use CoordinatorLayout in activity_main.XML like below(change theme as per your requirement).

<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
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"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

in content_main.XML use android.support.v4.widget.NestedScrollView instead of ScrollView.

also use app:layout_behavior="@string/appbar_scrolling_view_behavior" inside android.support.v4.widget.NestedScrollView like below.

<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/textone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "
android:textSize="25dp"
android:textStyle="bold" />

/// Add your other code here

</LinearLayout>

</android.support.v4.widget.NestedScrollView>

How to make toolbar hide on scroll android studio

The Toolbar needs to be the child of an AppBarLayout for it to be able to hide on scroll. I believe the AppBarLayout must also be contained within a CoordinatorLayout as well.

The answer to this question from a while back has a nice working example: CoordinatorLayout doesn't hide the actionbar

Auto hide or show tool bar when scroll up android

I found the solution:
just make your toolbar and imageView in Layout with app:layout_scrollFlags="scroll|enterAlways"
like this

           <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
//ImageView
//Toolbar
</RelativeLayout>

Full 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"
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="275dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="@+id/ivTop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_search"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />

<<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
android:contentInsetEnd="0dp"
android:contentInsetRight="0dp"
android:background="@color/blue_cerulean_"
android:padding="5dp"
app:popupTheme="@style/AppTheme.PopupOverlay">

<ImageView
android:id="@+id/ivBack"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@drawable/ic_search"
android:tint="@color/colorPrimary" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>

</android.support.design.widget.CollapsingToolbarLayout>

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="@android:color/transparent"
app:tabBackground="@android:color/transparent"
app:tabIndicatorColor="@android:color/black"
app:tabIndicatorHeight="2.50dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:tabMode="fixed"
app:tabPadding="0dp"
app:tabSelectedTextColor="@android:color/black"
app:tabTextColor="@android:color/holo_blue_dark" />
</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">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<TextView
android:id="@+id/tvTitleTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start|center_vertical"
android:padding="10dp"
android:text="TabSelection"
android:textAlignment="viewStart"
android:textColor="@color/colorAccent"
android:textSize="20sp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

What do I need to do to make my toolbar hide when I scroll?

The Feature you are requesting is called Collapsingtoolbarlayout And you can refer this

            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" />

after this you have to set menu items

<menu 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"
tools:context="com.journaldev.collapsingtoolbarlayout.ScrollingActivity">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />

<item
android:id="@+id/action_info"
android:orderInCategory="200"
android:title="info"
app:showAsAction="ifRoom"
android:icon="@android:drawable/ic_dialog_info"/>

And in java code do this

public class ScrollingActivity extends AppCompatActivity {

private Menu menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = false;
int scrollRange = -1;

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
isShow = true;
showOption(R.id.action_info);
} else if (isShow) {
isShow = false;
hideOption(R.id.action_info);
}
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
this.menu = menu;
getMenuInflater().inflate(R.menu.menu_scrolling, menu);
hideOption(R.id.action_info);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
} else if (id == R.id.action_info) {
return true;
}

return super.onOptionsItemSelected(item);
}

private void hideOption(int id) {
MenuItem item = menu.findItem(id);
item.setVisible(false);
}

private void showOption(int id) {
MenuItem item = menu.findItem(id);
item.setVisible(true);
}

}



Related Topics



Leave a reply



Submit