Develop Reference

Android Gradient Background drawable does not work

I've created this drawable resource, backgroundactivity, to use as my app's background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<item
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<shape
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<gradient
android:angle="90"
android:startColor="#BFEFFF"
android:centerColor="#B0E2FF"
android:endColor="#82CFFD"
android:type="linear"/>
</shape>
</item>
</selector>
I want to set this background on all my activity, so I've tried to put this drawable resource in the styles.xml like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:background">#drawable/backgroundactivity</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="#android:background">#color/colorPrimary</item>
</style>
</resources>
But in this way it didn't work: the background still stay white as default. I've also tried to replace android:background with android:windowBackground, but it causes my application to be completely black.
Thanks in advance!

Try to use windowBackground instead of background
<item name="#android:windowBackground">#color/colorPrimary</item>

It worked by simply editing the background activity.xml to the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#BFEFFF"
android:centerColor="#B0E2FF"
android:type="linear" />
</shape>
</item>
</selector>

android:theme="#style/..." doenst take background

I got the following background for an edit text:
edit_text_rounded_white.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#66c6c6c6"/>
<stroke android:width="0.1dp"
android:color="#66c6c6c6"/>
<corners android:radius="40dp"/>
</shape>
</item>
</selector>
in my styles.xml I define the following:
<style name="editText">
<item name="android:background">#drawable/edit_text_rounded_white</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingTop">2dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:textCursorDrawable">#drawable/edit_text_cursor</item>
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/transparentWhite50</item>
</style>
When I set the style via: style="#style/editText" for my editTexts it takes the background but doesnt take the colorControl I set. When I set the style via android:theme="#style/editText" it takes the colorControls but doesnt show the background image. I already tried src and windowBackground instead of background in the style file.
Any ideas how achieve both? Showing background and the colorControls?

Split your style into two:
<style name="editTextStyle">
<item name="android:background">#drawable/edit_text_rounded_white</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingTop">2dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:textCursorDrawable">#drawable/edit_text_cursor</item>
</style>
<style name="editTextTheme">
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/transparentWhite50</item>
</style>
And then apply both to your view:
<EditText
...
android:theme="#style/editTextTheme"
style="#style/editTextStyle"/>

Custom spinner UI with arrow and vertical line

I am trying to implement a spinner with a custom layout (not the spinner item layout), the outer layout. I want it to look like this:
http://imgur.com/a/U6RzU
I searched stackoverflow and google, but couldn't figure out how to come up with this (beside putting the whole picture as a background)
Thanks a lot in advance
Edit
This is what I tried:
styles.xml
<style name="spinner">
<item name="android:layout_marginTop">6dp</item>
<item name="android:layout_marginBottom">6dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:padding">10dp</item>
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:popupBackground">#color/red</item>
<item name="android:textSize">15sp</item>
</style>
spinner_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ff0000"
android:startColor="#ff0000" android:type="linear" />
<stroke android:width="0.33dp" android:color="#0fb1fa" />
<corners android:radius="0dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/arrow_white_down" />
</item>
</layer-list>
</item>
</selector>
where arrow_white_down is a png of a tiny white arrow (like the one in the link)

I solved it by using a RelativeLayout with the spinner and an image (arrow) beside it, it doesn't look really good in spinnerMode="dropdown" but this is the best I could do
layout
<RelativeLayout
android:id="#+id/spinner_container"
style="#style/spinner_container">
<Spinner
android:id="#+id/spinner"
style="#style/spinner"
android:layout_toLeftOf="#+id/spinner_image"
android:layout_toStartOf="#+id/spinner_image" />
<ImageView
android:id="#+id/spinner_image"
style="#style/spinner_image" />
</RelativeLayout>
styles.xml
<style name="spinner_container">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">35dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:layout_marginTop">6dp</item>
<item name="android:layout_marginBottom">6dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:background">#color/red</item>
</style>
<style name="spinner">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">0dp</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:layout_alignParentStart">true</item>
<item name="android:padding">5dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/red</item>
<item name="android:popupBackground">#color/red</item>
<item name="android:textSize">15sp</item>
</style>
<style name="spinner_image">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_margin">5dp</item>
<item name="android:padding">0dp</item>
<item name="android:layout_alignParentRight">true</item>
<item name="android:layout_alignParentEnd">true</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:src">#drawable/bc_spinner_arrow</item>
</style>
where bc_spinner_arrow is a transparent pic of a white arrow and a vertical line (like the one in the question)

