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.
Related
I have the following button:
<Button
android:id="#+id/addexperience_button"
style="#style/MyButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/emptystate_image"
android:layout_alignRight="#id/emptystate_image"
android:layout_below="#id/emptystate_image"
android:text="#string/pickdetail_addexperience" />
with this styling:
<style name="MyButton" parent="AppTheme">
<item name="android:textColor">#color/white</item>
<item name="android:paddingLeft">#dimen/single_spacing</item>
<item name="android:paddingRight">#dimen/single_spacing</item>
<item name="android:background">#drawable/bg_primarybutton</item>
</style>
bg_primarybutton:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="6dp"
android:insetLeft="4dp"
android:insetRight="4dp"
android:insetTop="6dp">
<ripple android:color="?android:attr/colorControlHighlight">
<item>
<shape
android:shape="rectangle"
android:tint="#color/colorPrimary">
<corners android:radius="18dp" />
</shape>
</item>
</ripple>
</inset>
Now this button looks like this with 28.0.0-alpha1:
But looks like this with alpha2, alpha3 and rc01:
How come its ignoring my styling on a later version (esp. a RC?) Maybe there is something fundamentally wrong on my Button definition?
The reason for that is because of your AppTheme being Theme.MaterialComponents.Light.NoActionBar, the inflater of your activity is inflating a MaterialButton instead of a Button and you can't change the background of a MaterialButton the same way of an old Button (see doc) .
If you want to have the same style as before, replace your MyButton style with
<style name="MyButton">
<item name="android:textColor">#color/white</item>
<item name="android:paddingLeft">#dimen/single_spacing</item>
<item name="android:paddingRight">#dimen/single_spacing</item>
<item name="backgroundTint">#color/colorPrimary</item>
<item name="cornerRadius">18dp</item>
<item name="rippleColor">?android:attr/colorControlHighlight</item>
</style>
Note that you should not extend your AppTheme when writing a style (that will be used in the style="#style/MyStyle attribute) for a View.
They introduced the auto inflation of MaterialButton with the alpha2.
Open the class android.support.design.theme.MaterialComponentsViewInflater on alpha1 and alpha2 to see the difference.
If you DO NOT want this behavior of auto inflating MaterialButton change your AppThemeto be
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
I'm trying to define a custom color for my app's theme.
Here is how I do:
define custom attribute:
<declare-styleable name="ApplicationStyle">
<attr name="colorWeekdaysBg" format="color"/>
</declare-styleable>
Define an application style:
<style name="ApplicationStyle" parent="Theme.AppCompat.NoActionBar">
<item name="android:editTextStyle">#style/EditTextStyle</item>
<item name="colorPrimaryDark">#color/dark_blue</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorAccent">#color/dark_blue</item>
<item name="colorWeekdaysBg">#color/access_weekdays</item>
</style>
Set style in the manifest:
<application
android:name=".App"
android:icon="#drawable/icon_launcher"
android:label="#string/app_name"
android:theme="#style/ApplicationStyle">
Use this attribute in the drawable xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="?colorWeekdaysBg" />
<corners
android:bottomLeftRadius="100dp"
android:topLeftRadius="100dp" />
</shape>
</item>
</layer-list>
But for some reason it does not apply my color to the drawable. It applies a transparent color instead.
One more strange thing is if I replace my ?colorWeekdaysBg with ?colorAccent, which is defined in the Theme.AppCompat, then it applies correct color.
So finally the question: Do you have any idea why it doesn't work, and how to fix it?
As per answer give by mudit here it is a bug in the pre-lollipop OS.
It is reported in Google's Issue Tracker.
In the devices which have Android Lollipop and above OS version it will work fine.
Check below code:
attr.xml
<declare-styleable name="AppTheme">
<attr name="colorWeekdaysBg" format="color|reference" /> <!-- Or you can keep color only. It will be ok -->
</declare-styleable>
You have to set the attribute in the v21 style file. Might be you missed this one.
v21\styles.xml
<!-- 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:splitMotionEvents">false</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:navigationBarColor">#color/black</item>
<item name="colorWeekdaysBg">#color/access_weekdays</item>
</style>
Create two drawable files to get it work on all devices. One for normal i.e. pre-lollipop version and another for Lollipop and above i.e. v21 drawable.
your_drawable.xml In this you have to set color from the color file.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/access_weekdays" />
<corners
android:bottomLeftRadius="100dp"
android:topLeftRadius="100dp" />
</shape>
</item>
</layer-list>
v21\your_drawable.xml In this file you can set custom attribute like you did.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="?colorWeekdaysBg" />
<corners
android:bottomLeftRadius="100dp"
android:topLeftRadius="100dp" />
</shape>
</item>
</layer-list>
your_layout.xml In your layout you can give that drawable as below
<Button
android:id="#+id/btnTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_drawable"
android:text="Test Text" />
Now check the answers of your questions.
But for some reason it does not apply my color to the drawable. It applies a transparent color instead.
Because you may not have defined your attribute in v21 style.xml file
One more strange thing is if I replace my ?colorWeekdaysBg with ?colorAccent, which is defined in the Theme.AppCompat, then it applies the correct color.
Android Studio displays color in preview but when you will run the application and reached on that screen your application will be crash with the Error inflating class error
android.view.InflateException: Binary XML file line #68: Error inflating class Button
So finally the question: Do you have any idea why it doesn't work, and how to fix it?
I think now you have got the idea that why it doesn't work and how to fix it.
Here is the link to what I have in mind.
https://dribbble.com/shots/1407665-Categories/attachments/204971
Is there a popular library anyone knows that can manage this, otherwise I am alright with going the customizing route.
I have my 9 buttons defined in my XML no problem.
Next I know I have to create a xml file in the drawable folder like "button_shape.xml". Then I add this to my code:
android:background="#drawable/button_shape"
I make my button have an image, I assume with:
android:drawableTop="#drawable/buttonImage"
I guess lastly is how do I create a shape that keeps the bottom colour a consistent size with the text. While allowing different button sizes. Also can I easily alternate the colours by setting the style on each button and defining them as so:
<style name ="ButtonTheme.Custom1" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_blue_light</item>
<item name="colorPrimaryDark">#android:color/holo_blue_dark</item>
</style>
<style name ="ButtonTheme.Custom2" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_green_light</item>
<item name="colorPrimaryDark">#android:color/holo_green_dark</item>
</style>
<style name ="ButtonTheme.Custom3" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_red_light</item>
<item name="colorPrimaryDark">#android:color/holo_red_dark</item>
</style>
<style name ="ButtonTheme.Custom4" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_orange_light</item>
<item name="colorPrimaryDark">#android:color/holo_orange_dark</item>
</style>
<style name ="ButtonTheme.Custom5" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_blue_bright</item>
<item name="colorPrimaryDark">#android:color/holo_blue_light</item>
</style>
My custom shape so far is this, which is close; but how can I make the darker color keep a consistent size while the other moves according to size of button?
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:top="120dp">
<shape android:shape="rectangle" >
<size android:height="120dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
You can use RecyclerView and StaggeredGrid
https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html
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
I have a style for button like : http://ace-subido.github.io/css3-microsoft-metro-buttons/buttons.html (See Stripped button).
But I want to be able to use this style for different colors without recreating 4 xml files (a selector drawable + 3 button states drawables with layer list).
In a btn_stripped_orange.xml (and 2 other xml for different button states) I have a color
With this syntax, evrything is ok :-)
But instead of creating 4 new xml files for every different colors, I want to "pass a color" to btn_stripped_orange.xml (so I should rename it to btn_stripped.xml).
In style.xml I have to call #drawable/btn_stripped_orange_selector
after this btn_stripped_orange_selector call
I think I have to pass the border_color variable to the style in styles.xml with call #drawable/btn_stripped_orange_selector
I want to just create new style with the #drawable/btn_stripped_orange_selector as android:background (and rename it) and the color varaible
This is the code that I'm trying to do (no error in eclipse, but app crash on run), If I replace ?attr/border_color with a color #color/orange for exemple, it works perfectly. I think it's just a syntax problem.
My themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="btn_orange" parent="#style/btStripped1">
<item name="border_color">#attr/border_color</item>
</style>
<attr name="border_color" format="color" />
</resources>
My btn_stripped_orange_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_stripped_orange_press" />
<item android:state_focused="true" android:drawable="#drawable/btn_stripped_orange_focus" />
<item android:drawable="#drawable/btn_stripped_orange" />
</selector>
My btn_stripped_orange.xml (nearly the same than _focus and _press) :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="?attr/border_color" />
</shape>
</item>
<item android:left="5dp">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item android:left="5dp">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
</layer-list>
Finally in my styles.xml
<resources>
.....
<style name="btStripped1">
<!-- I want to pass a color variable here -->
<item name="android:background">#drawable/btn_stripped_orange_selector</item>
<item name="android:padding">6dp</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:shadowColor">#android:color/white</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">1</item>
</style>
....
</resources>
I want a pure xml solution but if it's impossible and you have a solution with a bit of java code, your're welcome !
Thank you very very much for your help and sorry for average english !