Toolbar background is working with mipmap and not drawable - java

I'm using background image in my toolbar, and from some reason the toolbar is working only with mipmap and not with drawable.
In my app_bar_main.xml file:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#mipmap/bar"
app:popupTheme="#style/AppTheme.PopupOverlay" />
As you can see I've used mipmap instead of drawable, though when I'm using drawable the application crashes and the following error is given:
Binary XML file line #11: Binary XML file line #16: Error inflating
class android.support.v7.widget.Toolbar
Must mention this mipmap using is just making my app very slow, and it skipping frames, so I would like to change it to drawable.
How can I change the toolbar background resource of the image from mipmap to drawable?
EDIT:
Style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="LightDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColor">#android:color/primary_text_light</item>
<item name="background">#drawable/bar</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

Seems your xml file is perfect.
What I suggest ,Just resize that image or prepare background image with different different size, which you want to set in to your toolbar and put it in to different drawables / mipmap folders.
android:background="#mipmap/bar"
as we know icon size should be ,
drawable-ldpi (120 dpi, Low density screen) - 36px x 36px
drawable-mdpi (160 dpi, Medium density screen) - 48px x 48px
drawable-hdpi (240 dpi, High density screen) - 72px x 72px
drawable-xhdpi (320 dpi, Extra-high density screen) - 96px x 96px
run your app again and do let me know .

toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
Themes/Style
<style name="MyToolbarStyle">
<item name="android:maxHeight">#dimen/abc_action_bar_default_height_material</item>
<item name="android:background">#color/primary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="titleTextAppearance">#style/Theme.Toolbar.Title</item>
<!-- No need for colorPrimary, colorPrimaryDark, colorAccent here
this should go to the AppTheme -->
Try this methos,it works..

Please add this code in your app level build.gradle file
android {
defaultConfig {
.....
vectorDrawables.useSupportLibrary = true
}
}
toolbar_default.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material"/>
ToolBarStyle
<style name="ToolBarStyle" parent="">
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Other
Please remove below line from you toolbar and try to check it work or not.I am not sure but you just check it.
app:popupTheme="#style/AppTheme.PopupOverlay"
I hope this will help you

Related

How to set the width and height of the drawableleft in styles.xml?

Styles.xml:
<style name="windowTitleBackgroundStyle">
<item name="android:background">#A4D05F</item>
</style>
<style name="windowTitleStyle">
<item name="android:drawableLeft">#drawable/smartlogo</item>
<item name="android:textColor">#C6C09C</item>
<item name="android:padding">12dip</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16sp</item>
</style>
I am customizing my titlebar in android using eclipse ide. I can also see my image that is being set by the drawableleft, however it is too big. Do you know how to set the width and size of the drawableleft?
you can use a xml-drawable, that you can customise as you wish.
You can find here some examples and a lot others on net.
Alternatively, you can also create a simple XML, containing a view, image etc, like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/icon"
android:width="#dimen/icon_size"
android:height="#dimen/icon_size"
/>
</layer-list >
,and use this as your drawableLeft.
Hope this helps!
if API level 23 and higher you can change like this
<item
name="android:drawableLeft"
android:drawable="#drawable/smartlogo"
android:height="24dp"
android:width="24dp"/>

Android Studio Rendering Problems - Missing styles?

I get following error in the Preview window of Android Studio:
Rendering Problems Missing styles. Is the correct theme chosen for
this layout? Use the Theme combo box above the layout to choose a
different layout, or fix the theme style references. Failed to find
'?attr/actionBarPopupTheme' in current theme. (4 similar errors not
shown)
I have created a custom style/theme. This is the regarding styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomActionBarTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle" tools:ignore="NewApi">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTheme">#style/MyActionBarTheme</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background" tools:ignore="NewApi">#color/white</item>
<item name="titleTextStyle">#style/MyActionBar.ActionBar.TitleTextStyle</item>
<item name="background">#color/bg_common</item>
</style>
<style name="MyActionBarTheme" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="actionMenuTextColor">#color/title</item>
<item name="colorControlNormal">#color/title</item>
</style>
<style name="MyActionBar.ActionBar.TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/title</item>
</style>
</resources>
My layout file header looks like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
style="#style/CustomActionBarTheme"
android:id="#+id/drawer_layout"
android:background="#color/bg_common_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
...
And in my manifest file I have added in the application tag:
android:theme="#style/CustomActionBarTheme"
Why do I get the error? I also choosed CustomActionBarTheme in my Preview windows as Theme. Am I missing something? Thanks for any advice in advance!
Android Studio uses the latest SDK installed to preview layout files. This can lead to preview errors due to missing styles - switching to an older API level (e.g. from 23 to 22) can fix this.
Another way is to change layout theme (near SDK preview version button)
Works fine

