popupBackground glitches with Material Design - android

I have been working on updating my apps to Material Design.
I have an app that uses tabs. For some reason whenever I use android:popupBackground to set the drop down menu color it freaks out.
I set up a default project with tabs and used the following theme and the same thing happened. Has anyone one else had this problem? My app is open source and so all the code is available here GitHub
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionDropDownStyle">#style/Dropdown</item>
</style>
<style name="Dropdown" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:popupBackground">#000</item>
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>
</resources>

I had faced a similar issue with spinner. As #alanv mentioned use shape as background instead of colour will solve the problem.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#000000" />
</shape>
UPDATE It is resolved in latest AppCompat.

Related

android : remove border of share action icon [duplicate]

Have a look at the picture
This is how Share button looks like in action bar.
Here's the code I use in menu xml file:
<item
android:id="#+id/menu_item_share"
android:showAsAction="ifRoom"
android:title="Share"
android:actionProviderClass=
"android.widget.ShareActionProvider" />
Is it possible to remove that border or change its color?
Here is a more complet message :
In your style, add
<style name="_MidipileTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarItemBackground">#android:color/transparent</item>
</style>
drawable/action_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/background_actionBar"/>
</shape>
#color/background_actionBar is your custom background. For me, it's the same background color as actionBar background drawable.
You need to use custom background.
This might help:
https://developer.android.com/training/basics/actionbar/styling.html

ActionBar with rounded edges

I would like to know, if it is possible to make my ActionBar have rounded edges, more specifically only the top ones (top-left, top-right). I did some searching, but most of the methods are outdated and did not work for me. I am using AppCompat support library v22.1.1.
I have made an image of what I am trying to achieve, but my reputation is too low to upload images so I tried to describe as best as I could with words. If I have missed out any relevant information, let me know.
Yes, it is possible by using a shape drawable.
First create actionbar_foreground.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#2C5AA9"/>
<corners
android:radius="0.1dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
And then the background for the ActionBar. This color will be seen where the edges are rounded. I had trouble since I was using a light theme, where the decor view is white in color, so I made this "hack"
actionbar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF000000"/>
</shape>
And now you just layer them (put one over the other). Bottom layer is the background. This is what I called actionbar_layer_list.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/actionbar_background"/>
<item android:drawable="#drawable/actionbar_foreground"/>
</layer-list>
And now just define a style for your app in the styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="CustomActionBarTheme" parent="#style/AppTheme">
<item name="actionBarStyle">#style/CustomActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="CustomActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/actionbar_layer_list</item>
<item name="titleTextStyle">#style/CustomActionBarTextStyle</item>
</style>
And apply it in the AndroidManifest.xml
And it looks something like this

Android: Change menu divider left right margin

I'd like to change the menu divider left right margin
The original screenshot is like this
But I want to change to this
Currently, my style.xml is
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:dropDownListViewStyle">#style/PopupMenuListView</item>
</style>
<!-- Change Overflow Menu ListView Divider Property -->
<style name="PopupMenuListView" parent="#android:style/Widget.Holo.ListView.DropDown">
<item name="android:divider">#color/black</item>
<item name="android:dividerHeight">1px</item>
<!-- I put this line dividerPadding, but it doesn't work-->
<item name="android:dividerPadding">10px</item>
</style>
Any suggestion?
Thanks.
Eric
I found Sukhwant Singh Grewal's answer useful (hence upvoted) but a bit concise. Here's a more fully spelled-out solution.
In styles.xml I added the line:
<item name="android:listDivider">#drawable/divider</item>
Then I added the following divider.xml file under res/drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/divider_line"
android:left="16dp"
android:right="16dp"/>
</layer-list>
Lastly, I added the following divider_line.xml file under res/drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#color/pink_dark"/>
<corners
android:radius="3dp"/>
</shape>
This seemed to work for me.
under res/drawable
add divider.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="60dp"
android:right="10dp" android:drawable="#drawable/divider">
</item>
</layer-list>
in android:drawable="#drawable/divider_image"you can use any color like android:drawable="#color/black". Then take it as background of your divider and give height.

Custom (gradient) background of ActionBar Compat

