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"/>
Related
I'm struggled with this for hours looking for solution on google and stackoverflow. Thought that this is some trivial bug in my app but finally made empty project and can reproduce this too. Just run new project and select "Tabbed Activity" with navigation style "Action Bar Tabs (with ViewPager)
Then try to put any widget at the bottom of the fragment's layout. I did this by modify fragment_main.xml and adding:
android:layout_height="match_parent"
android:gravity="bottom"
android:textAlignment="center"
So the whole layout is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity$PlaceholderFragment">
<TextView
android:id="#+id/section_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:gravity="bottom"
android:text="aaaaaaa"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1" />
</android.support.constraint.ConstraintLayout>
In design mode everything looks fine:
But when you run app:
You will see text only when you swipe action bar to hide it:
So it is impossible to set widget at the bottom of the tab's fragment or even match some list/picture to the height of the parent because bottom edge will be always under navigation bar.
Workaround which I found is here:
ViewPager with Toolbar and TabLayout has wrong height
First one is to put AppBarLayout and ViewPager between LinearLayout but then I lose hidding action bar functionality when scrolling ViewPager's content. Second one is add android:paddingBottom="?attr/actionBarSize" in ViewPager but then there is a gap when I hide action bar. Seriously there is no solution for this?
I think this is an expected behavior since the ActionBar gets hidden when scrolling up. In the design mode the text can be shown because it doesn't display the TabLayout. However, when you launch the app, it will inflate the TabLayout and the fragment will go below it. So it's not like the fragment is getting expanded or giving you wrong height.
Imagine putting an ImageView that has a matching height of the visible field (from below the TabLayout to right above the navigation menu). When you hide action bar from there, it will have a gap on the bottom since there's no content to fill up the space of hidden action bar, unless you stretch the ImageView as you scroll up, which will result in wired stretched image :/
One possible solution I can think of is, if you want to add a view on the bottom of the fragment, I will set the actionbar padding to the view and when I scroll the screen, I will adjust the padding depends on the scroll offset so that I can always be on the bottom.
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 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
From an Android example I can see how to do
ActionBar tabs and how to use tabs for fragment switching, however in the example the fragment layout covers the whole screen.
I want to put some controls at the bottom of the screen,
which should be a part of and controlled by activity itself.
So i want to keep the bottom of the screen same while clicking on tabs and switching between fragments.
Thanks
Split the screen using LinearLayouts into two sections. For example give one linear layout a weight of 9 (to occupy 90% of screen) and the other a weight of 1 (to occupy 10% of screen) - then put the fragments in the LinearLayout with weight 9. This way your fragments have their own container and you have another container at the bottom which your activity can use to do whatever it likes and it will be visible and accessible from all the fragments just like your tabs.
As sunil said, you have to create the bottom layout in your MainActivity. So the layout will be something like below.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/fragment_holder"
android:layout_width="match_parent"
android:layout_height="0dp"
android:weight="9"/>
<Button
android:id="#+id/bottomButton"
android:layout_width="match_parent"
android:layout_height="0dp"
android:weight="1"
android:text="Common BUtton"/>
</LinearLayout>
And in the FragmentTransaction pass R.id.fragment_holder as it will be container for fragments.
I'm trying to create a marquee style animated view wherein a very wide linear layout scrolls horizontally within a narrower view. Something like
<LinearLayout
android:id="#+id/ContentLinearLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:clipChildren="false">
<LinearLayout ...> <- a very wide layout that animates.
</LinearLayout>
Problem is I can't figure out how to make the view with the content in it not clip it's width to the size of it's parent without setting an exact layout_width. The animated content view is dynamically created so I don't know the width ahead of time. This is for an appwidget so I'm further constrained by the limitations of RemoteViews.
With RemoteViews you will have to specify a fixed width.