Here is my tab layout XML
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
android:background="#color/tab_background_primary"
app:tabGravity="fill"
app:tabIndicatorColor="#color/primary_white"
app:tabIndicatorHeight="3dp"
app:tabMinWidth="120dp"
app:tabMode="scrollable"
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingTop="1dp"
app:tabPaddingBottom="1dp"
/>
It is removing the horizontal padding in between tabs but not the tabPaddingTop and tabPaddingBottom.
How do I remove the top and bottom padding to make each tab match the tabLayout height?
Custom view for each tab
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tab"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="fill"
android:fontFamily="#string/font_fontFamily_medium"/>
I also tried using a Linear Layout with Imagview and Textview as custom view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="fill"
android:layout_height="match_parent">
<ImageView
android:id="#+id/tab_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#mipmap/ic_settings_light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/tab_title"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="center"
android:text="test"
android:fontFamily="#string/font_fontFamily_medium"/>
</LinearLayout>
And here is how I inflated the custom tab view (for custom view with textView)
TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("CASH IN");
tabTwo.setBackgroundColor(Color.parseColor("#EC5A0B"));
tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.mipmap.ic_action_cash_light, 0, 0, 0);
tabLayout.getTabAt(1).setCustomView(tabTwo);
As you can see, I am trying to give different background color to each tab. But the padding at top and bottom is still there.
I think Android design library's TabLayout have default padding like what you can see here
The other recommendation that I can recommend to you is using Google IO's SlidingTabLayout (Don't forget to copy SlidingTabStrip too!)
The usage is simple, just include in your layout :
<com.myapp.ui.widget.SlidingTabLayout
android:id="#+id/main_view_pager_tab"
android:layout_width="match_parent"
android:layout_height="#dimen/tabs_height"
android:background="#color/white" />
and then in your activity set the viewpager and listener (if you want)
mainViewPagerTab.setViewPager(mainViewPager);
mainViewPagerTab.setOnPageChangeListener(onPageChangeListener);
This was the only solution
https://stackoverflow.com/a/37942842/5689605
Try the code, after adding your tabs to your tablayout.
final ViewGroup test = (ViewGroup)(tabs.getChildAt(0));//tabs is your Tablayout
int tabLen = test.getChildCount();
for (int i = 0; i < tabLen; i++) {
View v = test.getChildAt(i);
v.setPadding(0, 0, 0, 0);
}
I got the best solution for this issue, check the below code and this will helpful.
My tablayout XML is like this:
<RelativeLayout
android:layout_height="30dp"
android:background="#333333"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="#style/MineCustomTabText"
style="#style/tab_bassr"
app:tabMode="scrollable"/>
</RelativeLayout>
the relative layout upon this will reduce the top and bottom margin
<style name="tab_bassr" parent="TextAppearance.Design.Tab">
<item name="android:layout_width">match_parent</item>
<item name="android:tabStripEnabled">false</item>
<item name="tabPaddingStart">5dp</item>
<item name="tabPaddingEnd">5dp</item>
</style>
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
</style>
The style file is for left and right padding and the text size.
Related
I want to have TabLayout as this image
I want to change text color and background color on selection and elevation effect in XML side if possible.
I tried radio button but no luck on styling.
This buttons will be dynamic, count and text will be coming from service.
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl_buttons"
android:layout_width="match_parent"
android:layout_height="80dp"
app:tabBackground="#drawable/tab_selector"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/colorPrimaryDark"
android:background="#android:color/transparent"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabPadding="#dimen/margin_biggest"
android:fillViewport="false"
app:tabPaddingEnd="#dimen/margin_biggest"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/btnMovies"
app:layout_constraintEnd_toEndOf="parent"
/>
tab_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/corner_radius_3dp" android:state_selected="true"/>
<item android:drawable="#drawable/corner_radius_3dp_dark"/>
custom_tab.xml
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/corner_radius_3dp"
android:layout_marginEnd="#dimen/margin_biggest"
android:elevation="4dp">
<TextView
android:id="#+id/tv_tab_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Movies"
android:layout_gravity="center"
android:background="#color/colorPrimary"
/>
I also tried to use custom tab and give a transparent background to it but still can not make it as I want.
val viewTab = LayoutInflater.from(applicationContext).inflate(R.layout.custom_tab,null)
viewTab.tv_tab_item.text = "TV Show"
val tab1 = binding.tlButtons.newTab()
tab1.customView = viewTab
val tab2 = binding.tlButtons.newTab().setText("Movies")
binding.tlButtons.addTab(tab1)
binding.tlButtons.addTab(tab2)
I have an activity that shows extra space at the bottom even though I have no bottom padding applied. Style code, xml code, java code and a screenshot are below and the relevant json data is here:
http://lara.rufflecol.es/strollcharlton/strollcharlton_data_1_2.json
It isn't a huge issue it is just annoying! Have already tried to using android:fillViewport set as true or false but it doesn't seem to make any difference. Is the problem related to my json?
UsefulLinks.xml
<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"
android:orientation="vertical"
tools:context="">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/dark_green"
android:minHeight="?attr/actionBarSize" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/useful_links"
style="#style/UsefulLinksTextStyling"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left" />
</LinearLayout>
</ScrollView>
</LinearLayout>
styles.xml
<style name="UsefulLinksTextStyling" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">#dimen/fifteen_size</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingLeft">15dp</item>
<item name="android:paddingRight">15dp</item>
</style>
UsefulLinks.java
TextView usefulLinksIntroTextView = (TextView) findViewById(R.id.useful_links);
usefulLinksIntroTextView.setText(Html.fromHtml(data.getUsefulLinks()));
usefulLinksIntroTextView.setMovementMethod(LinkMovementMethod.getInstance());
Screenshot
ensure the html that you are setting to the textview does not having blank space inside of it
change your base LinearLayout to wrap_content so that if the html takes up less than the screen height you don't have "extra padding"
You can also turn on "show layout bounds" for your application, that way you will understand which View is giving you the "extra padding" http://tysmith.me/post/27035355999/layoutbounds combine it with the Hierarchy Viewer http://developer.android.com/tools/performance/hierarchy-viewer/index.html to work out which View is at fault
I have a simple Layout in a Dialog with a AppCompat Toolbar and TabLayout inside. I want my tabs to have icons left of text.
Here is a layout of the dialog.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<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.v7.widget.Toolbar>
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
then I programatically add the tabs.
tabs.addTab(tabs.newTab()
.setTag(SettingsTabTag)
.setText("Settings")
.setIcon(R.drawable.scan_tab_settings_black), true);
tabs.addTab(tabs.newTab()
.setTag(MetadataTabTag)
.setText("Metadata")
.setIcon(R.drawable.scan_tab_metadata_black));
But the icon is always rendering above the text and a very small.
1.create a custom tab layout
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"/>
2.IN Your activity set the custom tab
TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);
setCompoundDrawablesWithIntrinsicBounds does the work.
Here are code commonly used to get icon to the left of tab title.
In my case, I have to add a linear layout to center tablayout title. I have also added some space characters to get margin between the icon and the text.
custom_tab.xml:
<?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"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="#+id/tabContent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAlignment="center"
android:textColor="#android:color/white"
android:gravity="center"/>
</LinearLayout>
Initialization code:
LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText(" "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);
I've been playing around with CardViews inside a RecyclerView, but can't seem to get my cards centered.
My cardview.xml:
<android.support.v7.widget.CardView
android:id="#+id/cardview"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:layout_width="300dp"
android:layout_height="100dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/text"
android:textAlignment="center"
android:layout_gravity="center"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
My activity_main.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"/>
<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Image of what my app looks like when I run it:
Okok, I have the same question and I think I have "solved" it. It's really just another hack. The android team at Google really should fix this recycler view and add support for swipe to dismiss.
In onCreateView:
recyclerView.addItemDecoration(new ItemDecoration() {
#Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
int totalWidth = parent.getWidth();
int maxCardWidth = getResources().getDimensionPixelOffset(R.dimen.card_max_width);
int sidePadding = (totalWidth - maxCardWidth) / 2;
sidePadding = Math.max(0, sidePadding);
outRect.set(sidePadding, 0, sidePadding, padding);
}
});
You need to set LinearLayout's android:layout_width as match_parent in order for android:gravity="center" to take effect.
Had the same problem. My RecyclerView is inside a SwipeRefreshLayout, so I found out I could center it with the SwipeRefreshLayout.
<style name="swipe_refresh_cards_layout">
<item name="android:layout_width">#dimen/swipe_refresh_cards_width</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_gravity">center_horizontal</item>
</style>
I'm using a dimens.xml file for various screen sizes here.
Not the best solution IMO, but it works. I also found it to work (not using the solution above) if I put a LinearLayout as the parent to the SwipeRefreshLayout with
<style name="inner_layout">
<item name="android:layout_width">#dimen/swipe_refresh_cards_width</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:orientation">vertical</item>
</style>
Try wrapping up your Cardview inside a LinearLayout with width set to match_parent and android:gravity = "center".
Just set your parent's(in your case LinearLayout) width to match_parent.
With the new Lollipop API, we have to use a Toolbar if we want to personalize the action bar aspect.
Adding a ProgressBar to the Toolbar is as simple as adding it to the Toolbar ViewGroup, as Chris Banes said.
<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="wrap_content"
android:background="#color/material_green_500"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Color is Brown 500 -->
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in"/>
</android.support.v7.widget.Toolbar>
But how can we place it at the right of the Toolbar, where it belongs?
The layout_gravity attribute seems to not be defined for the Toolbar. Setting it from the xml has no effect.
I tried to change the width of the ProgressBar, with no success.
What do I do?
EDIT: There is a programmatical solution to this problem, see #mdelolmo reply for that.
You can try this. It worked for me. Key here is to define layout_gravity in the xml: android:layout_gravity="right"
<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="wrap_content"
android:background="#color/material_green_500"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Color is Brown 500 -->
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
I also hit the same wall, but programmatically it works:
Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
Gravity.TOP | Gravity.RIGHT);
In my snippet, I align it to the top, to match the alignment of the menu.
A workaround to create the layout completely in xml would be replacing the toolbar content with your own relative layout. To do that, you need to fake the activity title (and also the navigation icon if you are using one), which is literally nesting the following in your Toolbar block.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:paddingRight="2dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textSize="20sp"
android:fontFamily="sans-serif-medium" />
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in" />
</RelativeLayout>
Note that 20sp sans-serif-medium is the font used in lollipop toolbar, you might need to adjust the text view parameters to make it look natural in earlier versions.