I need a custom radio button with a custom background, centered text, an icon immediately before the text, but without the default indicator.
Currently, I have the following code:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="#null"
android:background="#drawable/bg_rbtn_custom"
android:drawableLeft="#drawable/icon"
android:text="Lorem ipsum…" />
The problem is the icon defined in drawableLeft, is pushed all the way to the left, i.e.
[icon]____Lorem ipsum…________
I need this:
____[icon]Lorem ipsum…________
The same thing happens when I use android:button="#drawable/icon; the icon is place at the left-most part of the View, and the text is then centred inside the left-over space (rather than being centred relative to the entire View). I am Android API 8, so I can't use drawableStart, so I need a way to duplicate its behaviour (at least I assume that's what it does). The text is dynamic, and will change at runtime, so I can't really hard code the padding.
My question is quite similar to this one, but that guy only needed a Button, but I need a RadioButton that'll work in a RadioGroup.
First thoughts would be to try
android:paddingLeft="#db"
where "#db" would be the number of pixels it would take to center everything
After trying your code and replacing the background and icon to local resources I had, I was unable to recreate the issue you are having. Could it be possible that the icon you are using has transparent pixels on its right edge?
Related
I'm trying to create such a list of items in android, I am able to complete almost everything except the orange ribbon on the right top corner, I tried different methods to achieve this UI element but none of them works properly for me. I tried rotating a text view by 45º with the ribbon image as background but the edges of the ribbon weren't perfect I also tried adding the ribbon as an image view and placed a text view on top of that but It was really difficult to place the ribbon and text view like this. So what is the easiest and most efficient way to achieve this?
Thanks in advance.
I don't think there is a native android component that supports such a feature. You can create a custom view making use of the path. Here is a great tutorial if you want to follow it.
Put this TextView into your FrameLayout/CardView:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff8f00"
android:textSize="16sp"
android:text="25% Off"
android:layout_gravity="end"
android:paddingStart="30dp"
android:paddingEnd="30dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="-20dp"
android:rotation="45"
/>
To achieve best look, play with padding and margin attributes.
On an iOS App I saw such a Button:
The same I would like to do in Android, how could I achieve this?
What I tried is the following code:
<Button
android:id="#+id/widget41"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Email1 testmail#gmail.com"
android:textStyle="bold" />
Looks something like that:
Well just a normal (ugly looking) Button. I have no idea, how I could style it like in iOS. Any suggestions or links would be appreciated!
The best solution would be to create your own custom view that behaves like the iOS counterpart (though, as other users have mentioned, Android does have it's own design guidelines, and the view that you are seeing is an iOS implementation that is designed for that platform).
If you look at the iOS image above (a copy of yours with some parts highlighted), I have split it up into sections.
You could use an Android ViewGroup like a LinearLayout to create the overall image, and give the LinearLayout a border or background (which can be a bitmap image of a rounded rectangle for example (See Android Nine Patch for an example of how to make this fit multiple screens).
Firstly, for the mail icon you would need a LeftAligned ImageView
with appropriate dimensions.
Next up we have a Bold TextView containing the text "Email1".
This is followed by another TextView which is blue and uses the
elipsize property (as defined in an Android XML layout) to create
"..." at the end once the text has reached the max width it can
consume. (Use android:ellipsize="end" in the XML)
Finally we have an indicator image, which again can be an ImageView
sized appropriately.
You could also achieve this with a RelativeLayout, which would allow you to RightAlign the indicator image, LeftAlign the mail icon, and allow the text to fill the space in between that it can get hold of.
Example of Nine Patch use for the background here
That is UITableView in iOS(just like ListView in android). It depends on the list item design you do it. There is no such Button Control in Android.
You should design your own button to looks like iOS one.
Android has it own design guidelines:
http://developer.android.com/design/patterns/pure-android.html
Well, as others have clearly mentioned there is no default Button in Android like this, and for your info neither is in iOS. Its all about the design. Anything is possible, in the end it all comes to how far are you willing to go to achieve it.
Below is a simple code, that will be close to your design.
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:background="#drawable/text_background"
android:drawableLeft="#drawable/envelope"
android:drawablePadding="10dp"
android:drawableRight="#drawable/right_arrow"
android:ellipsize="end"
android:gravity="center_vertical"
android:text="#string/email" />
There can be other ways also, like that whole view could be a ViewGroup, either a LinearLayout or a RelativeLayout and there could be multiple TextViews and ImageViews inside that.
Here is a tutorial for creating stylized android buttons. You can round the corners and change the background colors to look like the buttons in ios.
Here is a similar question.
Hope this helps.
I created a button with a 9patch image as a background. In the 9patch image I used the bottom and right lines to specify the content area/padding, to position the text on the button. This works well on a TextView, but on a Button the content lines seem to have no effect on the text position. Setting "paddingTop"/"paddingBottom" also seem to have no effect - only "padding" has any effect.
This is my layout XML:
<Button
android:layout_width="450dp"
android:layout_height="198dp"
android:text="Some text here"
android:gravity="center"
android:background="#drawable/my_button"/>
Is there any way to set the padding? Maybe I could use a different View instead of a Button? For example, I could try to just use a TextView and make it clickable, but I'm not sure what other side-effects this will have.
Explicitly setting android:padding="#null" solved my issue.
The issue seemed to be that a Button (or one of the styles in the theme I'm using) is setting the padding, which overrides all other padding in the button - padding in the background drawable, as well as paddingTop, paddingLeft etc.
My button layout is now defined like this:
<Button
android:layout_width="450dp"
android:layout_height="198dp"
android:text="Some text here"
android:gravity="center"
android:padding="#null"
android:background="#drawable/my_button"/>
My IDE (IntelliJ IDEA 11.1) picked up the #null as an error, even though it compiled. Setting it to -1px also worked.
If you use a 9-patch image as background, both the padding and the stretched areas are defined in the background.
It's quite graphic if you use the draw9patch tool: the padding is defined (indirectly) with the content area (lines on right and bottom):
http://developer.android.com/guide/developing/tools/draw9patch.html
Im trying to place an icon thats 16x16 pix within a normal button that I have in a layout. This button also uses another png for its background. The problem I have is not placing it within the button but placing it where I want. When I add it using the following code it places the drawable at the bottom but exactly on the edge of the image which looks terrible.
<Button
android:id="#+id/clearform"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/helpText"
android:layout_alignParentBottom="true"
android:layout_marginBottom="19dp"
android:typeface="monospace"
android:textColor="#FFFF00"
android:drawableBottom="#drawable/cross"
What I would like is to create a button in my layout that possibly has some padding from the bottom but there is no such method or xml attribute that does such a thing the way I would like. Its only left right top or bottom and when I added padding it only placed padding between the bottom of the text in the button and the top of the drawable.
So how can I accurately place an image within the button itself.
I think you can use android:padding for aligning to a greater extent & use android:paddingTop/Right/Left/Bottom to get the exact postion.It would be much easier.
Pretty much what the title says. I'm wanting the user to have the choice to customize the boarder of a 9 drawable I have. Is something like that possible or do I need to use a different method? Right now, I think it won't work and it will mess up the 9 patch.
Can you post a picture of your 9-patch? It might be possible to extract parts of it to another type of drawable, then layer the customizable part (drawn with user defined color) under the fixed portions using a layer-list.
[Update] Based on the pic you posted, I'd trash the layer list idea, but we can still work something out. The idea would be to remove the colored border and internal dark background from the 9-patch entirely (fill that area in with the shadow color and opacity). Then nest 3 layouts in each other. The first would use the 9-patch as a background. The second would use the user-defined color as a background. The third would use your panel color as a background. The 9-patch would provide the proper margins to position the second (user-color) layout, and then you'd just add a layout_margin attribute to the second panel to position the inner most layout a few dps in.
<LinearLayout
android:id="#+id/PanelOuter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shadow_nine_patch">
<LinearLayout
android:id="#+id/PanelUserBorder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/custom_border_width"
android:background="#color/dialog_border_color_default">
<LinearLayout
android:id="#+id/PanelContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/custom_dialog_content_margin"
android:background="#color/dialog_inner_color">
</LinearLayout>
</LinearLayout>
</LinearLayout>
Of course, you'd be responsible for finding the PanelUserBorder view in code and calling setBackgroundColor() with the proper user-defined color.
maybe you could tint it by putting a 50% transparent view overtop the button.
after thinking about it i thought maybe you could transform the color by bitmap:
How to change Bitmap image color in android?