I'd like to make the status bar transparent by adding <item name="android:statusBarColor">#android:color/transparent</item> to v21/styles.xml on style name="AppTheme.NoActionBar" but I keep getting a shadow above the app bar, is it possible to remove it?
EDIT:
Ok I think the solution is to move the app bar occupying the status bar space and extending the app bar of an additional dp to match it size so my question is, is it possible to move or extend the app bar height upwards?
activity_search.xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/MyMaterialTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
app:popupTheme="#style/MyMaterialTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_search"/>
I believe this question is pointing to same problem
Android appbarlayout elevation appears in status bar
Possible solutions:
Your root layout should have android:fitsSystemWindows="true" at all times, otherwise your UI will not draw behind status bar.
Now wrap the AppBarLayout inside another CoordinatorLayout which has
android:fitsSystemWindows="false".
This will prevent the shadow from overflowing into statusbar.
Add elevation 0dp to AppBarLayout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
Call below method in the onCreate of your activity with the desired status bar color.
public void changeStatusBarColor(String hexColor)
{
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.parseColor("#AD2525"));
}
}
XML
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.bharath.myapplication.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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#AD2525"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!--
Other views
-->
</RelativeLayout></android.support.design.widget.CoordinatorLayout>
Result
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</com.google.android.material.appbar.AppBarLayout>
You could also add padding on app bar based on status bar height:
ViewCompat.setOnApplyWindowInsetsListener(binding.root) { _, insets ->
val statusBarInsets = insets.getInsets(WindowInsetsCompat.Type.statusBars())
val bottomBarInsets = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
binding.appBarLayout.setPadding(0, statusBarInsets.top, 0, 0)
binding.root.setPadding(0, 0, 0, bottomBarInsets.bottom)
insets
}
You can put this in your onCreateView() or onViewCreated() methods.
Remember to remove android:fitsSystemWindows="true" from your layout, because you're manually setting the padding to the views, and the insets must remains like it's a full screen fragment.
put this line in the oncreate() method of activity file of which activity you want to remove the elevation of the action bar
getSupportActionBar().setElevation(0);
Related
I have a RecyclerView inside two tabs.
The problem is: When I scroll to the top of the list and then trying to swipe horizontally to the next tab, no horizontal movement happens for a while.
"That happens only when scrolling to the top or the end of the list".
Hint: I'm using CollapsingToolbarLayout.
I tried to make setNestedScrollingEnabled() to be (false).
That fixes the problem of horizontal swiping but will disable collapsing.
enter image description here
XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
......>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/my_coordinator_layout"
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:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#drawable/dictionary" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed">
<! Two tabs here >
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
...../>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
....../>
</android.support.v4.widget.DrawerLayout>
Java snippet:
mRecyclerView = mRootView.findViewById(R.id.list);
mRecyclerView.setHasFixedSize(true);
// For linear displaying.
mLayoutManager = new LinearLayoutManager(mRootView.getContext());
mRecyclerView.setNestedScrollingEnabled(true);
mRecyclerView.setLayoutManager(mLayoutManager);
WordsAdapter mAdapter = new WordsAdapter(mWords, this);
mRecyclerView.setAdapter(mAdapter);
You should check out detecting gestures. Your problem is caused by the RecyclerView intercepting the touch events with slight vertical movement. If you were to move your finger perfectly horizontal, you could switch between tabs, but a normal swiping motion has some vertical component. To solve your problem, you could add an onTouchListener to your RecyclerView where you only intercept touch events which are mostly vertical. That way the horizontal swipes will be delivered to the TabView below.
This problem solved by just adding: viewPager.requestDisallowInterceptTouchEvent(false);
Java snippet:
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
viewPager.requestDisallowInterceptTouchEvent(false);
return super.dispatchTouchEvent(ev);
}
I want to create an Android App. For my main screen I use the Tabbed Activity. It looks like I want. But when I surround my TextView with a ScrollView it only scrolls the text, but it should look like this:
So it should look before I scroll:
And like this after I scrolled:
Here is the Tabbed Activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
And here the text Fragment:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.obware.story.Activitys.MainActivity$PlaceholderFragment">
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Does anyone know how I can do that?
Since this is a Tablayout, I am assuming that you are using Fragments and a ViewPager. (this still applies even without a viewpager)
In this case, You will have to send an answer to you activity which is base to hide the toolbar. Declare an interface inside you base activity which has the Tab layout.
say :
interface HideToolBarInterface{
public void hideTheToolbar(boolean shouldbehidden);
}
Now implement this interface inside your activity and overrride the abstract method declared.
eg:
public void hideTheToolbar(boolean shouldbehidden){
if(shouldbehidden){
getSupportActionBar().hide(); // if you have set your own toolbar, hide it similarly
}else{
getSupportActionBar().show();
}
}
Now inside your fragments, set a onScrollListener to your ListView or RecyclerView whatever you are using to show the list.
Now when the list is scrolled, you can use the Listeners onScrollChanged, apply you logic to call the interface method to hide the toolbar like:
//on some condition(say SCROLL_STATE_FLING) do the following:
((HideToolbarInterface)getActivity()).hideTheToolbar(true);
//on some other conditon(say SCROLL_STATE_IDLE unhide it:
((HideToolbarInterface)getActivity()).hideTheToolbar(false);
You can check for other options here:
android lollipop toolbar: how to hide/show the toolbar while scrolling?
This is a basic model of my XML:
<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:id="#+id/background_colour"
>
<android.support.design.widget.AppBarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="#+id/profile_screen_appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
android:minHeight="150dp"
>
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginTop="32dp"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="4dp"
app:expandedTitleMarginStart="32dp"
android:minHeight="100dp"
>
<android.support.v7.widget.Toolbar
android:minHeight="100dp"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/fab_material_red_500"
>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue"
>
<!-- the ViewPager is programatically set to be have the height and width equivalent to that of the screen width of the device --> <com.example.heavymagikhq.MyViewPager
android:padding="0dp"
android:fitsSystemWindows="true"
android:id="#+id/viewPager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_scrollFlags="scroll|enterAlways"/>
/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="15dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profile_info_recycler"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
The problem
At the moment some of the content in the RecyclerView is slightly off screen and I am able to reveal it by scrolling. The problem is that although only a slight amount of content is off screen the entire screen scrolls up until only the RecyclerView's content is showing at the top of the screen below the CollapsingToolbarLayout at a collapsed height equivalent to that of the Toolbar . I've tried adding android:layout_gravity="fill_vertical" to the RecyclerView but this didn't solve the issue
A Note
When the CollapsingToolbarLayout's height is set to 625dp the screen doesn't scroll at all, but, when I set it to 626dp the content of the screen scrolls until the CollapsingToolbarLayout is collapsed to the height of a Toolbar, so this extra 1dp of height makes the screen go from not scrolling to scrolling much more than 1dp. The 625dp figure is presumably related to the device's (Nexus 7 2013) screen size. Also, regardless of what minHeight I set the CollapsingToolbarLayout to, the CollapsingToolbarLayout always collapses at the height equaivalent to a Toolbar's.
My Question in a nutshell
How can I make it so the screen only scrolls to reveal the content that is not on screen/beyond the content of the RecyclerView?
Thanks in advance.
I found solution，you can set "minHeight" for AppBarLayout childView, and set app:layout_scrollFlags="scroll|exitUntilCollapsed"
I'm using a layout with an AppBarLayout containing a Toolbar and a TabLayout, a ViewPager and a FloatingActionMenu.
My problem is that using an AppBarLayout causes other Views inside the CoordinatorLayout to not match the entire screen when using layout_height=match_parent, instead this other Views match what's left of the parent excluding the AppBarLayout. This behavior is perfect for my ViewPager, because otherwise its content would be covered by the AppBarLayout, but I need my FloatingActionMenu to match the entire screen, so that when my menu opens I can dim the screen.
So my question is: How do I make it so my FloatingActionMenu takes over the entire screen?
My XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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.example.Home">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppBaseTheme.ToolbarPopup"
app:theme="#style/AppBaseTheme.Toolbar">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabTextAppearance="#style/AppBaseTheme.TabText"
app:theme="#style/AppBaseTheme.Toolbar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/home_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.example.FloatingActionMenu
android:id="#+id/fam"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|end"
android:padding="#dimen/fab_margin"
app:menu_backgroundColor="#BB8b8b8b">
<com.example.FloatingActionButton
android:id="#+id/fab"
style="#style/MenuButtonsStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</com.example.FloatingActionMenu>
Using a RelativeLayout as my root view or using a LinearLayout to hold my Toolbar and TabLayout would solve my problem, but I need to use CoordinatorLayout and AppBarLayout to add scrolling functionality.
EDIT:
After testing in different devices I found out that this problem only happens on newer versions, as you can see in the next photos.
On API 19:
On API 23:
The problem was that I wasn't specifying an android:elevation for my FloatingActionMenu, so the AppBarLayout was appearing on top of the Menu
In the Image below
Quetion 1:
I want to change the color of Blue color underbar and the text color of Text (eg. FlashCards) in Sliding Tab Layout.
How can I change that?
Also I want to change the space coming after Name : 'MyAccount'
Question 2:
When I slide the Tab,the heading at the top of toolbar(Flashcards) should change.
Any Idea how to do that.
My XML File for layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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
android:id="#+id/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
>
<TextView
android:id="#+id/text_home_screeen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/windowBackground"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginLeft="10dp"
android:text="#string/back_title"/>
</android.support.v7.widget.Toolbar>
<com.example.ojasjuneja.chem.SlidingTabLayout
android:id="#+id/sliding_tab"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.example.ojasjuneja.chem.SlidingTabLayout>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</android.support.v4.view.ViewPager>
</LinearLayout>
you need to add PagerSlidingTabStrip in your XML
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
and in java file add below code..
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) rootView.findViewById(R.id.tabs);
tabs.setViewPager(view_pager);
tabs.setTextColor(Color.parseColor("#ffffff"));
tabs.setIndicatorColor(getActivity().getResources().getColor(R.color.sky_blue_color));
Question 2 When i slide the Tab,the heading at the top of toolbar(Flashcards) should change. Any Idea how to do that. My XML File for layout looks like this:
You need to add one line in each fragment below OnCreate() for example
My List Fragment
((ActionBarActivity) getActivity()).getSupportActionBar().setTitle("MY LISTS");
My Account Fragment
((ActionBarActivity) getActivity()).getSupportActionBar().setTitle("My Account");