Creating such a Button with Android? (Inspired by iOS)

Question

On an iOS App I saw such a Button:

enter image description here

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:

enter image description here

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!

I have no experience in iOS App development, so maybe u know what it is for Android? — eMi, Jan 07 '13 at 15:32
A bit of googling gave me this; http://docs.xamarin.com/android/Recipes/Resources/General/Style_a_Button — dutt, Jan 07 '13 at 15:33

score 4 · Accepted Answer · answered Jan 07 '13 at 16:17

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).

enter image description here

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

score 0 · Answer 2 · answered Jan 07 '13 at 15:32

0

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.

answered Jan 07 '13 at 15:32

TNR

5,839
3
33
62

There is no such Button Control in Android? really – ρяσѕρєя K Jan 07 '13 at 15:34
you have to design it as it look like of iOS but there is no direct control – TNR Jan 07 '13 at 15:34

score 0 · Answer 3 · answered Jan 07 '13 at 15:39

0

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

answered Jan 07 '13 at 15:39

noni

2,927
19
18

score 0 · Answer 4 · answered Jan 07 '13 at 15:56

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.

thx for the answer, anyway, I got errormessages, that there is no resource found for the 3 `@drawables/..` and the other thing is that it should be a control or something else, where I can attach a Clickevent — eMi, Jan 08 '13 at 08:04

score -1 · Answer 5 · edited May 23 '17 at 12:31

-1

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.

edited May 23 '17 at 12:31

Community

1
1

answered Jan 07 '13 at 15:39

th30perator

66
6

Creating such a Button with Android? (Inspired by iOS)

5 Answers5