so I'm fairly new to Java and Android development and I've hit a snag.
So I have created a custom Actionbar with much more height. It has at least 1 visible textview (depending on the fragment). My issue is I want my textviews aligned to the left of the app bar (directly below the nav drawer icon) but when my nav drawer button is generated in the top left it pushes my views to the right.
Does anyone know how to stop the toolbar's child views being essentially pushed over when the icon is added. (code below)
App Action Bar XML:
<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.arcturusapps.grassrootsorganiser.MainActivity">
<!--TODO: Fix the Hard Coded Height -->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="125dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="125dp"
android:background="#drawable/header_grass"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tool_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="85dp"
android:fontFamily="sans-serif-light"
android:text="Team Organiser"
android:textColor="#color/white"
android:textSize="12pt" />
<ImageView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginRight="6dp"
android:src="#drawable/logo_arc_header" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<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="#android:drawable/ic_dialog_email" />
Main Activity Java:
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
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();
}
});
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
Main Activity
<?xml version="1.0" encoding="utf-8"?>
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
How I want it to look
How it Currently looks
P.S I am aware I shouldn't manually set 'dp' values for margins etc. at this point I am just trying to get it to look right. I'll go back and make it more dynamically scalable later.
Related
This xml layout has been populated by ViewPager and RecyclerView via an activity class, I want to position ViewPager on top and RecyclerView at the bottom, I tired to use android:layout_below="#+id/awesomepager" in the LinearLayout of RecyclerView but it doesn't work (it stays on top behind the toolbar[Deep blue color in the picture]), I also used android:layout_alignBottom="#+id/awesomepager" but that puts it inside the ViewPager at the bottom.
I basically want ViewPager and RecyclerView to be siblings , like this picture , black area to be ViewPager at the top and the green area to be RecyclerView at the bottom.
what is correct way to do this?
viewpager_with_toolbar_overlay.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</RelativeLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>
Update:
If I define the hight of ViewPager the problem will be resolved , but when screen size changes lower part of the screen will be blank
I searched a lot and finally came up with a solution, first I changed RelativeLayout to LinearLayout and added android:orientation="vertical" to it, then added android:layout_weight="1" to ViewPager.
Final version
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</LinearLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>
I seem to be stuck at the MainActivity.kt file and my app won't debug as it shows the mentioned errors.
This is for a music player app with a Navigation Drawer.
Edit : I have added the layout file after the comment as requested.
class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
fab.setOnClickListener { view->
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show()
}
val toggle = ActionBarDrawerToggle(
this, drawer_layout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
drawer_layout.addDrawerListener(toggle)
toggle.syncState()
nav_view.setNavigationItemSelectedListener(this)
}
//as someone asked for the layout file as well here it is
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
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/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_gradient" />
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="#drawable/echo_logo" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/navigation_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header"/>
</RelativeLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
There is no component called fab in your xml layout file. You still have the line of code that access a component called fab from your class. Remove
fab.setOnClickListener { view->
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show()
}
It should get it to work.
i want to add a layout which hides/shows when recyclerview scroll. that layout will hide when recyclerview scroll down, will show when recyclerview scroll up, like twitter's new tweet layout. i can do it for appbarlayout but i can not do for that layout. how can i do that?
http://i.hizliresim.com/rVyDq3.png
the purple layout will hide show like actionbar :
http://i.hizliresim.com/gAMp92.png
here is my layout file :
<android.support.v4.widget.DrawerLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<!-- my main content -->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
<LinearLayout
android:orientation="vertical"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/color_accent_pink">
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<!-- that layout will hide/show when recyclerview scroll -->
<LinearLayout
android:orientation="horizontal"
android:id="#+id/takimlar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/bg_group_item_swiping_active_state"
android:layout_gravity="bottom" >
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- my navigation drawer -->
<RelativeLayout
android:id="#+id/container"
android:layout_width="235dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#color/myDrawerBackground">
<TextView
android:id="#+id/merhabaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="400dp"
android:layout_marginRight="40dp"
android:layout_alignParentRight="true"
android:text="Hello!"/>
</RelativeLayout>
SOLVED
I found the answer there : https://blog.iamsuleiman.com/implement-floating-action-button-fab-part-2/
I have a simple solution for that ..
recyclerview.addOnScrollListener(new HidingScrollListener()
{
#Override
public void onHide()
{
tabss.animate().translationY(tabss.getHeight())
.setInterpolator(new AccelerateInterpolator(2)).start();
filtershow.animate().translationY(-filtershow.getHeight())
.setInterpolator(new AccelerateInterpolator(1));
}
#Override
public void onShow()
{
tabss.animate().translationY(0).setInterpolator(new
DecelerateInterpolator(2)).start();
filtershow.animate().translationY(0).setInterpolator
(new DecelerateInterpolator(1)).start();
}
});
In that Recyclerview i was hiding screen top filters and screen bottom tabs
If you want have doubts about this hiding layout please ask me.
I will provide your required code for that.
i want to make a collapsing toolbar layout like google play store. like this:
https://sendvid.com/ugjspx8r
and here is my layout:
http://sendvid.com/s4mx3xem
how can i do that with new android support library?
here is my layout xml file:
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/seffafCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
app:expandedTitleMarginEnd="164dp"
app:expandedTitleMarginStart="148dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:src="#drawable/haber_icerik_resim"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/haber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolbarColoredBackArrow"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
android:background="#color/mainBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here is working code, what you need.
<?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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="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"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<fragment
android:name="com.support.android.designlibdemo.CheeseListFragment"
class="com.support.android.designlibdemo.CheeseListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
And here is Activity
public class SampleActivity extends AppCompatActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sample);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
I hope this will solve your problem. Please let me know, if you need further help!!!
View inside CollapsingToolbarLayout no need to set app:layout_scrollFlags. No effect.
Base on my code, change app:layout_scrollFlags in CollapsingToolbarLayout to
"app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
and set minHeight for it.
As your toolbar is "pin", so enterAlwaysCollapsed will call it when you scroll down.
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/seffafCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:minHeight="?attr/actionBarSize"
app:expandedTitleMarginEnd="164dp"
app:expandedTitleMarginStart="148dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/haber_icerik_resim"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/haber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolbarColoredBackArrow"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
android:background="#color/mainBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I implemented this as shown below. I couldn't find any better solution.
public enum State {
EXPANDED,
COLLAPSED,
}
mCurrentState = State.EXPANDED;
Boolean toolbarIsTransparent = true;
// Calculate ActionBar height
TypedValue tv = new TypedValue();
int actionBarHeight = 0;
if (mContext.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
}
AppBarLayout appBarLayout = (AppBarLayout) rootView.findViewById(R.id.appbar_layout);
final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) rootView.findViewById(R.id.collapsible_toolbar);
if (appBarLayout != null) {
final int finalActionBarHeight = actionBarHeight;
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
mCurrentState = State.EXPANDED;
} else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
mCurrentState = State.COLLAPSED;
}
if ((collapsingToolbarLayout.getHeight() + i <= finalActionBarHeight) && mCurrentState.equals(State.COLLAPSED)) {
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary));
toolbarIsTransparent = false;
} else if (!toolbarIsTransparent) {
mCurrentState = State.EXPANDED;
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, android.R.color.transparent));
toolbarIsTransparent = true;
}
}
});
}
and xml code is `
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsible_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:src="#drawable/image"
app:layout_collapseMode="parallax" />
<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.design.widget.CollapsingToolbarLayout>
`
I tried almost all the answers to get the same functionality but got it working after a little tweaking.
It works similar to PlayStore where the Toolbar title appears only when it is collapsed and hidden otherwise.
Here is the 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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/banner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"
android:fitsSystemWindows="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"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--Add your views here-->
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:fadeScrollbars="true"
android:paddingTop="10dp"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Add this code to the onCreate method of your Activity
private Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
private AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset <= -appBarLayout.getTotalScrollRange() + toolbar.getHeight()) {
//Toolbar Collapsed
toolbar.setTitle("Your title here");
} else {
//Toolbar Expanded
toolbar.setTitle(" ");
}
}
});
Few things to note
Do not set any background to Toolbar else it will overlap your view
contentScrim attribute will take care of the Toolbar color on collapse
titleEnabled attribute is set to false to disable collapsing title effect
I hope this will be useful to people looking for the same behaviour.
Please let me know how it works out. Cheers!
Here is my implementation
Layout Code
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:layout_gravity="center_horizontal|top"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Light" />
</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:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- YOUR LAYOUT CODE --->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Java Code
inside onCreateView
if (toolbar != null) {
((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
// in your code
img.setImageResource(R.drawable.img1);
collapsingToolbarLayout.setTitle("<TITLE>");
Just add the bellow tag in CollapsingToolbarLayout
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
and remove the above same tag in ImageView, its not required there.
And it works exaclty like you see in google play
Hope this helps to someone :)
I don't know why my "Forms" activity are flashing when an EditText are focused and then a layout is scrolled.
It just happen in devices with Android 4.0 +
I am using a Table Layout and adding TableRow dynamically.
My TableRow is like that:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/borda"
android:layout_margin="10dip"
android:paddingLeft="10dip"
>
<LinearLayout
android:id="#+id/l1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="15dip"
android:layout_marginBottom="15dip"
>
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/nome"
android:textStyle="bold"
android:textColor="#526691"
android:textSize="15sp"
android:paddingLeft="10dip"
android:paddingRight="5dip"
/>
<EditText
android:id="#+id/valorLabel"
android:layout_width="140dip"
android:layout_height="wrap_content"
android:textSize="15sp"
android:background="#ffffffff"
android:singleLine="true"
android:inputType="textCapSentences"
android:textColor="#777777" />
</LinearLayout>
</TableRow>
Then,I add the TableRow into a TableLayout....
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:cacheColorHint="#00000000"
android:background="#dddddd">
<TextView
android:id="#+id/add_instancia_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/add_fornecedor_informacoes"
android:textColor="#4c566c"
android:textStyle="bold"
android:paddingLeft="20dip"
android:paddingTop="20dip"
android:textSize="20dip"/>
<TableLayout
android:layout_width="fill_parent"
android:id="#+id/table_novo_registro1"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#dddddd" >
...
Then,in the code, i inflate my TableRow
TableRow colunaNome= (TableRow) getLayoutInflater().inflate(R.layout.tablerownovocampo, null);
LinearLayout linearlNome= (LinearLayout)colunaNome.getChildAt(0);
TextView textvNome=(TextView)linearlNome.getChildAt(0);
textvNome.setText(R.string.nome);
etNome=(EditText)linearlNome.getChildAt(1);
And a lot of TableRow are added.
The Question is...
Why are my Form flashing( blinking) when I scroll it? And Why does it happen only in Android 4.0 +?
I already saw this post ....
http://android-developers.blogspot.com.br/2009/01/why-is-my-list-black-android.html
but I am not working with ListView.
I'v already tried
android:cacheColorHint="#00000000"
in the TableLayout but, it didn't work.
This will 100% work .....
ScrollView sv=(ScrollView) findViewById(R.id.scrollView1);
sv.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
edttext.clearFocus();
return false;
}
});