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.
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.
I am trying to set a border for few of the image buttons for a particular screen layout in android. But for some buttons, I want to disable the border if the screen-layout background is blue colour. Please help me how to do this?
(I assume you design your app with Material Theme)
I think you can't do it (maybe possible with some hacky technique), because it's not intended to be that way.
Google has designed each view to underline each of their own purposes. So, I believe, If you can modify a button that way, it won't felt like a button to users thus can raise some misunderstanding.
What possibly user think if such button that doesn't have default blue, exist? Do they still think that as a Button?
Personally, I suggest that you leave the border as-is, if you still intended to make it feels like a Button.
Otherwise, if you really need it, you can always use CardView, put an ImageView inside it and attach OnClickListener to it. I think the result is quite similar because almost every rectangular view Google has nowadays, got similar visual to CardView.
Btw, I made this in my recent project to achieve a borderless Button-ey Image. Maybe it'll help.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardElevation="4dp"
card_view:cardUseCompatPadding="true"
card_view:contentPadding="0dp">
<ImageView
android:id="#+id/clickable_photo_thumbnail_image_view"
android:layout_width="#dimen/photo_thumbnail_size"
android:layout_height="#dimen/photo_thumbnail_size"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
</android.support.v7.widget.CardView>
(UPDATE) This is the screenshot from my app, produced with above code:
(In my screenshot, I already use a RecyclerView)
I am having one contact form in which I would like to add some icons to my edit text for a better look. I want to create EditText something like below.
I have EditText like below. And I got the result something like. I want the image to be absolutely on the left side as it is in the above image. I know that internally EditText is using Nine Patch image and i think that is why the result is some what different. Can anyone know how to resolve this?
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="51dip"
android:hint="#string/name"
android:inputType="text"
android:drawableLeft="#drawable/name_icon_edittext" />
Instead of using android:drawableLeft="#drawable/name_icon_edittext", create separateImageView for the name_icon.
This way you have more control on placing it on the layout
Note: I am assuming your layout is RelativeLayout
if you want to add some space between you text and image then use'drawablePadding' property in xml
android:drawablePadding="10dp"
here is complete example how to use in edittext in xml file
<EditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_left"
android:drawablePadding="10dp" />
You can use android:drawablePadding="10dp" property in the xml file.
There's no need to create separate imagview for the icon.
A bit old, but for future reference maybe:
I would do a 9-patch image myself with the appearance you want, keeping the proportions and all but the icon, so you can add it yourself (and reuse the background) with drawableLeft property of EditText. That way only the middle part of the image will be stretched but the rest will stay the same.
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?
I have a big problem. I want to create a control for android in which the user sees an image and over lapping this image are smaller icons/image which are positioned relative to background image.
The smaller icons can be selected.
I really do not know how to go about it.
You could do this by having a clean image as background, like this:
and then you could have TextViews within a RelativeLayout with the names for example, and on every textView you can set the attribute clickable to your method.
Something like this:
<TextView
android:id="#+id/nevada"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/Oregon"
android:layout_marginRight="50dp"
android:layout_marginTop="21dp"
android:layout_toLeftOf="#+id/Cali"
android:clickable="true"
android:onClick="showState"
android:text="#string/Nevada"
android:textColor="#color/contact_map_text_color" />
and on your activity/fragment you will have your method that will be called by the View, in the example case: "showState"
Edit: its probably not the best approach but it certainly works