Custom ActionBar with a background image - android

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

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

Related

Changing ActionBar Height

I changed the ActionBar height in themes.xml with this
<item name="actionBarSize">30dp</item>
The height of ActionBar changes but then it throws the alignment of my first control off.
Before changing ActionBar height:
After changing Actionbar height
The first Spinner control is aligned to the top of the Layout
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.MainFragment">
<Spinner
android:id="#+id/spSessionsMain"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#drawable/background_spinner"
android:spinnerMode="dropdown"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
I'm at a complete loss.
This is happening because the Action bar has a min height of 64dp by default defined in its style :
ActionBar style : (Just for reference don't copy paste this in your theme)
<style name="Widget.MaterialComponents.Light.ActionBar.Solid" parent="Widget.AppCompat.Light.ActionBar.Solid">
<item name="titleTextStyle">?attr/textAppearanceHeadline6</item>
<item name="subtitleTextStyle">?attr/textAppearanceSubtitle1</item>
<!-- Overrides minimum height in landscape to avoid headline6 and subtitle1 height concerns. -->
<item name="android:minHeight">#dimen/mtrl_toolbar_default_height</item>
<item name="maxButtonHeight">#dimen/mtrl_toolbar_default_height</item>
</style>
If you want to remove the gap between your spinner and the action bar you can override the min height of the bar. like this :
<style name="CustomActionBar" parent="Widget.MaterialComponents.Light.ActionBar.Solid">
<item name="android:minHeight">30dp</item>
</style>
Then add this line to your main theme :
<item name="actionBarStyle">#style/CustomActionBar</item>

Theme background

I need to set a background color to every activitity in my app. I would prefer to set it globally. For this reason I change the style setted as application theme.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:background">#color/app_bg</item>
</style>
</resources>
The problem is that now all ImageViews and TextViews that have not a specified Background get the app background and not the background of parent Layout, for example
<RelativeLayout
android:id="#+id/mmc_rl"
android:layout_width="match_parent"
android:layout_height="#dimen/mm_central_height"
android:background="#color/main_menu_central_bg">
<ImageView
android:id="#+id/mmc_iv_goto"
android:layout_width="#dimen/mm_central_height"
android:layout_height="#dimen/mm_central_height"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/button_goto_big3" />
</RelativeLayout>
The ImageView has the background app_bg and not main_menu_central_bg as expected. How can I solve this problem?
include this line on the ImageView xml:
android:background="#android:color/transparent"

Removing blank space next to App Logo (ActionBar Sherlock)

Can someone tell me how to eliminate the padding to the left of the app logo???
Here's what im talking about http://s9.postimage.org/ksxjpx1e7/Untitled.png
You can easily reproduce this even with ABS Demos, by adding to AndroidManifest.xml
android:logo="#drawable/icon"
I even tried editing abs__action_bar_home.xml directly but somehow that damned padding is still there.
<view xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
class="com.actionbarsherlock.internal.widget.ActionBarView$HomeView"
android:background="#00ff00" >
<ImageView
android:id="#id/abs__home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:padding="0dip"
android:layout_marginLeft="0dip"
android:layout_marginBottom="#dimen/abs__action_bar_icon_vertical_padding"
android:layout_marginRight="8dip"
android:layout_marginTop="#dimen/abs__action_bar_icon_vertical_padding"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:scaleType="fitCenter" />
<ImageView
android:id="#id/abs__up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|left"
android:layout_marginRight="-8dip"
android:contentDescription="#null"
android:src="?attr/homeAsUpIndicator"
android:visibility="gone"
tools:ignore="ContentDescription" />
</view>
As one of the comments pointed out, the padding is reserved for the up icon. The padding is present even though the up icon is not being displayed (so that the logo doesn't move when you hide/show the up icon). Using action bar (and ActionBarSherlock) there are basically 2 ways how to remove the gap:
1.Remove the up icon
The size of the up icon affects the left padding, if you put there a bigger image than the arrow is, the gap will be bigger. If you remove it the gap will be gone. Beware that removing the up icon might not bring the exact looks you wish. Up icon and logo are partially overlapped (the up icon has negative right margin) so removing the up icon (it actually sets the image to nothing, does not affect the visibility) might cause that the logo is partially hidden behind the left edge of the screen.
To remove the up icon set android:homeAsUpIndicator to #null.
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="homeAsUpIndicator">#null</item>
<item name="android:homeAsUpIndicator">#null</item>
</style>
2.Hide home layout and use custom view instead
This way it's more work, but you can affect the result better. You would need to put the icon and the title into the custom view. To hide the home layout and show custom, you have to set android:displayOptions in the action bar style. And then set the proper custom view in the code (you can set it in styles too, but that way it's buggy).
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/MyActionBarStyle</item>
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.Sherlock.ActionBar">
<item name="displayOptions">showCustom</item>
<item name="android:displayOptions">showCustom</item>
</style>

Android - customizing actionbar sherlock tabs

Im trying to customize the actionbar sherlock tabs so they display the tab text below the tab icon. After searching and reading about the subject, I'm still not having much luck.
Here are the results I'm getting:
Custom tab1 selected
Custom tab1 not selected, standard tab2 selected
This is what I have so far:
Created my own styles.xml where I change some of the actionbar settings:
<style name="SkoletubeTheme" parent="Theme.Sherlock">
<item name="actionBarSize">#dimen/st__action_bar_default_height</item>
<item name="actionBarTabStyle">#style/Skoletube.TabView</item>
<item name="actionBarTabTextStyle">#style/Skoletube.Tab.Text</item>
</style>
<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/abs__tab_indicator_holo</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
</style>
<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText">
<item name="android:textAppearance">#android:style/TextAppearance.Medium</item>
<item name="android:textColor">#android:color/primary_text_dark</item>
<item name="android:textSize">10sp</item>
</style>
Created an xml ressource where I change and owerwrite some textsettings for the actionbar. Here I have increased the height of the actionbar, which in turn increases the height of the tabs. I also decreased the size of the text in order to make room for fitting icon and text in the tab
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Default height of an action bar. -->
<dimen name="st__action_bar_default_height">58dip</dimen>
<!-- Text size for action bar titles -->
<dimen name="ab__action_bar_title_text_size">10dp</dimen>
<!-- Text size for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_text_size">6dp</dimen>
<!-- Top margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen>
<!-- Bottom margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen>
</resources>
Then I've defined a custom layout for the tabs to use, where I place the text below the icon:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/customTabLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:focusable="true"
android:gravity="center"
style="?attr/actionBarTabStyle"
>
<ImageView
android:id="#+id/sk_abs__tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
/>
<com.actionbarsherlock.internal.widget.ScrollingTextView
android:id="#+id/sk_abs__tab_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sk_abs__tab_icon"
android:layout_alignWithParentIfMissing="true"
android:layout_weight="1"
android:layout_centerHorizontal="true"
android:lines="1"
android:scrollHorizontally="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
style="#style/Skoletube.Tab.Text"
/>
<FrameLayout
android:id="#+id/abs__tab_custom"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="5dip"
android:layout_weight="1"
android:visibility="gone"
/>
Just for the record the attribute passed as the style for the relative layout points to this:
<style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style>
Then I've applied these changes to my app as follows, the first tab has my customized implementation, the second tab has the standard implementation:
final ActionBar actionBar;
actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayUseLogoEnabled(true);
// Set up tabs
myMediaTab = actionBar.newTab();
myMediaTab.setCustomView(R.layout.skoletube_tab_layout);
ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon);
myMediaImg.setImageResource(R.drawable.tab_mymedia);
ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt);
myMediaText.setText("Tab1");
myMediaTab.setTabListener(this);
myMediaTab.setTag("MyMediaTab");
actionBar.addTab(myMediaTab);
myChannelsTab = actionBar.newTab();
myChannelsTab.setIcon(drawable.tab_mychannels);
myChannelsTab.setText("Tab2");
myChannelsTab.setTabListener(this);
myChannelsTab.setTag("myChannelsTab");
actionBar.addTab(myChannelsTab);
While I think I'm close to the solution, I think I've missed a step somewhere.
Obviously the blue bar behind the text/below the image needs to not be there, but I also haven't seemed to find out where I can set the focused image(I want the img to change color when a tab is selected) andtext color. Do I need to make the imageview focusable and handle it through that or?
I'm still fairly new at this, so the approach I have taken here might be wrong if there is a better/smarter way to go about doing this please do say.
Appreciate any suggestions and ideas.
I have solved that by using a compound drawable:
tv = new TextView(this);
tv.setText(R.string.tab_movies);
tv.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.nav_movies, 0, 0);
mBar.addTab(mBar
.newTab()
.setCustomView(tv)
.setTabListener(
new TabListenerImpl<TheatersTabActivity>(this, "theaters",
TheatersTabActivity.class)));
In order to deal with the selected or not selected image, I am using a selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="true"
android:drawable="#drawable/nav_movies_on"/>
<item
android:state_selected="false"
android:drawable="#drawable/nav_movies_off"/>
</selector>
I don't know if you have found an answer for this or not yet but one solution could be to modify the tab image to include the text, with GIMP or photoshop something, and then just set those images in the tabs, instead of images and text. It is a bit of an awkward way of doing it but it would work.
Hope this helps!

ListView redraws background color whenever I scroll

I have defined a custom theme, where I am drawing a dark gradient on my window background. My ListView background is set to be transparent, however whenever I scroll, the background color turns black, and then after scrolling has stopped, goes back to the gradient color. Why is this?
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme is the default theme. -->
<style name="Theme" parent="android:Theme">
</style>
<!-- Variation on our application theme that has a translucent
background. -->
<style name="Theme.DarkGradient">
<item name="android:windowBackground">#drawable/dark_gradient</item>
</style>
</resources>
Your question is answered here: http://developer.android.com/resources/articles/listview-backgrounds.html
You just need to set the cacheColorHint in order to fix your problem. :-)
Just set cacheColorHint="#00000000" in your xml listView its a transparent color
<ListView android:id="#id/android:list" android:layout_width="320dp"
android:layout_height="fill_parent" android:layout_centerHorizontal="true"
android:divider="#color/whitetxtcolor"
android:layout_weight="2" android:drawSelectorOnTop="false"
android:layout_below="#id/new_layout"
android:cacheColorHint="#000000"
></ListView>
or U can do like this also
this.getListView.setCacheColorHint(0);

Categories

Resources