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?
Related
I'm using the layout below, The CoordinatorLayout holds inside it AppBarLayout (With Toolbar) and the fragment layout.
I'm using app:layout_scrollFlags in my Toolbar and app:layout_behavior="#string/appbar_scrolling_view_behavior" in the fragment, so the Toolbar appear and disappear (hide/show) with scrolling my fragment content.
My problem: when I scroll in fragment A and therefore the toolbar disappear, then I use the BottomNavigationView to go to fragment B the toolbar remains hidden.
I want the toolbar to appear every time I open new fragment.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/containerMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/nav_host_fragment"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="#dimen/nav_bar"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:itemIconTint="#drawable/bottom_color_nav"
app:itemTextColor="#drawable/bottom_color_nav"
app:layout_constraintBottom_toBottomOf="#id/main_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
I would assume that the xml you posted is your layout for your MainActivity(), if so create a reference to your Toolbar in your MainActivty and create a function in your MainActivty() to access/change your Toolbar collapse states.
In your Fragments, create a reference to your MainActivity to then access the function to change the state of your Toolbar.
I cannot test as from work, but I have used same code flow to do the same stuff when using only MainActivity with Inner Fragments as the navigation flow of the app.
Below not exact working or tested code, but same idea/flow
//my fragment function to access MainActivity().changeToolbarState(boolean)
changeToolbar(state: boolean) {
if(state){
//true
//show toolbar
MainActivty().changeToolbarState(true)
}else{
//false
//collapse/hidetoolbar
MainActivty().changeToolbarState(false)
}
}
The best alternative could be enabling setExpanded property of app bar layout to true with the following code inside the fragment. Here, MainActivity.appBarLayout is the static variable defined in Main Activity referenced to App Bar Layout.
#Override
public void onPause() {
super.onPause();
MainActivity.appBarLayout.setExpanded(true);
}
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 have been having trouble with my action bars, I got it set up on my xml front end like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:label="#string/dadosCadastrais"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme" />
And on the Java activity:
Toolbar toolbar = findViewById(R.id.toolbar4);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
I have already tried changing the theme the app uses, the theme the layout uses and even the activities theme to allow/forbid a toolbar to show up. Even though my java class extends AppCompatActivity it does not show!
PS: Got it working now! The problem was the setup on java code itself, there was an hidden method which was overwritting my setup, thx for the help!
Make sure your activity inflates the correct layout containing your ToolBar.
protected void setContentView() {
setContentView(R.layout.your_activity_layout);
}
Your activity layout should contain your ToolBar. Here is a code example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:keepScreenOn="true"
android:orientation="vertical">
<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.ActionBar" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</LinearLayout>
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");