How to change color of the back arrow in the new material theme?

I've updated my SDK to API 21 and now the back/up icon is a black arrow pointing to the left.
I would like it to be grey. How can I do that?
In the Play Store, for example, the arrow is white.
I've done this to set some styles. I have used #drawable/abc_ic_ab_back_mtrl_am_alpha for homeAsUpIndicator. That drawable is transparent (only alpha) but the arrow is displayed in black. I wonder if I can set the color like I do in the DrawerArrowStyle. Or if the only solution is to create my #drawable/grey_arrow and use it for homeAsUpIndicator.
<!-- Base application theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle" tools:ignore="NewApi">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="android:homeAsUpIndicator" tools:ignore="NewApi">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
</style>
<!-- ActionBar style -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="android:background">#color/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
</style>
<!-- Style for the navigation drawer icon -->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/actionbar_text</item>
</style>
My solution so far has been to take the #drawable/abc_ic_ab_back_mtrl_am_alpha, which seems to be white, and paint it in the color I desire using a photo editor. It works, although I would prefer to use #color/actionbar_text like in DrawerArrowStyle.
You can achieve it through code. Obtain the back arrow drawable, modify its color with a filter, and set it as back button.
final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
Revision 1:
Starting from API 23 (Marshmallow) the drawable resource abc_ic_ab_back_mtrl_am_alpha is changed to abc_ic_ab_back_material.
EDIT:
You can use this code to achieve the results you want:
toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.blue_gray_15), PorterDuff.Mode.SRC_ATOP);
Looking at the Toolbar and TintManager source, drawable/abc_ic_ab_back_mtrl_am_alpha is tinted with the value of the style attribute colorControlNormal.
I did try setting this in my project (with <item name="colorControlNormal">#color/my_awesome_color</item> in my theme), but it's still black for me.
Update:
Found it. You need to set the actionBarTheme attribute (not actionBarStyle) with colorControlNormal.
Eg:
<style name="MyTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/MyApp.ActionBarTheme</item>
<item name="actionBarStyle">#style/MyApp.ActionBar</item>
<!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
<item name="colorControlNormal">#color/my_awesome_color</item>
<!-- The animated arrow style -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="MyApp.ActionBarTheme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- THIS is where you can color the arrow! -->
<item name="colorControlNormal">#color/my_awesome_color</item>
</style>
<style name="MyApp.ActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="elevation">0dp</item>
<!-- style for actionBar title -->
<item name="titleTextStyle">#style/ActionBarTitleText</item>
<!-- style for actionBar subtitle -->
<item name="subtitleTextStyle">#style/ActionBarSubtitleText</item>
<!--
the actionBarTheme doesn't use the colorControlNormal attribute
<item name="colorControlNormal">#color/my_awesome_color</item>
-->
</style>
Tried all suggestions above. The only way that I managed to change the color of navigation icon default Back button arrow in my toolbar is to set colorControlNormal in base theme like this. Probably due to the fact that the parent is using Theme.AppCompat.Light.NoActionBar
<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/white</item>
//the rest of your codes...
</style>
Need to add a single attribute to your toolbar theme -
<style name="toolbar_theme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#color/arrow_color</item>
</style>
Apply this toolbar_theme to your toolbar.
OR
you can directly apply to your theme -
<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/arrow_color</item>
//your code ....
</style>
Just add
<item name="colorControlNormal">#color/white</item>
to your current app theme.
if use Toolbar,you can try this
Drawable drawable = toolbar.getNavigationIcon();
drawable.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);
As said on most of the previous comments, the solution is to add
<item name="colorControlNormal">#color/white</item>
to your app theme.
But confirm that you donĀ“t have another theme defined in your Toolbar element on your layout.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
The answer by Carles is the correct answer, but few of the methods like getDrawable(), getColor() got deprecated at the time I am writing this answer. So the updated answer would be
Drawable upArrow = ContextCompat.getDrawable(context, R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(ContextCompat.getColor(context, R.color.white), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
Following some other stackoverflow queries I found that calling ContextCompat.getDrawable() is similar to
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
return resources.getDrawable(id, context.getTheme());
} else {
return resources.getDrawable(id);
}
And ContextCompat.getColor() is similar to
public static final int getColor(Context context, int id) {
final int version = Build.VERSION.SDK_INT;
if (version >= 23) {
return ContextCompatApi23.getColor(context, id);
} else {
return context.getResources().getColor(id);
}
}
Link 1: ContextCompat.getDrawable()
Link 2: ContextCompat.getColor()
I found a solution that works pre Lollipop. Set the "colorControlNormal" within the "actionBarWidgetTheme" to change the homeAsUpIndicator color. Modifying rockgecko's answer from above to look like this:
<style name="MyTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/MyApp.ActionBarTheme</item>
<item name="actionBarStyle">#style/MyApp.ActionBar</item>
<!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
<item name="colorControlNormal">#color/my_awesome_color</item>
<!-- The animated arrow style -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<!-- The style for the widgets on the ActionBar. -->
<item name="actionBarWidgetTheme">#style/WidgetStyle</item>
</style>
<style name="WidgetStyle" parent="style/ThemeOverlay.AppCompat.Light">
<item name="colorControlNormal">#color/my_awesome_color</item>
</style>
On compileSdkVersoin 25, you could do this:
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:textColorSecondary">#color/your_color</item>
</style>
Change Menu Nav Icon Color
In style.xml :
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textColor">#color/colorAccent</item>
</style>
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/colorPrimaryDark</item>
</style>
In Mainfests.xml :
<activity android:name=".MainActivity"
android:theme="#style/MyMaterialTheme.Base"></activity>
Use below method:
private Drawable getColoredArrow() {
Drawable arrowDrawable = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
Drawable wrapped = DrawableCompat.wrap(arrowDrawable);
if (arrowDrawable != null && wrapped != null) {
// This should avoid tinting all the arrows
arrowDrawable.mutate();
DrawableCompat.setTint(wrapped, Color.GRAY);
}
return wrapped;
}
Now you can set the drawable with:
getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());
Solution is very simple
Just put following line into your style named as AppTheme
<item name="colorControlNormal">#color/white</item>
Now your whole xml code will look like shown below (default style).
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#0F0F0F</item>
<item name="android:statusBarColor">#EEEEF0</item>
<item name="android:windowLightStatusBar">true</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowActivityTransitions">true</item>
<item name="colorControlNormal">#color/white</item>
</style>
Another solution that might work for you is to not declare your toolbar as the app's action bar ( by setActionBar or setSupportActionBar ) and set the back icon in your onActivityCreated using the code mentioned in another answer on this page
final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
toolbar.setNavigationIcon(upArrow);
Now, you will not get the onOptionItemSelected callback when you press the back button. However, you can register for that using setNavigationOnClickListener. This is what i do:
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
getActivity().onBackPressed(); //or whatever you used to do on your onOptionItemSelected's android.R.id.home callback
}
});
I'm not sure if it will work if you work with menu items.
This is what worked for me:
Add the below attributes to your theme.
To change toolbar/actionbar back arrow above api 21
<item name="android:homeAsUpIndicator">#drawable/your_drawable_icon</item>
To change toolbar/actionbar back arrow below api 21
<item name="homeAsUpIndicator">#drawable/your_drawable_icon</item>
To change action mode back arrow
<item name="actionModeCloseDrawable">#drawable/your_drawable_icon</item>
To remove toolbar/actionbar shadow
<item name="android:elevation" tools:targetApi="lollipop">0dp</item>
<item name="elevation">0dp</item>
<!--backward compatibility-->
<item name="android:windowContentOverlay">#null</item>
To change actionbar overflow drawable
<!--under theme-->
<item name="actionOverflowButtonStyle">#style/MenuOverflowStyle</item>
<style name="MenuOverflowStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="srcCompat">#drawable/ic_menu_overflow</item>
Note : 'srcCompat' is used instead of 'android:src' because of vector drawable support for api below 21
Here's how I did it in Material Components:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="drawerArrowStyle">#style/AppTheme.DrawerArrowToggle</item>
</style>
<style name="AppTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#android:color/white</item>
</style>
We were running into the same problem and all we wanted was to set the
app:collapseIcon
attribute in the toolbar in the end, which we did not find since it is not very well documented :)
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbarHeight"
app:collapseIcon="#drawable/collapseBackIcon" />
try this
public void enableActionBarHomeButton(AppCompatActivity appCompatActivity, int colorId){
final Drawable upArrow = ContextCompat.getDrawable(appCompatActivity, R.drawable.abc_ic_ab_back_material);
upArrow.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);
android.support.v7.app.ActionBar mActionBar = appCompatActivity.getSupportActionBar();
mActionBar.setHomeAsUpIndicator(upArrow);
mActionBar.setHomeButtonEnabled(true);
mActionBar.setDisplayHomeAsUpEnabled(true);
}
function call:
enableActionBarHomeButton(this, R.color.white);
I just changed the toolbar theme to be #style/ThemeOverlay.AppCompat.Light
and the arrow became dark gray
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Light">
The simplest (and best) way to change the color of the back/up-arrow. Best part is
that there are no side-effects (unlike the other answers)!
Create a style with parent Widget.AppCompat.DrawerArrowToggle, define the color and any other attributes you'd like.
Set the style on the drawerArrowStyle attribute in the apps Theme.
Create style:
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<!-- Set that the nav buttons will animate-->
<item name="spinBars">true</item>
<!-- Set the color of the up arrow / hamburger button-->
<item name="color">#color/white</item>
</style>
Set the style in App Theme:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- Change global up-arrow color with no side-effects -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
To change the ToolBar text color (and other attributes), create this style:
<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:textColor">#color/white</item>
<item name="titleTextColor">#color/white</item>
<item name="colorControlNormal">#color/white</item> <!-- colorControlNormal is Probably not necessary -->
</style>
Then set that style on the AppTheme:
<!-- Base application theme. -->
<style name="AppTheme.MyProduceApp" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- Style the toolbar (mostly the color of the text) -->
<item name="toolbarStyle">#style/ToolbarStyle</item>
<!-- Change color of up-arrow -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
You can change the color of the navigation icon programmatically like this:
mToolbar.setNavigationIcon(getColoredArrow());
private Drawable getColoredArrow() {
Drawable arrowDrawable = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
Drawable wrapped = DrawableCompat.wrap(arrowDrawable);
if (arrowDrawable != null && wrapped != null) {
// This should avoid tinting all the arrows
arrowDrawable.mutate();
DrawableCompat.setTintList(wrapped, ColorStateList.valueOf(this.getResources().getColor(R.color.your_color)));
}
}
return wrapped;
}
private fun setToolbarNavigationIconColor(context: Context, toolbar: Toolbar?, color: Int) {
val drawableBack = toolbar?.navigationIcon
drawableBack?.let {
val drawableWrap = DrawableCompat.wrap(drawableBack).mutate()
DrawableCompat.setTint(
drawableWrap, ContextCompat.getColor(context, white)
)
toolbar.navigationIcon = drawableWrap
}
}
I saw all soluation but didn't fix the problem , If you need fix the problem just add in XMl file this code if you but dark make it light
app:theme="#style/ThemeOverlay.AppCompat.Light"
Just remove android:homeAsUpIndicator and homeAsUpIndicator from your theme and it will be fine. The color attribute in your DrawerArrowStyle style must be enough.
Unless there's a better solution...
What I did is to take the #drawable/abc_ic_ab_back_mtrl_am_alpha images, which seem to be white, and paint them in the color I desire using a photo editor.

