There is a left horizontal padding that exists in my app that i did not set and can't find out how to remove it, for the image i added a sample image to illustrate the issue. This is what is happening:
And here is the layout for that piece:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal" >
<ImageView
android:id="#+id/actionBarLogo"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/th2" />
</RelativeLayout>
It also happened on my main activity but only by about 5dp which was fine because i added 5dp on the right. But for my action bar It seems like 15dp or so and thats too much off each side. Where would it be coming from?
EDIT
This is how i initialize the actionable
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
LayoutInflater mInflater = LayoutInflater.from(this);
View myActionBar = mInflater.inflate(R.layout.menu_custom, null);
android.support.v7.app.ActionBar.LayoutParams layout = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayOptions(actionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(myActionBar, layout);
actionBar.setDisplayShowCustomEnabled(true);
EDIT
When I try to add padding/margin to the right, the left padding/margin grows
EDIT
I'm not sure the difference between margin and padding but I think it could be margin instead if that makes a difference
First of all, remove the android:orientation="vertical" (not used in a relative layout), android:layout_gravity="fill_horizontal" (not needed when you have match_parent width),
android:layout_gravity="center" (not used inside a relative layout), android:layout_centerHorizontal and android:layout_centerHorizontal ( android:layout_centerInParent="true" is enough).
Secondly, is this an activity layout? Do you use it directly in 'setContentView()'? Or is it inside a Fragment or inside a custom view? Any level in the view hierarchy could be causing this. You can use the layout editor in Android Studio to find what's causing it (click on the 'Design' tab when looking at the xml file, and then click on the empty padding to see where it belongs). If you can't figure it out from there, you can use the Hierarchy Viewer (http://developer.android.com/tools/debugging/debugging-ui.html) on an emulator and see what's wrong.
Related
I can not figure out for the life of me why and how to stop the Linear Layout from overlapping the navigation bar. I am familiar with Android Studio, just not version 2+.
This problem was never a thing and I have tried multiple searches and attempts to fix this. (Screenshot below).
Put this in your LinearLayout code in the content_main.xml file.
android:layout_width="match_parent"
android:layout_height="match_parent"
In your LinearLayout set padding top 50dp
android:paddingTop="50dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
You can change margin values depending on layout position.
I am migrating to the new Toolbar feature in appcompat v21 from the previous action bar. I still want to keep the logo on the top left part of the actionbar (toolbar). For doing I added in my layout the support toolbar and I created a new thene for it.
app:theme="#style/NewToolBarStyle"
I am adding the log programmatically as there is some logic in the app for this.
actionBar.setLogo(R.drawable.myicon);
Referring to my new style (empty for the moment):
<style name="NewToolBarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</style>
However the result is showing an image the is too big for what I am looking for, and I am wondering how to reduce the size of the icon.
Is there any way (style, layout or programming) that I can reduce the logo size?
There is no logo icon in material design : http://www.google.com/design/spec/layout/structure.html#, so I suppose this is not well tested scenerio - or simply (broken) by design. You can add ImageView as a child widget of your toolbar and use it to show any image. It will show on the right of all the other internal widgets - like spinner - but list navigation mode is also deprecated.
If you insist on having logo then my workaround for this is to make sure toolbar is of fixed height - this takes care of wrong icon height. Even after that you will have to set setAdjustViewBounds to true on toolbars internal logo ImageView - otherwise it will create large left and right padding.
This is how my toolbar looks like (height set to ?attr/actionBarSize):
<?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:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
reference it inside your activity layout using:
<include layout="#layout/toolbar_actionbar"/>
dont change layout_height in include.
The second step is to setAdjustViewBounds(true) on logo icon:
Drawable logo = getDrawable(iconRes);
toolbar.setLogo(logo);
for (int i = 0; i < toolbar.getChildCount(); i++) {
View child = toolbar.getChildAt(i);
if (child != null)
if (child.getClass() == ImageView.class) {
ImageView iv2 = (ImageView) child;
if ( iv2.getDrawable() == logo ) {
iv2.setAdjustViewBounds(true);
}
}
}
Following the suggestiong give by #brightstar I would like to develop further the answer.
The best way to control the size and position of the Logo in the new Toolbar is by actually not using it. The concept is completely different, what you need to do is create a toolbar from scratch. So you need to make a decision, either you use the layout given by the actionBar or include everything new including the title.
If you stop using the logo but you keep using the title you finally will see that the logo is over the title creating and ood situation.
So, an example of what to do is the following:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_background"
app:theme="#style/NewToolBarStyle"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:textSize="20sp"
android:layout_toRightOf="#+id/logo_image"
android:text="#string/app_name"
android:textColor="#color/white" />
<ImageView
android:id="#+id/logo_image"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:scaleType="centerInside" />
</RelativeLayout>
</FrameLayout>
You create this file as my_toolbar.xml. Notice the following details:
I did not include an src of my ImageView because I am changing it dinamically. But works adding it.
I used a relative layout for being able to center the icon and the text.
I need still to include the Home button.
Later on as described by #brightstar you need to include in the top of your layouts by an include, however.... remember to add an id so that you can refere all your other Views to it.
<include layout="#layout/toolbar_sharemup"
android:id="#+id/including" />
I want to display an Action Bar with a custom layout. The custom layout has three ImageViews, one in the centre and the other two on the left & right ends of the action bar. There must be no back button or action items.
Here is what I've used:
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
View actionBarView = LayoutInflater.from(this).inflate(resource, null);
actionBar.setCustomView(actionBarView, lp);
The custom layout is inflated correctly, but does not occupy the full width of the screen. This happens on Android 4.4.2 (KitKat). On Gingerbread, the above arrangement works properly.
I've tried the recommended solutions in the following discussions:
ActionBar - custom view with centered ImageView, Action Items on sides
RelativeLayout/customview doesn't fill tab's width
However the problem remains. There has to be a way to force the layout to occupy the complete screen width.
I am using the Action Bar from the V7 AppCompat library. Does anyone know a way around this ??
EDIT 1:
Here is the XML layout file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/left_icon"
android:background="#drawable/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:clickable="true"
android:onClick="leftButtonPressed"
android:hapticFeedbackEnabled="true"
/>
<ImageView
android:id="#+id/center_icon"
android:background="#drawable/centertitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
<ImageView
android:id="#+id/right_icon"
android:background="#drawable/rightbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:clickable="true"
android:onClick="rightButtonPressed"
android:hapticFeedbackEnabled="true"
/>
</RelativeLayout>
Here is what it looks like on Gingerbread (2.3.5):
As you can see, its inflating correctly. And here's how it looks on Kitkat (4.4.2):
You can see that there's a slight gap on the right and the layout is not occupying the complete width.
I dont believe there's a problem with the layout (its inflating correctly on Android 2.3.5), but I could be wrong. Tell me if I'm crazy.
EDIT 2:
Thanks to Doctoror Drive and this post, I was able to get the result I wanted. I know its a bit strange: why use an Action Bar if you are not going to have any navigation or action items, but this is what I need for my particular problem. I have a TabHost with a stack of sliding Fragments in each tab, and the top LinearLayout (i.e. the Action Bar) needs to change its appearance when different Fragments are displayed.
EDIT 3:
Here are some more links for understanding this further:
https://groups.google.com/forum/#!msg/actionbarsherlock/i8JRUkBJjqk/ZzQV9xaM-lkJ
https://groups.google.com/forum/#!topic/android-developers/FGEi72thLzE
In my case I have solved the issue bypassing the invocation of the LayoutInflater.
So one should simply replace this code:
View actionBarView = LayoutInflater.from(this).inflate(R.layout.custom_actionbar, null);
actionBar.setCustomView(actionBarView, lp);
with this code:
actionBar.setCustomView(R.layout.custom_actionbar);
It's not a gap, it's a menu overflow button to the right. If you look closely you can see three dots button.
You've chosen the wrong theme because you can hardly see it.
Use Theme.Compat.Light.DarkActionBar if your ActionBar is dark and you need the light theme.
On devices that don't have physical menu button (mostly new ones) the menu overflow button is shown.
You can't remove it unless you disable menus.
You can use splitActionBarWhenNarrow uiOptions which will split the ActionBar so that the menu part will be at the bottom one, but that will be only for vertical orientation of medium screens and probably not what you need.
Take a look at the ActionBar Patterns doc and Menus UI doc
I've a layout (tab from now on) wich has a background (204px x 54px).
I've set that tab to many sizes:
At the moment it's set to 70dp x 40dp:
As you can see, on the XML its displaying somehow like it should be viewed in the device, but when I run it, it ignores the width and the height, so it's being displayed as it is originally (probably takes width & height from the background image).
However, those tabs are placed inside a LinearLayout, so I inflate it several times and I add it into the tabsContainer layout.
<LinearLayout
android:id="#+id/tabsContainer"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
</LinearLayout>
As you can see, I've set a 40dp height and it's working. Its streching the tab layout BUT I also want to reduce the tab's width.
As you can see in the picture, the last one tab's width is kinda smaller because it's in the "end" of the tabsContainer.
Can you give me any tip?
UPADTE
Now my tab layout is like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#drawable/inactiu_docs"
android:clickable="true"
android:gravity="center" >
<TextView
android:id="#+id/titlePestanya"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
android:text="Producto simple"
android:textColor="#color/black" />
And this is the code I'm using to inflate:
RelativeLayout pestanya = (RelativeLayout) this.mInflater.inflate(R.layout.pestanya_per_inflar, null);
I've tried to do it like:
RelativeLayout pestanya = (RelativeLayout) this.mInflater.inflate(R.layout.pestanya_per_inflar, tabsContainer);
But it's crashing with error:
android.widget.LinearLayout cannot be cast to android.widget.RelativeLayout
SOLVED
Use this when inflating:
inflate(R.layout.pestanya_per_inflar, tabsContainer, false);
And use the previous XML layout.
If your parent is a LinearLayout, then you should use android:layout_width="0" and android:layout_weight="1" on your tabs.
When you inflate, make sure you pass a parent.
Hope this helps.
EDIT: never inflate without passing a parent or you will lose your xml parameters (LEARN MORE)
I need to implement a pull-down view that has a "handle" in right-most part of the ActionBar. It should be full width and open with an animation when the handle is clicked, and additionally the handle itself should be draggable. minSdkVersion is 8
Regarding the pull-down functionality itself, I found that SlidingDrawer isn't going to fit the bill, since it has been deprecated as of API v17, and it can only be opened from bottom to top. The control SlidingTray seems to overcome that issue. I haven't tested it thoroughly but but it seems to work as expected.
Now to the main issue. Is it even possible to display the view in such a manner? I have tried to set a custom view for the ActionBar, where the inflated XML looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<my.package.drawer.SlidingTray
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:content="#+id/content"
android:handle="#+id/handle" >
<ImageView
android:id="#+id/handle"
android:layout_width="88dp"
android:layout_height="44dp"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</my.package.drawer.SlidingTray>
</RelativeLayout>
Now, the SlidingTray view itself is functioning as expected when I put it in the activity/fragment layout (can drag the handle and click it to open/close the tray), but when inflating the layout above inside the ActionBar, and upon pressing/dragging the handle, the Tray only moves a few pixels before stopping - it doesn't go beyond the ActionBar bounds. This is the main issue - can the view go beyond the ActionBar itself (over the activity displayed below), and if so - how?
Since no one answered, I'll post how I resolved the issue.
After some inspecting with hierarchyviewer, I saw that the ActionBar was in a LinearLayout and as such, it wouldn't be possible to extend a child of it outside of the ActionBar bounds. So I decided to get the root (decor) view and attach the modified version of SlidingDrawer there. Here is the excerpt:
ViewGroup decor = (ViewGroup) getWindow().getDecorView();
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View drawerContainer = inflater.inflate(R.layout.sliding_drawer, null);
drawer = (SlidingDrawer) drawerContainer.findViewById(R.id.drawer);
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
decor.addView(drawerContainer, params);
Since adding a view this way displays it behind the Status bar, I also added a container view with top padding of 25dp so that the handle and content are displayed beneath it.
Note: if you are using the SlidingMenu library, you need to do this in onPostCreate(), because the library also does this and will place your view behind all of the other content.