We can know action bar / toolbar height from XML, via ?attr/actionBarSize
Is there a similar thingy for TabLayout height? Something like ?attr/tabLayoutSize
As far as I know, NO.
But the google design specs says that it the height of tabs should be 48dp or 72dp in case of icon + text in a tab
https://www.google.com/design/spec/components/tabs.html#tabs-specs
A bit code would be helpful.
You can set the hight of the tablayout in xml like this:
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:scrollbars="horizontal"
android:layout_width="match_parent"
android:layout_height="#dimen/tablayout_height"
app:layout_scrollFlags="scroll|enterAlways"
app:tabIndicatorHeight="10dp"
app:tabIndicatorColor="#color/blue"
style="#style/TabStyle"/>
And if you for example want to get that height in your code you could get it by doing this:
int height = (int) mContext.getResources().getDimension(R.dimen.tablayout_height);
Related
I have removed the default action bar from my application and added a custom one from scratch by using the ToolBar. I have placed an imageView inside my action bar but i'm facing two issues:
1) The imageView is not responsive so it doesn't work well with all devices. What can i do to achieve this responsiveness?
2) I also have an OptionsMenu in my app and next to the Toggle, is my app's title. Since i want my image to be centered inside the ActionBar i don't want the title there. How can i remove it from just the ActionBar?
Thank you in advance for your help and time!
Issue 1:
If your image is not responsive. You have to put different size of images to support highend devices. Put the desired image to folder drawable/drawable-hdpi/drawable-mdpi....
/drawable-ldpi For low density screens.
/drawable-mdpi For medium density screens.
/drawable-hdpi For high resolution screens.
/drawable-xhdpi For extra high resolution screens.
Issue 2:
To remove the toolbar title
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setTitle("");
Centering the imageview. Edit you customview to centering.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_icon"
android:layout_gravity="center"/>
</LinearLayout>
1) don't use fixed values for ImageView provide weight to imageview in toolbar custom layout.
2) layout_gravity="center" may help you
I am working on an android library called MaterialViewPager
I have five tabs, the text of some of them are little longer. I purposely want to show full text in tabs (finance related application). Right now the page titles are getting truncated and replaced with ... (e.g. Exemption is being replaced with Exe...).
I could not find any setting that forces tab to be of full text/width.
Has anyone used this library before have achieved it? If not, is there any alternative library that can help me achieve it?
To Force tab to show Full text try to set the TabLayout property tabMode to scrollabale. TabMode is having two values
1. fixed - 1
2. scrollable - 0
set it Like:
app:tabMode = "scrollable"
Answer was simple. I just had to add a custom tab
<com.astuetz.PagerSlidingTabStrip
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:id="#id/materialviewpager_pagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:pstsPaddingMiddle="true"
app:pstsDividerPadding="20dp"
app:pstsIndicatorColor="#FFF"
app:pstsIndicatorHeight="2dp"
app:pstsShouldExpand="false"
app:pstsTabPaddingLeftRight="10dp"
app:pstsTabTextAllCaps="true"
tools:background="#A333"
/>
Notice that I set pstsShouldExpand to false. This makes sure that the tab width is not distributed, hence we can see full text.
Note - This makes the tab width uneven.
I am using tabs for my Viewpager, and this is the XML right now:
<android.support.design.widget.TabLayout
android:id="#+id/viewpager_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"/>
They look great but I want to be able to have more tabs and not have everything squish on the screen. However I don't like switching to scrollable tabMode because then everything flattens out and looks messy. How can I set the width of the individual tabs?
TabLayout does not provide the attributes for particular tab's fixed width.
But you can set min and max width.
tabMinWidth and tabMaxWidth
https://developer.android.com/reference/android/support/design/widget/TabLayout.html
Hi I have an android app using Collapsingtoolbarlayout. the title of the Collapsingtoolbarlayout will be the title of the article from previous activity/fragment (how can I make the Collapsingtoolbarlayout to display full title (resize font, take additional space) when needed?
Currently, Iam using these code. How to modify the code to display title correctly? any help is much appreciate. Thanks
Activity activity = this.getActivity();
CollapsingToolbarLayout appBarLayout = (CollapsingToolbarLayout) activity.findViewById(R.id.toolbar_layout);
if (appBarLayout != null) {
appBarLayout.setTitle(topStory.getTitle());
appBarLayout.setExpandedTitleTextAppearance(View.NO_ID);
appBarLayout.setCollapsedTitleTypeface(Typeface.SANS_SERIF);
appBarLayout.setTitleEnabled(true);
}
I couldn't believe that four years later I'm still struggling to get CollapsingToolbarLayout to handle this. Specifically, we need the height of the expanded CollapsingToolbarLayout to wrap the size of the expanded title without any contained image or other content.
In order to achieve this I had to create a fake TextView within the CollapsingToolbarLayout to mimic the appearance and content of the expanded title, so that the CollapsingToolbarLayout calculates its expanded height based upon it. This TextView remains invisible so that we can still use the animation provided by CollapsingToolbarLayout between its collapsed and expanded titles.
Here's the XML for you to use:
<com.google.android.material.appbar.AppBarLayout 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="wrap_content"
app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="#style/OmegaHeadingMedium"
app:expandedTitleGravity="bottom"
app:expandedTitleMarginBottom="#dimen/spacer_small"
app:expandedTitleMarginEnd="#dimen/spacer_grid"
app:expandedTitleMarginStart="#dimen/spacer_grid"
app:expandedTitleMarginTop="?actionBarSize"
app:expandedTitleTextAppearance="#style/OmegaHeadingLarge"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:maxLines="3"
tools:title="Title">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"
app:titleMarginEnd="#dimen/spacer_small" />
<!-- This title is used to dynamically calculate the height
of the collapsing toolbar. Styling should match that of
the expanded title appearance. -->
<TextView
android:id="#+id/txt_fake_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginHorizontal="#dimen/spacer_grid"
android:layout_marginTop="?actionBarSize"
android:layout_marginBottom="#dimen/spacer_xsmall"
android:textAppearance="#style/OmegaHeadingLarge"
android:visibility="invisible"
tools:text="Really really really really really really really really long title"
tools:visibility="visible" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
(Keep in mind that styles, dimensions, and other properties in that XML is just for demonstration)
Here's how you would then use it in Kotlin:
collapsing_toolbar.title = "Title"
txt_fake_title.text = "Title"
To change the text size you need to add this to your CollapsingToolbarLayout:
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Title">
Or in Java:
mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(android.R.stlye.);
mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(android.R.style.);
To dynamically fit the size to the article layout you have two options:
You set the textSize to a size, which will allow every possible title to appear completely (If you already know each titles)
Or you check how many Characters the title has and change the textAppeareance of the CollapsingToolbarLayout
I have 4 tabs in an actionBar. I'm using a RelativeLayout with an ImageView and a TextView as a customView for the tabs.
The actionBar overflows the width of the screen and the tabs become horizontally scrollable.
The actual width of my customView is not much, but the Tabs take up extra space (varies on different devices).
How can I restrict the tabs to occupy not more than 1/4th of the screen width.
Tab view width is based on content/yourImage size, so to make tab view width smaller, you have to control the content/Image size. You can use CustomView for your Tab by putting ImageView inside FrameLayout.
For detail please go to the answer for post ActionBar tabs set dynamic width according to screen width.
Instead of Using the ActionBar, you will need to either implement a ToolBar or something similar in your UI which you can control the width of that has Tab's inside it...
ActionBar is meant to take up the full width of the Screen whereas you can specify the width of a Toolbar yourself...
create a tab_layout.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="200dp"
android:layout_height="wrap_content"
app:popupTheme="#style/Theme.AppCompat.Light.NoActionBar">
<!-- Add your Tabs here -->
</android.support.v7.widget.Toolbar>
Then just include this layout in your activity:
<include layout="#layout/tab_layout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>