Good afternoon droids!
I am facing an annoying layout problem to which i have no explanation after hours and hours of investigation... :/. I created a reduced test case which i present here.
I have a simple list item layout.
list item http://www.freeimagehosting.net/4075a.jpg
lis item image link
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="96dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:id="#+id/textView1" android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_centerVertical="true" android:layout_centerHorizontal="true" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="TextView"
android:id="#+id/textView2" android:layout_alignParentTop="true" />
<ImageView
android:layout_width="10dp"
android:layout_height="match_parent"
android:id="#+id/imageView1"
android:src="#drawable/errorindicator"
android:layout_below="#id/textView2" />
</RelativeLayout>
the errorindicator is a red rectangle, which you can see on the image on the left side. The xml looks like that:
<?xml version="1.0" encoding="utf-8"?>
<shape shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/ControllingConflictColor" />
<padding android:left="0dp" android:top="0dp"
android:right="0dp" android:bottom="0dp" />
</shape>
The described list item layout works as expected.
Now i try to fill a list view with list items as described above. The result looks like that:
list view with list items http://www.freeimagehosting.net/4cc4b.jpg
list view image link
The corresponding xml:
<?xml version="1.0" encoding="utf-8"?>
<ListView android:id="#+id/listView1" android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Preview: listitem=#layout/test -->
</ListView>
As you can see on the image, the red rectangle does not match it's parent in the height anymore as it should. The images are made from the designer, but the same effect is also on the emulator and device. I am developing for API Level 8.
**I'd love if somebody could explain me, why the described layout does not work as expected in a list view. Why does the shape drawable behave different? **
Thank you for your time :)
edit: i have problems embedding the image, i used a link instead, sorry ;(
edit: added xml-drawable tag.
edit: My example can be even made much more easier. I included two text views because it has some similarity to my real layout. You can remove the two text views from the example and there still exists the problem, that the shape drawable in the image view does not match the parents height as defined, if the layout is used in a list view.
Im also finding it hard to get it done using a RelativeLayout. Well try this layout for your row xml. It uses LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:id="#+id/textView2"
android:layout_alignParentTop="true" />
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout android:layout_width="10dip"
android:layout_height="fill_parent"
android:background="#drawable/errorindicator"/>
<TextView android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="TextView" android:layout_weight="1.0"
android:id="#+id/textView1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>
Because i guess my desired behaviour is not possible with the give layout manager, i went another way which fits my personal situation.
I have overriden the onDraw method of the RelativeLayout and paint this red rectangle myself (after the layout process finished and the heights are set)...
If you made the asset as a png, you could then 9-patch it and add it as the background of the RelativeLayout
Related
The following XML results in the below image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/convoLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/right_bubble">
<TextView
android:id="#+id/convoBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" // cause
android:padding="5dp"
android:text="test test test test"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
Is anyone aware of how to get it to look like this:
Note: I need the RelativeLayout as this is a dumbed down version of my XML :).
EDIT:
Let me also clarify. Without android:layout_alignParentRight="true" in the TextView, the layout looks like the image below (there is white padding on the right)
In essence, I need that padding on the left.
EDIT2:
To further clarify, #drawable/right_bubble is a 9-patch image that is meant to stretch to house the inner views dynamically and the RelativeLayout is to have 3 TextViews inside of it, in which the 9-patch image should encapsulate all 3.
EDIT3:
This is what I want the end result to look like
you are setting the background to relative layout... so, whole layout will have same background no matter what views it holds. Try setting "android:background="#drawable/right_bubble" to TextView instead.
EDIT (by OP after getting answer from comments):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/convoLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" // added
android:background="#drawable/right_bubble" >
<TextView
android:id="#+id/convoBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content" // removed layout_alignParentRight
android:padding="5dp"
android:text="test test test test"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
J.Ajendra's answer got me most of the way there. His answer (that I edited in after understanding his comments) worked, but only if the RelativeLayout's container honors android:layout_gravity. (for example, if we were to Activity#setContentView(R.layout.convo_item)).
In my case, convo_item.xml was to be inflated into a ListView which overrides this behavior for RelativeLayouts (I'm not sure why, but it does) resulting in the chat bubble always being on the left. To solve this, I simply wrapped the RelativeLayout in a LinearLayout that took the parents entire width (android:layout_width="match_parent") and set the gravity of it's content to "right" (android:gravity="right"). The result, it works for all cases including ListViews and Activity#setContentView(...).
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/convoOuterLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<RelativeLayout
android:id="#+id/convoLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/right_bubble" >
<TextView
android:id="#+id/convoBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="test test test test"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</LinearLayout>
I am working with android app..I created a web view.Now I want to add top and bottom menu bar like header and footer to my app.. my app start with a splash screen..then followed by web view .how can I add these menu to top and bottom of these web view..??? please help me and thanks.
here is my xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layout"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/appinc"
android:visibility="visible"
/>
<WebView android:id="#+id/webview"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:visibility="gone"
/>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="114dp" />
</RelativeLayout>
If you are taking about option menu no you cannot change position of menus. See this: https://stackoverflow.com/a/8236188/2741586
However you can actually split you action bar(in 4.0+ versions or older usingmActionBarSherlock). By splitting action bar, menu will appear in both top and button like this: .
If this is what you want: Follow this link
UPDATE:
I found another option! If you want menu like this Google Play
If you want these overflow 3 dot icons: Follow this link.
If none of these suits with your need, you should probably create custom view and modify according to your choice!
Hope this helps!
To apply in your xml try:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="#drawable/appinc"
android:visibility="visible" />
<LinearLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:background="#550055" >
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/bottom_bar" />
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/progressBar1"
android:layout_below="#id/image"
android:visibility="visible" />
</RelativeLayout>
You should use the android:layout_weight="0dp"
Android gives us many components to make a fast and premium application. TextView, ImageView, etc are the general and important components in android. In this tutorial, you will read to add a border to the top and bottom of an Android view. Border to the android views can be added in several ways. Here, I am going to show the easiest and simplest method to add the border to the Android [TextView, Button] views. So, Just Check this below carefully/.
You need to build an XML drawable file inside res/drawable directory For adding the border. This is worked in android 2.2 and higher.
Adding Border to the Top and Bottom of an Android View
Step By Step Guide to Add Border to the Top and Bottom of an Android View
#1: XML Drawable File
First, you need to create an XML drawable file border_top_bottom.xml in /res/drawable folder like /res/drawable/border_top_bottom.xml and link it to TextView. Your drawable XML file will look like this.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#e10606" />
<solid android:color="#9bce64" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#9bce64" />
</shape>
</item>
</layer-list>
border_top_bottom.xml hosted with ❤ by GitHub
#2: XML Layout File
Following is the content of XML layout file where I have added a TextView.
res/layout/top_bottom_border_in_android_view.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:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Adding Border in Top and Bottom of View" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#drawable/border_top_bottom"
android:padding="30dp"
android:text="Top Bottom Border in TextView"
android:textColor="#000000"
android:textSize="18sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#drawable/border_top_bottom"
android:text="Top Bottom Border in Button" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:autoLink="web"
android:gravity="center|bottom"
android:text="ViralAndroid.com"
android:textSize="25sp"
android:layout_marginTop="8dp"
android:textStyle="bold" />
</LinearLayout>
top_bottom_border_in_android_view.xml hosted with ❤ by GitHub
#3: Strings.xml File
res/values/strings.xml
<resources>
<string name="app_name">Adding Border to the Top and Bottom of an Android View</string>
</resources>
strings.xml hosted with ❤ by GitHub
Now, run your Adding Border to the Top and Bottom of an Android View application, you will see the border at the top and bottom of TextView.
NOTE: I have ended up reporting this as a bug to the android project here: http://code.google.com/p/android/issues/detail?id=39159 Please also have a look at the accepted bounty answer, the solution is, unfortunately, to use an absolute (ie specifiying 'dp's rather than 'wrap_content' etc) layout to fix the issue.
I'm getting some VERY strange behaviour when placing a background on an image. I have simplified this down quite heavily to demonstrate the issue to you. What im doing is placing an image in a relativelayout, and also using a background. It seems that giving the relativelayout a padding is causing the background of the image to be missdrawn. Wrap_content seems to be messing up.
Firstly, here is the code that demonstrates the problem. Note that the same behaviour is seen without using a linearlayout and just giving the imageview a background, but this really demonstrates the problem better.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
Here is the black_bg xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF000000"/>
</shape>
Here is red_rectangle:
NOTE that this is a reference image, to demonstrate the problem. my actual image has detail, and so cannot be a .9.png
And here is a screenshot of the problem:
You can see that the image width is less than the linearlayout, despite the linearlayout having a width set to "wrap_content". If I set the relativelayout padding to 0dp, this problem dissapears.
This is hopefully a fairly well contained set of resource I'm providing here, so people can try it out themselves if they wish.
For reference, I am using this to provide a border around the image, so I could set the linearlayout (or the image itself) to have a padding, the problem still persists in that case.
EDIT: It appears I probably need a little more context around this, as answers are focussing round how to provide this border. Here is a screenshot of a more contextual layout. I didnt want to include this in the first place as it adds more confusion to the problem:
The FIRST 5dp padding you see is for the content of this entire item (the relativelayout). Then, as i said originally, the idea is that "I could set the linearlayout (or the image itself) to have a padding" in addition to the first padding you see in the relativelayout. Currently, this layout should have NO border shown.
the problem seems to be with the different stretching properties of image(in image view) and the one set as a background(in linear layout). The image set as a backgroung doesnt necessarily maintains the aspect ratio while the image in the image tends to maintain it.
When you give the height of the layout to 60 dp, the image shrinks maintaining the aspect ratio leaving the black strips on the sides.
This works for me:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/asd"
android:scaleType="fitXY"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I believe this is a good candidate of a bug!
Anyway, I understand what you intend to achieve with this layout. The problem is setting the height of your RelativeLayout. I will not ask you to wrap content! Simply, since the height is set to 60dp and padding to 5dp, take a further step and set the height of the LinearLayout to 50dp which is 60-2*5 :)
Finally, to get the border, add a padding of, say, 5dp to your LinearLayout and set the Height of the ImageView to 50dp - 2*5 = 40dp.
This will work perfectly
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:padding="5dp"
android:background="#drawable/black_bg" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I dont know why its showing the extra black patch there. Have you tried running the app? The UI editor has some defects, especially when it comes to ImageView..
Now for the border around image, set the background and padding to the ImageView itself. Do not need the LinearLayout. Add the scale type attribute with "centerInside" value.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#000"
android:scaleType="centerInside"/>
"For reference, I am using this to provide a border around the image"
Add a drawable "border.xml"
<shape xmlns:android:"http://schemas.android.com/apk/res/android" android:shape:"rectangle">
<stroke android:width="5dp" android:color="#FF000000" />
<padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
</shape>
set your ImageView background to this drawable.
And lets simplify your layout and center the ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle"
android:background="#drawable/border" />
</RelativeLayout>
Try this ...........
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/black_bg"
**android:padding="5dp"**
>
<ImageView
**android:layout_width="fill_parent"
android:layout_height="fill_parent"**
android:adjustViewBounds="true"
android:src="#drawable/red_rectangle" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
make your image view like this ..
<ImageView
android:id="#+id/imageViewMyicon"
android:layout_width="30dp"
android:background="#drawable/myiconbackground"
android:layout_height="30dp"
android:src="#drawable/myicon"
android:contentDescription="#string/my_icon"
/>
Inside your drawable myiconbackground.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#0D95BD"/>
<corners android:radius="5dp"/>
<padding android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp"/>
</shape>
i checked this one is working for me , should do for you as well
I have made myself a custom LinearLayout by the name of com.theflyingnerd.DroidMe.DiscreteNumericalRangeSelectorWidget that hosts a couple of spinner widgets. This custom LinearLayout inflates the following XML layout (You might not need to look at this too carefully but it's here for completeness):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- Min value Spinner -->
<Spinner
android:id="#+id/discrete_numerical_range_selector_min_value_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_weight="1" />
<TextView
android:id="#+id/to_text"
android:text="to"
android:textSize="14sp"
android:paddingLeft="10sp"
android:paddingRight="10sp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_weight="0">
</TextView>
<!-- Max value Spinner -->
<Spinner
android:id="#+id/discrete_numerical_range_selector_max_value_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1" />
I have placed one such object in the layout for one of my activities like so:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<include layout="#layout/search_form_section_generic_top"/>
<include layout="#layout/search_form_section_car_specific"/>
<com.theflyingnerd.DroidMe.DiscreteNumericalRangeSelectorWidget/>
<include layout="#layout/search_form_section_advanced_options" />
</LinearLayout>
The problem is that my app force closes immediately upon startup. I've checked by putting breakpoints in my custom LinearLayout that none of my custom code is even being run yet. Furthermore, if I copy-paste the layout code for my compound widget in place everything works, which indicates to me that I probably haven't left any important XML attributes out. What could be going wrong?
I fixed it by making the LinearLayout XML element in the widget layout into a merge instead, and moved all of the layout parameters out of the widget XML file and into the activity XML itself, thus replacing
<com.theflyingnerd.DroidMe.DiscreteNumericalRangeSelectorWidget/>
with
<com.theflyingnerd.DroidMe.DiscreteNumericalRangeSelectorWidget
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
If someone could tell me why this worked, it might help me and others doing it again, and you can take credit.
because you must specify the width and height of every view you use in you xml?
In my Android application I've hidden the default title bar, introduced a TabView and added my own titlebar under that TabView's tabs. At the moment, I'm using the ?android:attr/windowTitleStyle style which makes my new titlebar look gray and gradient. It looks pretty good, but my screens are looking pretty grayscale. I'd like to spice things up a bit by making this titlebar a different color gradient.
What am I looking at here? Creating my own image and using it? The ?android:attr/windowTitleStyle style seems to expand depending on the height of your custom titlebar; so I'm not sure it's actually a single image.
I've attempted to throw a LinearLayout over it with a bit of translucency (ex: making the color #800000FF), but the gradient style I have behind this LinearLayout disappears.
Thanks for your help
Update:
Per my answer down below, I've figured out that I can create an XML file that defines a gradient and use that. It works fine inside a LinearLayout (titlebar_gradient) I have on my layout. However, it is not working on the outer-most LinearLayout (background_gradient). Could someone tell me why? As I understand it, the ListView should be transparent...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_gradient"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="47dip"
android:background="#drawable/titlebar_gradient"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Item"
style="?android:attr/windowTitleStyle"
android:paddingLeft="5dip"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="10dip"
android:clickable="false"
/>
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
I understand my problem now.
I've created an XML file in my drawables folder that looks like this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00CC66"
android:endColor="#009966"
android:angle="270"/>
/shape>
In my toolbar, I set the background to this drawable.