Scale Action Bar background image proportionally

Im using ActionBar in my Android App, and to customize each of the tabs, i put a background image behing the ActionBar, which looks the following:
On my phone actually it looks fine, but on other phones it's look very squashed. How can i scale the ActionBar proportionally based on the background's ratio? Are there any solution for this? I had to determine the height in fix DPI because if i leave it out, the ActionBar is not even showing up. My style code is the following right now;
<style name="MyActionBar" parent="android:Theme.Holo.Light">
<item name="android:backgroundStacked">#drawable/tab_bg</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:scaleType">fitEnd</item>
<item name="android:height">87dp</item>
</style>
Update:
I just do not know where to Mr.T's xml code. Im using the basic android ActionBar, and i have only one xml named menu.xml, but if i put the code into it, no effect.
I tried to style the actionbar with the following, but still, if i do not specify the android:height parameter, the actionbar remains 0 and do not showing up.
<style name="MyActionBar" parent="android:Theme.Light">
<item name="android:backgroundStacked">#drawable/tab_bg</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:src">#drawable/tab_bg</item>
<item name="android:scaleType">matrix</item>
</style>
The actionbar still looks like the following on some devices;
http://i.imgur.com/yQN67J3.png
You might do it with either scaleType(http://developer.android.com/reference/android/widget/ImageView.ScaleType.html)
You use ImageView instead of background placing it as the first layout's element and specify android:scaleType attribute for it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/backgrnd"
android:scaleType="matrix" />
...
rest layout components here
...
</RelativeLayout>
or drawable xml

Binary XML file line #7: You must supply a layout_width attribute

<?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"
android:background="#drawable/off_background">
<ImageView
android:id="#+id/bottom_layer"
android:src="#drawable/handle"/>
<ImageView
android:id="#+id/upper_layer"
android:src="#drawable/switch_v"/>
</FrameLayout>
whenever this code is executed:
inflater.inflate(R.layout.settings_switch, this);
I get this error:
10-29 13:27:00.090: E/AndroidRuntime(22364): Caused by: java.lang.RuntimeException: Binary XML file line #7: You must supply a layout_width attribute.
how can it be?
I have
android:layout_width="match_parent"
android:layout_height="match_parent"
Add these attributes to imageview's
android:layout_width="wrap_content"
android:layout_height="wrap_content"
// can use dp like 20dp instead of wrap_content
All view groups include a width and height (layout_width and layout_height), and each view is required to define them.
wrap_content tells your view to size itself to the dimensions required by its content
fill_parent (renamed match_parent in API Level 8) tells your view to become as big as its parent view group will allow.
In general, specifying a layout width and height using absolute units such as pixels is not recommended. Instead, using relative measurements such as density-independent pixel units (dp), wrap_content, or fill_parent, is a better approach, because it helps ensure that your application will display properly across a variety of device screen sizes. The accepted measurement types are defined in the Available Resources document.
Check the link for more info
http://developer.android.com/guide/topics/ui/declaring-layout.html
Add android:layout_width and android:layout_height to both ImageView's
like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/off_background">
<ImageView
android:id="#+id/bottom_layer"
android:src="#drawable/handle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/upper_layer"
android:src="#drawable/switch_v"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
If you meet this problem. you ImageView\TextView\Button. they lack of the attribute layout_with or layout_height.
i met this problems when i modified my values/styles.xml/. Because i removed the attribute of android:layout_width.
The original:
<style name="blue_btn_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">45dip</item>
<item name="android:layout_marginLeft">15dip</item>
<item name="android:layout_marginRight">15dip</item>
<item name="android:layout_marginTop">30dip</item>
<item name="android:layout_marginBottom">30dip</item>
<item name="android:background">#drawable/blue_btn_selector</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">#dimen/btn_text_size</item>
<item name="android:gravity">center</item>
</style>
what i removed the attribute.
<style name="blue_btn_style">
<item name="android:background">#drawable/blue_btn_selector</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">#dimen/btn_text_size</item>
<item name="android:gravity">center</item>
</style>
so,my code is warning those
[08-11 18:32:33.525: E/AndroidRuntime(2306): java.lang.RuntimeException: Binary XML file line #27: You must supply a layout_width attribute.]
The problem given here leads directly to the line in the XML causing the problem. This error can also happen if a theme is applied to an UI element and the theme is not defining the dimension, here the layout_width. E.g. this occurred to me constructing an AlertDialog and defining in a style file:
<style name="FooBar.DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/colorPrimary</item>
</style>
<style name="FooBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="alertDialogTheme">#style/FooBar.DialogTheme</item>
<!-- ... -->
</style>
Adding:
<style name="FooBar.DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
solved the issue.

Categories

Resources