Dividers for the actionbar menu items

I am developing Tablet android application. Here i got one issue with the UI of the action bar menu items.
Note: I am using android Native actionbar.
1) How to show divider between menu items like as show in the image.
I tried with divider styles and custom styles but it doesn`t reflect in my action bar.
2) How can I add multiple menu items into a single menu item like as show in the picture.
I tried with custom layout but overflow menu for the items is not showing.
I tried with PopupMenu for the overflow menu but the icon is not visible in overflow list.
Here I was using styles for the action bar application, styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:textAllCaps">false</item>
<item name="android:actionMenuTextAppearance">#style/AppTheme.ActionBar.MenuTextStyle</item>
<item name="android:actionOverflowButtonStyle">#style/OverFlow</item>
<item name="android:divider">#color/dividercolor</item>
</style>
<style name="OverFlow" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/ic_actionbar_dots</item>
</style>
<style name="AppTheme.ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:height">100dip</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.Text</item>
<item name="android:textColor">#color/white</item>
<item name="android:divider">#drawable/divider</item>
<item name="android:showDividers">beginning</item>
<item name="android:dividerPadding">10dp</item>
</style>
<style name="AppTheme.ActionBar.MenuTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
<item name="android:textAllCaps">false</item>
<item name="android:textColor">#color/white</item>
<item name="android:textSize">26sp</item>
</style>
<style name="AppTheme.ActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textAllCaps">false</item>
<item name="android:textColor">#color/white</item>
</style>
menu.xml
<group android:id="#+id/menu_mainGroup" >
<item
android:id="#+id/connection"
android:icon="#drawable/nw_pt_calc"
android:showAsAction="always"
android:title=" ">
</item>
<item
android:id="#+id/status_menu"
android:actionLayout="#layout/application_status_overflowmenu"
android:showAsAction="ifRoom|withText">
</item>
<!--
<item
android:id="#+id/status"
android:icon="#drawable/ic_available"
android:showAsAction="always"
>
<menu>
<item
android:id="#+id/status1"
android:icon="#drawable/ic_available"
android:showAsAction="always"
android:title="#string/menu_available">
</item>
<item
android:id="#+id/status2"
android:icon="#drawable/ic_busy"
android:showAsAction="always"
android:title="#string/menu_busy">
</item>
<item
android:id="#+id/status3"
android:icon="#drawable/ic_logoff"
android:showAsAction="always"
android:title="#string/menu_logoff">
</item>
</menu>
</item>
<item
android:id="#+id/display_pic"
android:icon="#drawable/ic_person"
android:showAsAction="always">
</item>
<item
android:id="#+id/display_name"
android:showAsAction="always">
</item>
-->
<item
android:id="#+id/menu_search"
android:icon="#drawable/ic_search"
android:showAsAction="always"
android:visible="false">
</item>
<item
android:id="#+id/help"
android:icon="#drawable/ic_help"
android:showAsAction="always"
android:visible="false">
</item>
<item
android:id="#+id/about"
android:showAsAction="never"
android:title="#string/about">
</item>
<!--
<item
android:id="#+id/notification_history"
android:showAsAction="never"
android:title="#string/notification_history">
</item>
<item
android:id="#+id/comm_msg_history"
android:showAsAction="never"
android:title="#string/comm_msg_history">
</item>
-->
</group>
Help will be appreciated. Thanks looking forward to hear answers from geeks :).

I don't know if you have resolved your problem. But I can explain you just in case.
First of all, to customize the divider in your ActionBar, you must to do this in your Theme with the parent ActionButton. You do this:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:divider">#color/dividercolor</item>
</style>
<style name="AppTheme.ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:divider">#drawable/divider</item>
</style>
Try this way:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionButtonStyle">#style/ActionButton</item>
<item name="android:actionBarDivider">#color/blue</item>
<item name="actionBarDivider">#color/blue</item>
</style>
<style name="ActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#color/blue</item>
</style>
You can read the solution here: Can't change color of actionBar divider and there: ActionBar MenuItem Divider.
Then, you can create a 9-Patch drawable to look like exactly at your image. Try to use something like this image:
The black border indicate where expand your image. I did it on the left/right sides to expand your divider on its height. You can read Draw 9-patch from the Documentation to know how use the Draw 9-Patch tool in the sdk.
Or, you can make it in xml, something like below:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- first line vertical blue -->
<item android:left="1dp">
<shape android:shape="line">
<stroke
android:color="#color/blue"
android:width="1dp" />
</shape>
</item>
<!-- second line vertical white -->
<item android:right="1dp">
<shape android:shape="line">
<stroke
android:color="#color/white"
android:width="1dp" />
</shape>
</item>
</layer-list>
After that, you just have to declare it in your style.xml as:
<item ...>#drawable/blue_divider</item>.
Now you have customize divider (=
Then, your custom layout in ActionBar.
It's possible to do as below:
ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.application_status_overflowmenu);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM|
ActionBar.DISPLAY_SHOW_HOME);
And application_status_overflowmenu.xml will be something like:
<RelativeLayout
android="#+id/theCustomIcon"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_gravity="right" android:gravity="center"
android:paddingLeft="10dp" android:paddingRight="10dp"
android:clickable="true" >
<ImageView
android:id="#+id/blockCustomIcon"
android:layout_width="50dp" android:layout_height="50dp"
android:src="#drawable/green_block"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
<ImageView
android:id="#+id/imgCustomIcon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/green_block"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/blockCustomIcon" />
<TextView
android:id="#+id/txtCustomIcon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/green_block"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:gravity="left" />
</RelativeLayout>
And finally, you can have access to the Views to update the items:
TextView text = (TextView) actionBar.getCustomView().findViewById(R.id.txtCustomIcon);
text.setText("Emily Nichols");
That's all!
If your menu options disappears, check if your onCreateOptionsMenu is inflating a good layout and if it return true. You can also add the custom item in front of options menu or add item dynamically. I let you do this as you want.
I hope this will be useful and it will helpful too.

Changing button style in the whole application

I'm trying to change all the TextColor of my buttons in my app to white and also trying to make it bold. But that isn't happening, I'm overwriting the android:Widget.Button
I'm developing for Jelly Bean 4.1.2
What am I doing wrong?
Theme definition in manifest
android:theme="#style/spui" >
The theme where I like to
<style name="spui" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:buttonStyle">#style/Buttonspui</item>
</style>
The style for the button itself
<style name="Buttonspui" parent="android:Widget.Button">
<item name="android:background">#drawable/btn_default_holo_light</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">64dip</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textStyle">bold</item>
</style>
The button
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/edit"
android:id="#+id/btnEdit"
style="#style/Buttonspui"/>

For styling your Button you can use this:
Go to the drawable folder and make an XML (e.g. button.xml) file called "style" which contains the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient android:startColor="#449def" android:endColor="#2f6699" android:angle="270" />
<stroke android:width="1px" android:color="#000000" />
<corners android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
</shape>
</item>
</selector>
This is my code, you can make the necessary changes you want
Now call it in your layout XML (mainactivity.xml) like this
android:background="#drawable/button.xml"
Now to change the font color and style you can use the following which comes as part of the styles.xml in the values folder
<style name="buttonStyle" parent="#android:style/Widget.Button.Small">
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">12sp</item>
<item name="android:textStyle">bold</item>
</style>
Now call this in the layout XML (mainactivity.xml) like this
style="#style/buttonStyle"
The final code is:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/edit"
android:id="#+id/btnEdit"
android:background="#drawable/button.xml"
style="#style/buttonStyle"
/>
Hope this helps :)

This will change the default button style for the entire app, include alert dialog button. Adjust the style based on yours.
res/values/styles.xml
<resources>
<!-- Your base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Other styles -->
<item name="buttonStyle">#style/MyCustomButton</item>
</style>
<style name="MyCustomButton" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/selector_button</item>
<item name="android:textColor">#color/buttonText</item>
<item name="android:textStyle">bold</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
</style>
</resources>
res/drawable/selector_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_selected" android:state_pressed="true"/>
<item android:drawable="#drawable/button_selected" android:state_focused="true"/>
<item android:drawable="#drawable/button_unselected"/>
</selector>
res/drawable/button_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp"/>
<solid android:color="#color/buttonSelected"/>
</shape>
res/drawable/button_unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp"/>
<solid android:color="#color/buttonUnselected"/>
</shape>