Custom ActionBar with a background image

Question

I have been trying to make an ActionBar for a while now. At first I decided just to draw it as an image (2nd actionBar in the image below) but noticed that on some of the devices that Image wouldn`t take up the whole screen width. As for the original ActionBar I use this code in my main Activity onCreate method:

final ActionBar actionBar = getActionBar();
@SuppressWarnings("deprecation")
BitmapDrawable background = new BitmapDrawable (BitmapFactory.decodeResource(getResources(), R.drawable.actionbar)); 
actionBar.setBackgroundDrawable(background);
//actionBar.setIcon(android.R.color.transparent);
actionBar.setDisplayShowTitleEnabled(false);

The first ActionBar has a light theme with the image being stretched. How can I make it to be transparent and is there a way to set ActionBar height so it wouldn`t look that stretched ? I also tried doing this with styles and had the same result.

EDIT I followed vinitius answer so I now have this: result the image is 482x104 and my phone is 480x800. This is the same problem that happened when using it as plain image. Image is in drawable-hdpi folder.

EDIT 2 by adding android:scaleType="fitXY" to the ImageView it will make the whole image stretched.

actionbar_layout.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="wrap_content"
android:background="#00000000"
android:orientation="vertical" >

<View
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#3383A8" />

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:src="@drawable/actionbar" />

</RelativeLayout>

EDIT 3 If I add the image as a RelativeLayout background it fill not fit in the whole width on the bigger devices. If I use it as an image on bigger width devices it will be stretched. Image

ActionBar

Already tried this http://stackoverflow.com/questions/5861870/actionbar-background-image — Danielius Ašmontas, Jan 21 '15 at 17:11
Seems to have changed when I added "background.setTileModeX(android.graphics.Shader.TileMode.CLAMP);" Now i just need a way to remove that light theme that is in the background of the ActionBar and change the height because the image wouldn`t fit in.. — Danielius Ašmontas, Jan 21 '15 at 17:15
It works on a smaller device but not on a larger one. I should just go back to using a normal ActionBar because the image gets stretched. — Danielius Ašmontas, Jan 21 '15 at 19:01
But do you have the image in the right dimensions (mdpi,hdpi,xhdpi....)? — vinitius, Jan 21 '15 at 19:08
Might not because I don`t know what resolution the image should be in. The image is 482x104. Its in hdpi. — Danielius Ašmontas, Jan 21 '15 at 19:14
Here, take a look: http://developer.android.com/guide/practices/screens_support.html — vinitius, Jan 21 '15 at 19:16
But if you want the image to be drawn exactly as it is, without android intervention, move it to `mdpi`which is the base size for scaling — vinitius, Jan 21 '15 at 19:18
i`ll try making a custom View class. I should cut out the logo from the banner and try making a custom Action bar that way. http://stackoverflow.com/questions/25873654/actionbar-android-with-custom-shape — Danielius Ašmontas, Jan 21 '15 at 19:29

score 0 · Accepted Answer · answered Jan 21 '15 at 17:23

0

You can design your own actionBar view, you may even inflate it from any xml, and then just:

    getActionBar().setCustomView(yourView);
    getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

To adjust the height of your bar, you could do it like this:

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
</style>

<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">

   <!-- the height you desire according to your dimen -->

    <item name="android:height">@dimen/action_bar_height</item>
</style>

Then, apply your theme. It works for me

answered Jan 21 '15 at 17:23

vinitius

3,212
2
17
22

Is this possible when using min API level 11 ? I noticed that you need Atleast API 14 to remove the icon on the action bar, Same goes for the DarkActionBar theme. – Danielius Ašmontas Jan 21 '15 at 17:38
Yes, you need min API level 14 to use it this way – vinitius Jan 21 '15 at 17:49
Updated. The image isn`t taking up the whole screen width. – Danielius Ašmontas Jan 21 '15 at 18:22
To your imageView add scaleType:fitXY or use the image as the background of your root layout. Also, use `match_parent` instead of `fill_parent`, because it's deprecated. Remove `orientation` from your relative layout and why is there a ``? – vinitius Jan 21 '15 at 18:27

Custom ActionBar with a background image

1 Answers1