Home/ Questions/Q 9085013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T21:08:32+00:00

On an iOS App I saw such a Button: The same I would like

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0