Android AppCompat ActionBar 2xHeight - android

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.

Related

Is there any way to see the Custom Layout applied to the Action Bar in the Android Studio Layout Editor?

Assuming you did not modify any properties in style.xml, the Layout Editor in Android Studio displays the Action Bar as:
By adjusting the style of the action bar, I can do things like adjust the background color of it.
However, the ActionBar I use is a Toolbar that uses a custom layout that can not be expressed simply by adjusting the properties of the action bar, as shown below.
It is not difficult to apply the above layout to the Action Bar during runtime. (change custom view, or apply AppTheme to NoActionBar, then set SupportActionBar)
What I really want is that the AppBar with these custom layouts will print out all of the xml inside the project I'm working on, but I have not found the right answer for it so far.
Is this an operation not supported by the Android studio?
You can achieve this via ToolBar & FrameLayouts,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
<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="match_parent"
android:background="?attr/colorPrimary"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
//TextView
//ImageView
// etc
</LinearLayout>
</android.support.v7.widget.Toolbar>
</FrameLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize">
</FrameLayout>
Organize your host activity layout as above and load fragments inside the main_container

How to make fragment overlay toolbar in navigation drawer

I have a material design navigation drawer i created from this tutorial.
It works perfect with toolbar and all. I can click on an item in the drawer and the respective fragment is displayed plus the title.
However i would like to make the toolbar on one fragment to be transparent so that the background image is displayed like in the image below:
PROBLEM: My problem is the fragment doesnt seem to start over the toolbar but below it.This is the result:
I dont know how to fix this.Any suggestions will be welcomed.
Use this for toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/toolbar_image"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
Of course, you'll need to change "#drawable/toolbar_image" to the drawable that you want to use for the background image.

ViewPager with ImageView before tab

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.

Android gap above PagerTitleStrip

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.

How to place Widgets above a actionBar in android?

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.

Categories

Resources