I'm having an issue with my layout where there is a gap between the PagerTitleStrip and the ActionBar. Here's my layout and how it looks, it seems to display fine in the preview window but not on my device.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fuelActivityViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<android.support.v4.view.PagerTitleStrip
style="#style/titleStrip"
android:id="#+id/pagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>
Gap..
I figured it out. In my activity I had the action bar set to navigation tabs mode and it is deprecated/not available with the pager title strip. Once I removed it the space went away.
Related
I have a view which has a TabLayout in it. But the action bar is twice the height that it normally is.
I don't know if this is related to the TabLayout. The other views in the app which do not have a tabLayout, the action bar is the correct height
Has anyone experienced this? and if so what was the solution?
Here is a cut down version of my view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/tabFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
local:tabMode="fixed"
local:tabGravity="fill"
style="#style/Theme.AppCompat" />
</LinearLayout>
Update - I have since removed all the TabLayout code, and the ActionBar is still double the height it should be. I'm completely stumped on this one.
I can only think this has something to do with InvalidateOptionsMenu. I have tried changing it to use SupportInvalidateOptionsMenu.
I found out that in one of our base classes it was deciding whether the action was a tabbed mode or a navigation mode. I needed to remove the code which set it as the tabbed mode.
I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?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:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks
Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".
I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!
I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>
I want to create an activity where there's an image view and a view pager right after. I have try some stuff, but the tabs of the viewpager always appear at the top of the screen.
In order what I would like to have:
Action Bar
Image view (here the M)
Tab
Content of the tab (Fragment)
Here's the closest I have got.
Here's my code. (I'm pretty sur I overkilled it, but I was trying stuff)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/profile_image_linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/profile_image_view"
android:layout_width="fill_parent"
android:layout_height="200dp" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_image_linear_layout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="match_parent"
tools:context="madduck.ioweyou.ProfileActivity" />
</FrameLayout>
</RelativeLayout>
Thanks in advance !
Use a TabLayout instead of the ActionBar tabs.
https://developer.android.com/reference/android/support/design/widget/TabLayout.html
For this to work you'd need to use the Android Toolbar (which is really just another View with some half-baked additions).
have a layout like this in your activity: (pseudo code)
<TOOLBAR>
<IMAGEVIEW>
<VIEWPAGER WITH TABS>
You'll want to declare your Theme/Styles to make sure your activity contains no action bar (since you will be replacing it with the Toolbar). Also some versions of Android used to crash if you tried to add a Toolbar when there was an ActionBar. Not sure if this was fixed.
Can someone help me know how to place a Widget above a ActionBar in android.I have read some other similar queries on stackoverflow but it mentions its not possible.Following is the screen that i am trying to create.Can some one let me know how do i place the Blue layout portion above the actionbar?Or is there some other way of achieving this?
Following is my xml file
nearby.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:background="#android:color/black"
>
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="100dp" >
</LinearLayout>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
However i am not getting the desired layout.The header layout is visible below the actionbar.
Desired Layout:
The blue bar that you see is the action bar, using a custom view. Check out setCustomView on how you can customize the action bar.