I am using Action Bar Compat so that my action bar with navigation drawer was backward compatible down to API level 9 and I want to change the background of the action bar.
I copied the code from Android Developers:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_background</item>
</style>
</resources>
And here comes the problem.
When I put an image drawable or a color as the background, it works fine. However I want to define the background as a gradient shape, so my actionbar_background looks like:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<gradient
android:startColor="#color/ac_bg_start"
android:endColor="#color/ac_bg_end"
android:type="linear"/>
<size
android:width="1dp"
android:height="48dp"/>
</shape>
I want it to be repeated in horizontal way but even this results in error, in fact, very interesting error. Test device and even the emulator gets restarted when I try to run the app. I was able to catch DeadObjectException before restarting.
How should the background drawable look like?
I am currently working on the same task.
Here is my action_bar_bg.xml file in which I define the gradient for my action bar.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:centerColor="#color/turquoise_action_bar"
android:endColor="#color/dark_turquoise"
android:startColor="#color/dark_turquoise" />
</shape>
DeadObjectException
android:shape="line" can't be used if there is a gradient inside. I tested it; my Samsung Galaxy Note 10.1 N8000 restarted, and there was a DeadObjectException.
The linear type of gradient pattern is the default value. So you don't have to declare it explicitly.
Here is my styles.xml in the values folder.
<resources>
<!-- Base application theme. -->
<style name="AppThemeBase" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/PeopleCanAct</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="AppTheme" parent="AppThemeBase">
<!-- All the customizations that are NOT specific to a particular API level can go here -->
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/action_bar_bg</item>
<!-- Support library compatibility -->
<item name="background">#drawable/action_bar_bg</item>
</style>
</resources>
Gradient Drawable
Another approach, without modifying styles.xml:
Here is our example GradientDrawable in res/drawable/ab_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="false" >
<gradient
android:angle="90"
android:startColor="#000000"
android:endColor="#FFFFFF"
android:type="linear" />
</shape>
You can set it to action bar in your Activity's onCreate():
ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.action_bar_gradient_shape));
If you use support v7 library (your case):
// make sure to import android.support.v7.app.ActionBar
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.action_bar_gradient_shape));
Or if you use ActionBarSherlock:
// make sure to import com.actionbarsherlock.app.ActionBar
ActionBar actionBar = getSherlock().getActionBar();
actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.action_bar_gradient_shape));
This is an example for the action bar xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="180"
android:endColor="#BF797777"
android:startColor="#A4231E35"
android:type="linear" />
</shape>
Instead of using android:shape="line" , in order to avoid DeadObjectException , you can set the android:angle to 180 or 0 - the effect will be the same, that is a horizontal line gradient.
I also use that sample code from Android Developer and use the gradient XML as like yours.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
I found the different of this file between yours and mine is android:shape="line" / android:shape="rectangle".
So I try to change my rectangle to line. My app also occurs the same exception and the OS is restarted. Maybe the shape is the key point.

Android Activity Background Image

How do I use a background image in an Activity theme/style?
If I do this using a colour:
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#color/custom_theme_color</item>
</style>
It works correctly, but if I replace the line with:
<item name="android:windowBackground">#drawable/splash_image</item>
The image displays correctly, but all the content is squished into a tiny block in the top left corner of the screen. The shadow underneath the status bar is also cut off or messed.
I am using Mono for Android and the image is a valid nine-patch png.
I also don't use themes, so in the layout of the activity I would add
android:background="#drawable/splash_image"
My solution was change the android:windowBackground to android:background.
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<style name="Theme.Splash" parent="android:Theme">
<item name="android:background">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
I don't use themes or anything, so I'm not sure how that will affect this, but I set my background like this:
getWindow().setBackgroundDrawableResource(R.drawable.background_image);
in onCreate
I needed to have a splash image that looked like my app's initial activity and ran into same issue. I had good luck with windowContentOverlay instead of windowBackground. The drawable appeared below the status bar in the exact same position as a real layout would. It has worked on Android 2.2, Android 3.0, and Android 4.1.
This is my style:
<style name="SplashTheme" parent="android:style/Theme.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">#drawable/splash</item>
</style>
My splash.xml drawable mimics my user interface header using layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--- Background; tile is broken on Android 2.2 so just have super wide background that will get clipped -->
<item>
<bitmap android:gravity="top|left" android:src="#drawable/splash_background" />
</item>
<!--- Icon left justified -->
<item>
<bitmap android:gravity="top|left" android:src="#drawable/header_icon" />
</item>
<!--- Buttons/etc right justified -->
<item>
<bitmap android:gravity="top|right" android:src="#drawable/splash_buttons" />
</item>
</layer-list>
I believe ActionBar also has some built-in ways to handle this, if your app uses it. The MonoIO sample seems to have such a launch image.
You can use the android:gravity="fill" instead of android:gravity="center",
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="translucent">
<item>
<bitmap
android:gravity="fill"
android:src="#drawable/splash_screen" />
</item>
</layer-list>
Note: It will depend on your shape and size of the splash image. In my case by the use of android:gravity="fill" my splash is looking perfect.
You can use the different attribute of gravity on the type of your splash image.

Categories

Resources