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"
Related
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));
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.
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. :)
My question is how I can set the new android material design TabLayout to be in the bottom of the screen, kind of like Instagram's bottom toolbar.
If you have never seen Instagram's UI here is a screenshot of it :
. If there is a better way of approaching this, please feel free to post it here (with a code example if possible), I will greatly appreciate it.
Here is my code: activity_main.xml
<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"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</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" />
I have tried many methods and workarounds suggested by the Stack Overflow community, but none seems to work with this new implementation of tabs in android. I know this UI design does not follow android design guidelines, so please don't comment on it. This UI design is vital to my application's UX and I would appreciate getting an answer for it. Thank you!
I believe I have the best simple fix. Use a LinearLayout and set the height of the viewpager to be 0dp with a layout_weight="1". Make sure the LinearLayout has an orientation of vertical and that the viewpager comes before the TabLayout. Here is what mines looks like:
<LinearLayout 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"
tools:context=".MainActivity"
android:orientation="vertical">
<include layout="#layout/toolbar" android:id="#+id/main_toolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white"/>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
/>
</LinearLayout>
And as a bonus, you should create your toolbar only once as toolbar.xml. So that way all you have to do is used the include tag. Makes your layout's more clean. Enjoy!
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Update 11.2.2016: For those of you who don't know how to inflate the toolbar, here is how. Make sure that your Activity extends AppCompatActivity so you can call setSupportActionBar() and getSupportActionBar().
Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I suggest to use androidx library as android support libraries may get deprecated soon.
We can actually add a tab layout to a viewpager. Below is the code snippet that I used in my project
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00a294"
android:layout_gravity="bottom" />
</androidx.viewpager.widget.ViewPager>
layout_gravity="bottom" is the syntax that puts the tab layout to the bottom
I had a same problem on Android Studio 2.2. This is what i did,
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<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/ThemeOverlay.AppCompat.Light"
app:subtitleTextColor="#color/color_white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="#string/call_log"
app:titleTextColor="#color/color_white"
/>
<RelativeLayout
android:id="#+id/content_frame"
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"
android:layout_above="#+id/tabLayout" />
<android.support.design.widget.TabLayout
android:layout_alignParentBottom="true"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"/>
</RelativeLayout>
</LinearLayout>
Better segregate both AppBarLayout and tabLayout like my code below. This way you can modify the tab bar and view pager properties independently.
<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: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"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
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="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_above="#+id/tabs"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
android:layout_alignParentBottom="true"
Add this setting in
android.support.design.widget.TabLayout
Top of the page LinearLayout settings and set android:gravity="bottom". Thats it. Here is the code:
<?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:minWidth="25px"
android:minHeight="25px"
android:gravity="bottom"> //Thats it.
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:id="#+id/tabLayout1">
<android.support.design.widget.TabItem
android:icon="#drawable/home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem1" />
<android.support.design.widget.TabItem
android:icon="#drawable/mypage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem2" />
<android.support.design.widget.TabItem
android:icon="#drawable/friends"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem3" />
<android.support.design.widget.TabItem
android:icon="#drawable/messages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem4" />
<android.support.design.widget.TabItem
android:icon="#drawable/settings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem5" />
</android.support.design.widget.TabLayout>
</LinearLayout>
Replace Your TabLayout code with this
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:elevation="2dp" />
Trying to use the new support design library. In my layout I want the ToolBar to stay at the top of the screen, but have the TabLayout go off the screen when the user scrolls down. But it looks like the ViewPager goes underneath the AppBarLayout. I used this blog post for reference
https://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32
This is the layout, within the ViewPager holds Fragments that consist of recycler views
<?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"
android:background="#color/material_grey50"
android:clickable="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabLayout" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_list"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar_list"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:elevation="3dp"
android:src="#drawable/ic_videocam_white_36dp"
app:backgroundTint="#color/accent"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
Don't forget to set this in the viewpager:
app:layout_behavior="#string/appbar_scrolling_view_behavior"