CODEWITHSUNDEEP
androidbuttonstylesxamarin.android
eMi
eMi

Reputation: 5618

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

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 [email protected]"
    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!

Upvotes: 0

Views: 1929

Answers (5)

th30perator
th30perator

Reputation: 66

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.

Upvotes: -1

biddulph.r
biddulph.r

Reputation: 5266

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

  1. Firstly, for the mail icon you would need a LeftAligned ImageView with appropriate dimensions.
  2. Next up we have a Bold TextView containing the text "Email1".
  3. 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)
  4. 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

Upvotes: 4

Antrromet
Antrromet

Reputation: 15414

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.

Upvotes: 0

noni
noni

Reputation: 2947

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

Upvotes: 0

TNR
TNR

Reputation: 5869

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.

Upvotes: 0

Related Questions