I have a tablayout with 6 tabs. Tabs are fixed in the display but their text does not show completely. I do the solutions in here so that I can summarize them in these lines:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
But it did not solve my problem. I also use custom TabLayout in here and still I have the same problem.
Here are my codes:
I use a custom tablayout with this custom_tab.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:layout_centerHorizontal="true"
android:id="#+id/tabIcon"/>
<CustomViews.CustomTextView
android:id="#+id/basket_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:background="#drawable/notification_circle"
android:padding="2dp"
android:textColor="#ffffff"
android:textSize="8sp" />
<CustomViews.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/tab_inactive"
android:textSize="8sp"
android:layout_centerHorizontal="true"
android:layout_below="#id/tabIcon"
android:layout_marginBottom="2dp"
android:maxLines="1"
android:id="#+id/tabTitle"/>
</RelativeLayout>
The first ImageView shows the tab icon. The next ImageView is used for the badge and the CustomTextView is used for showing the tab title.
Here is my layout file include tablayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabMaxWidth="0dp"
android:layoutDirection="rtl"
android:id="#+id/avatar_tabLayout"
app:tabIndicatorColor="#null"
/>
</LinearLayout>
Is there a way to set up tab width with Maximum existence tab size? Or any other solutions?
Try to get rid off
app:tabGravity="fill"
app:tabMode="fixed"
in your <android.support.design.widget.TabLayout
Replace it with app:tabMode="scrollable"
Related
I have a problem with heights of LinearLayouts of a TabLayout. When I change between tabs and navigate to other pages from bottom navigation bar and come back to the page with tabs, height of the passive tab (the tab was not open when we navigate between pages) is set as the active tab’s height. How can I fix this? Example screenshots are below:
Expected version of tab 1
Expected version of tab 2
What happens when we navigate to other pages from tab 2 and come back and switch to tab 1
Main screen:
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".homepage.UsageFragment"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ic_header_2"
android:padding="16dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:minWidth="0dp"
android:padding="0dp"
app:icon="#drawable/ic_icon_menu"
app:iconPadding="0dp"
app:rippleColor="#00FFFFFF" />
<com.google.android.material.button.MaterialButton
android:id="#+id/notifications_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="#android:color/transparent"
android:minWidth="0dp"
android:padding="0dp"
app:icon="#drawable/ic_baseline_notifications_24"
app:iconPadding="0dp"
app:iconSize="30dp"
app:rippleColor="#00FFFFFF"
tools:ignore="RelativeOverlap" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/imece_black"
android:background="#drawable/tab_background"
app:tabBackground="#drawable/tab_selector"
app:tabIndicator="#null"
app:tabTextAppearance="#style/tabFontStyle"
android:fillViewport="true"
app:tabGravity="fill"
>
</com.google.android.material.tabs.TabLayout>
<View
android:layout_width="0dp"
android:layout_height="12dp"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</androidx.viewpager2.widget.ViewPager2>
</LinearLayout>
</LinearLayout>
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.
The toolbar layout I set android:layout_gravity="center_vertical"
but it not work
Code:
<?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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/toolbar_bg"
android:fitsSystemWindows="true"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#android:drawable/sym_def_app_icon" />
main layout:
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/head_tool_bar"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/head_tool_bar" />
</RelativeLayout>
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment
android:id="#+id/navigation_drawer"
android:name="com.voogolf.helper.home.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/drawer_new_home" />
</android.support.v4.widget.DrawerLayout>
How can I set drawer icon and logo align top? Why left drawer icon have padding
like this?
you should try setting layout gravity like this.
android:layout_gravity="left|center_vertical"
and make sure padding and margin is 0dp
Android support v7 toolbar is just like other views. You can customize or add whatever the view you are required inside the toolbar.
Your imageView should be inside the toolbar and make imageView aligned whatever you want by gravity or layout_gravity attribute.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/home_button"
android:background="#color/colorToolbarWelcomeBg"
android:scaleType="fitCenter"
android:src="#drawable/back_arrow"
android:layout_gravity="left|centre"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#color/colorToolbarWelcomeBg"
android:text="Settings"
android:textColor="#color/colorWhite"
android:textStyle="bold"
android:id="#+id/welcomeToManager"
android:gravity="center"/>
</LinearLayout>
and place this layout inside <toolbar> Above layout </toolbr> This code showing just an idea not actual code :)
add this property attribute to imageView android:layout_gravity="center_vertical"
This is my toolbar with a back button and text in center.You can refer this code.
<?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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/back_arrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="left|center"
android:visibility="visible"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/back_arrow" />
<com.indosat.rider.views.CustomTextView
android:id="#+id/toolbar_custom_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Register Page"
style="#style/roboto_medium"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="19sp" />
</FrameLayout>
</android.support.v7.widget.Toolbar>
Let me know if you need any help in arranging your final setup.
if you are trying to customize your toolbar then do something like this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
...>
<RelativeLayout>
<ImageView
... />
//here you can add more view items
</RelativeLayout>
</android.support.v7.widget.Toolbar>
if you have used toolbar and setting up the action bar using ActionBarDrawerToggle then add this code to your ActionBarDrawerToggle object.
toggle.setDrawerIndicatorEnabled(false); // this will disable your default haburger icon
toggle.setHomeAsUpIndicator(R.drawable.ic_custom_drawer_icon); // this will replace the toggle home indicator
I have a view with some fragments and I created a snackbar with a slide animation on it. The animation works fine, but before it comes up a white window appears where the snackbar is going to appear.
It is happening because I am using setTranslationY on the view. I tried to put the background transparent but it did not work.
How can I solve it?
<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="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:id="#+id/pager_activity_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/transparent">
<FrameLayout
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:layout_weight="1"
/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/black"
android:id="#+id/snackbar_container"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#android:color/white"
android:textSize="13sp"
android:textStyle="normal"
android:id="#+id/snackbar_text"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center" />
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyCustomTabLayout"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/bpBlue"
app:tabTextColor="#929292"
/>
</LinearLayout>
</RelativeLayout>
Did you build your own "snackbar"? Try to use this:
http://www.androidhive.info/2015/09/android-material-design-snackbar-example/
But your problem:
I think the problem is, that your add your "snackbar" in your linear layout! You set the visibility to "gone" and your bar will not use any space. On your animation you set the visibility to "visible". The linear layout will give you the space, which you need for you bar. You need to add the bar above your layout(also the tablayout)
I'm using a viewpager to show fragments on my app, but I'm having some issues with the XML, I would like to fix my code because when I run the fragments, the viewpager doesn't show the the last part of the design, I'm using a listview on each fragment, and the last row is being cut. What do I need to change on my code to fix that?
Code:
<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:background="#c42542">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="8dp"
android:background="#d12240"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:text="Live rooms"
android:textColor="#ffffff"
android:textSize="18dp" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="23dp"
android:src="#mipmap/ic_share" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:src="#mipmap/ic_search" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<!-- Scrollable View -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Thank you.
Hey it seems this can occur when using ListView within the CoordinatorLayout, but you can fix it by simply changing it to a RecycleView. There's also a solution for Android 5.0+. Check out Sha's answer here for more info.
Assign bottom margin to Listview.
<ListView
android:paddingBottom= "20dp"/>