I'm looking for a way to put a view in my ViewPager below the TabBar.
I don't want it to be inside each fragment, because obiouvsly it would scroll every time I change the current fragment; I need that view to be fixed there without animations.
This is what I have now putting the View inside my TabLayout [code + img]
<android.support.v4.view.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextColor="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="#drawable/background_accent_fading"
android:paddingBottom="5dp"
android:paddingEnd="5dp"
android:paddingTop="5dp"
android:text="RIPASSO"
android:textAlignment="textEnd"
android:textColor="#color/white"
android:textStyle="bold" />
</android.support.design.widget.TabLayout>
</android.support.v4.view.ViewPager>
This, instead, is what I'm looking for
As you can see, RIPASSO is below my tabs, but it is fixed there.
Is there a way of obtaining it? I didn' find anything
Your TabLayout mustn't be a child of your ViewPager.
<LinearLayout
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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
style="#style/AppTabLayout"
app:tabTextAppearance="#style/AppTabTextAppearance"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabGravity="fill"/>
<!--here put your view, the one you want to appear in all pages.-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/popup_holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"/>
</FrameLayout>
</LinearLayout>
you can use the default android tabs, follow this :
Right click on app > New > Activity > Tabbed Activity.
and it will create everything for you.
if you want to change the color of the background color - underline color or text color.
you can do it in the XML or user
TabLayout tabLayout = binding.tabs;
tabLayout.setupWithViewPager(mViewPager);
tabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.white));
Related
I am using TabLayout, which position in the bottom of the screen. The problem is
when the keyboard open the TabLayout also comes above of the keyboard.
I want to hide behind the keyboard
In Manifest I set android:windowSoftInputMode="adjustResize", if I change to adjustSpan, even the tile bar goes up when keyboard open.
Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MissingPrefix"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/tb_toolbar_main_activity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/tb_heading"
fontPath="#string/font_bebas_neue_bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp"
android:text="#string/app_name_caps"
android:textAlignment="center"
android:textColor="#color/heading_color"
android:textSize="#dimen/toolbar_title_text" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp_activity_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/white"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#drawable/tab_back_selected"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabSelectedTextColor="#android:color/white"
app:tabTextAppearance="#style/MyTabLayoutTextAppearance"
app:tabTextColor="#color/home_sub_text"
/>
I also face same issue and i fixed it by adding below code. Please try this
In build.gradle file
implementation 'net.yslibrary.keyboardvisibilityevent:keyboardvisibilityevent:2.2.1'
In Manifest.xml
android:windowSoftInputMode="adjustResize"
In Activity class
TabLayout tabs = findViewById(R.id.tabs);
KeyboardVisibilityEvent.setEventListener(
MainActivity.this,
new KeyboardVisibilityEventListener() {
#Override
public void onVisibilityChanged(boolean isOpen) {
if(isOpen){
tabs.setVisibility(View.GONE);
} else {
tabs.setVisibility(View.VISIBLE);
}
}
});
In you manifest add android:windowSoftInputMode="adjustPan|adjustNothing"
Try to take the relative layout as parent layout and give your tablyout attribute as alignparentbottom= true.
Put the other layout above this tablayout.
Hope this will help.
android:windowSoftInputMode="adjustPan"
I know this seems like a repeated questions but I don't understand why I can't position Tablayout on top of my ViewPager.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp"
app:tabPadding="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop"/>
</RelativeLayout>
Tablayout works just fine if I replace the RelativeLayout with Linearlayout except that's not what I want.
Try below may help you.
Error here : android:layout_alignParentBottom="true"
<?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">
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#9ad195"
android:minHeight="?attr/actionBarSize" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tl_ads"
android:background="#cccccc"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop" />
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop"/>
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp"
app:tabPadding="2dp"/>
</RelativeLayout>
In a RelativeLayout, the widgets are added one on top of the other in the order in which they were declared. You had declared your tab layouts first and then declared the ViewPager. As a result of this, your tabs were being created but were being hidden by the ViewPager which occupied the entire RelativeLayout.
()
How do i stop this from happening ?,i have a view pager on top of tab layout,and basically im using a fragment (Please check the image link attached above)
<RelativeLayout
android:id="#+id/root1"
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.support.v4.view.ViewPager
android:id="#+id/simpleViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="6dp"
app:tabTextColor="#android:color/darker_gray"
app:tabBackground="#android:color/white"
app:tabSelectedTextColor="#ff00ff"
app:tabIndicatorColor="#ff00ff"
android:minHeight="?attr/actionBarSize"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
Should i use a NestedScrollView instead of a relative layout,would that help ??
Any help would be deeply appreciated
Add android:layout_above="#+id/tabLayout" on the ViewPager and remove + from id declaration of tabLayout: android:id="#id/tabLayout"
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_below="#+id/simpleViewPager"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:elevation="6dp"
app:tabTextColor="#android:color/darker_gray"
app:tabBackground="#android:color/white"
app:tabSelectedTextColor="#ff00ff"
app:tabIndicatorColor="#ff00ff"
android:minHeight="?attr/actionBarSize"
android:layout_alignParentBottom="true"
/>
I have been developing a project that requires the usage of swipe-able tab along with a notification text for each tab, the design goes like this. How do I achieve this ?
My thoughts :
I had an idea about adding a custom layout for the tab layout and adding two textviews below each other but it wont come over the tab line !!
Any ideas on how to achieve it ? A small hint would mean so much, thanks in advance.
CODE :
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab().setText("In Circle"));
tabLayout.addTab(tabLayout.newTab().setText("You"));
tabLayout.addTab(tabLayout.newTab().setText("Request"));
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.support.design.widget.AppBarLayout
android:id="#+id/top_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/bottom_item"
layout="#layout/swipe_tab_header"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_above="#+id/tabs"
android:layout_alignParentTop="true" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/viewpager"
android:layout_marginBottom="5dp"
app:tabGravity="fill"
app:tabMaxWidth="0dp" />
<RelativeLayout
android:id="#+id/horizontal_slide_relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_item"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
android:id="#+id/bottom_item"
layout="#layout/tab_like_view_new"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I guess the easiest way would be to have a LinearLayout on top of the TabLayout.
Something like following pseudo-xml, and you use the "margin_top" to properly adjust the numbers:
<FrameLayout>
<android.support.design.widget.TabLayout height=48dp/>
<LinearLayout margin_top=24dp>
<TextView
layout_weight = 1
background="circle"/> // add here your floating numbers
<TextView
layout_weight = 1
background="circle"/> // add here your floating numbers
<TextView
layout_weight = 1
background="circle"/> // add here your floating numbers
</LinearLayout>
</FrameLayout>
I am trying to make this login page.
Here is my code -
<?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="match_parent">
<com.app.findmystay.View.MarqueeToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="112dp"
android:background="#color/color_primary"
android:elevation="4dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ToolBarStyle" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="64dp"
android:elevation="4dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/color_accent"
app:tabIndicatorHeight="5dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#android:color/white"
app:tabTextAppearance="#style/TabText"
app:tabTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
What I am getting is this -
How to align toolbar text with the back button?
How will the layout collapse on scrolling?
First try to enable show layout bounds in developer options in settings.
Check the layout of the title (Log in or sign up in your case).
If it's the layout problem, then set title programmatically by using
Toolbar toolbar = (Toolbar) findViewById(R.id.id_of_toolbar_from_layout);
toolbar.setTitle("Login or SignUp");
And then add toolbar to layout like
setSupportActionBar(toolbar);
Better try that first. and let me know if it does not works. :)