By Codesen


2012-07-30 07:41:06 8 Comments

I need a UIButton with image & text. Image should be in the top & text comes under the image both should be clickable.

11 comments

@Alok 2017-09-07 15:50:48

Xcode-9 and Xcode-10 Apple done few changes regarding Edge Inset now, you can change it under size-inspector.

Please follow below steps:

Step-1: Input text and select image which you want to show:

enter image description here

Step-2: Select button control as per your requirement as shown in below image:

enter image description here

Step-3: Now go-to size inspector and add value as per your requirement:

enter image description here

@Vinodh 2012-07-30 08:10:34

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

but following code will show label above and image in background

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.background.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

There is no need to use label and button in same control because UIButton has UILabel and UIimageview properties.

@Codesen 2012-07-30 08:28:22

I need to position the image in the top & the text below the image both should be clickable..

@Vinodh 2012-07-30 08:29:36

you can use my first part of the code

@Mohamed Saleh 2016-01-01 00:43:17

Check this awesome lib ImageCenterButton It solves all the problems that other libs faces and I confirm it works with iOS 9

enter image description here

@holex 2012-08-03 09:17:31

I think you are looking for this solution for your problem:

UIButton *_button = [UIButton buttonWithType:UIButtonTypeCustom];
[_button setFrame:CGRectMake(0.f, 0.f, 128.f, 128.f)]; // SET the values for your wishes
[_button setCenter:CGPointMake(128.f, 128.f)]; // SET the values for your wishes
[_button setClipsToBounds:false];
[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal]; // SET the image name for your wishes
[_button setTitle:@"Button" forState:UIControlStateNormal];
[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];
[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; // SET the colour for your wishes
[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; // SET the colour for your wishes
[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, -110.f, 0.f)]; // SET the values for your wishes
[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside]; // you can ADD the action to the button as well like

...the rest of the customisation of the button is your duty now, and don't forget to add the button to your view.

UPDATE #1 and UPDATE #2

or, if you don't need a dynamic button you could add your button to your view in the Interface Builder and you could set the same values at there as well. it is pretty same, but here is this version as well in one simple picture.

you can also see the final result in the Interface Builder as it is on the screenshot.

enter image description here

@Badal Shah 2015-12-03 12:23:38

EdgeInsets only works when you have "set button image" and when you set button image you cant see title. And if you set background image then EdgeInsets can not apply to image . and you can see title. So, you can't set edgeinsect to both at same time.

@holex 2015-12-03 13:13:41

@BadalShah, yes, there are some scenarios (depending on button's size, image size, title's length, etc...) when what you said is true and you can't see the title and the image at the same time because the image pushes out the title of the visible area; but that scenario is not a generic at all, the generic situation is that both title and image could and will appear at the same time.

@Rajneesh071 2012-07-30 07:55:55

Make UIImageView and UILabel, and set image and text to both of this....then Place a custom button over imageView and Label....

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search.png"]];
    imageView.frame = CGRectMake(x, y, imageView.frame.size.width, imageView.frame.size.height);
    [self.view addSubview:imageView];

UILabel *yourLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, y,a,b)];
yourLabel.text = @"raj";
[self.view addSubview:yourLabel];

UIButton * yourBtn=[UIButton buttonWithType:UIButtonTypeCustom];
[yourBtn setFrame:CGRectMake(x, y,c,d)];
[yourBtn addTarget:self action:@selector(@"Your Action") forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:yourBtn];  

@DawnSong 2017-04-15 10:22:32

Simple and useful. How to set highlighted image and title?

@Rajneesh071 2017-05-25 10:13:31

for lable setHighlightedTextColor and you have to play with forControlEvents

@Angel G. Olloqui 2012-08-07 13:45:51

I see very complicated answers, all of them using code. However, if you are using Interface Builder, there is a very easy way to do this:

  1. Select the button and set a title and an image. Note that if you set the background instead of the image then the image will be resized if it is smaller than the button.IB basic image and title
  2. Set the position of both items by changing the edge and insets. You could even control the alignment of both in the Control section.

IB position set IB Control set

You could even use the same approach by code, without creating UILabels and UIImages inside as other solutions proposed. Always Keep It Simple!

EDIT: Attached a small example having the 3 things set (title, image and background) with correct insets Button preview

@Tim Mahoney 2012-08-08 22:41:08

This is correct. You'll want to use the edge insets on the title and image to align the two correctly. You can do this in code by setting the titleEdgeInsets and contentEdgeInsets properties.

@holex 2012-08-09 09:42:37

yes, it is almost correct. just you have to set the Background image instead of the Image, otherwise you won't see the title not even set the inset values to reposition the title.

@Angel G. Olloqui 2012-08-09 10:00:38

Not correct? Actually, you can see the title, the image and the background, all together. I am using this technique for my buttons and it works correctly.

@holex 2012-08-09 10:37:28

@AngelGarcíaOlloqui, positive, it is not working. a minute ago I've tried your version in Xcode 4.4 on a real device, the Title did not shown when you set the Image and the Title together and the Title does not show in the Interface Builder either, in my experience they have never worked together because the Image always override the Iitle.

@Angel G. Olloqui 2012-08-10 13:23:15

It does work but you have to change the content insets for both (title and image), setting values that do not overlap with each other. We are using this trick in many different buttons, all of them with a background (a gray button shape for example), an image on the left (a share icon for example) and a text (the share text for example). Check it again, it is a a great way to create such buttons!

@Angel G. Olloqui 2012-08-10 13:27:46

I edited my answer with a small screenshot of a button with the 3 properties set and working. I hope it helps :)

@brians 2013-01-02 22:20:23

I had trouble with this too. If your title is not showing up, try setting a negative left offset for it. It looks like IB automatically pushes it out to the right of the image.

@Van Du Tran 2013-07-12 15:06:07

Can you give an example of what insets value we have to set for both Image and Title to appear? I can't get the Title to appear..

@james0n 2013-08-19 11:25:54

For Content, set Inset left & right 0. For Image, set Inset left 0 and right e.g. 50. For Title, set Inset left -51 and right 0.

@phil 2013-09-15 12:10:32

I found that once I set an image it wiped out the text attributes. I reset those (font, colour, etc) and then everything was fine!

@Scott Allen 2014-01-13 20:43:05

I had to change my control alignment to the two far right options (vertical two-sided arrow, and horizontal two-sided arrow) to get this to work.

@Dinakar 2015-02-26 10:51:24

Guys, my issue was resolved when I set negative left offset as @brians suggested. I think brians is right that text is being pushed towards right.

@flohei 2016-03-09 20:39:48

This does only display the image and the text side by side, right? Is there a way to change the orientation from top to bottom? This is what the original question states and what I'm looking for as well. Thanks!

@Micah Montoya 2016-10-17 18:39:44

For those using Xcode 8, you may not see the Edge property. The text may disappear after adding an image as well. It changes the text to white and if you are on a white background, it looks like it disappeared. Change the text color and it'll appear close to the image. You can the adjust the insets under Size inspector.

@rickrvo 2017-11-13 21:47:34

Thanks for this answer. it helped me understand better the interface builder. Now is there a way to resize the image in the button? like, how could I force the image to be 32x32 on a 375x80 button?

@AnthoPak 2018-04-11 14:57:20

I had the problem of "invisible label", and solved it in reducing image size (in Preview.app). I was using a 500*500 icon for a 100*30 button…

@Oyashiro 2012-08-09 11:32:34

I encountered the same problem, and I fix it by creating a new subclass of UIButton and overriding the layoutSubviews: method as below :

-(void)layoutSubviews {
    [super layoutSubviews];

    // Center image
    CGPoint center = self.imageView.center;
    center.x = self.frame.size.width/2;
    center.y = self.imageView.frame.size.height/2;
    self.imageView.center = center;

    //Center text
    CGRect newFrame = [self titleLabel].frame;
    newFrame.origin.x = 0;
    newFrame.origin.y = self.imageView.frame.size.height + 5;
    newFrame.size.width = self.frame.size.width;

    self.titleLabel.frame = newFrame;
    self.titleLabel.textAlignment = UITextAlignmentCenter;

}

I think that the Angel GarcĂ­a Olloqui's answer is another good solution, if you place all of them manually with interface builder but I'll keep my solution since I don't have to modify the content insets for each of my button.

@Angel G. Olloqui 2012-08-10 13:29:24

But it does work ;) check my comments and edit

@Dhruv 2012-08-07 11:44:49

It's really simple,just add image to background of you button and give text to titlelabel of button for uicontrolstatenormal. That's it.

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];

@holex 2012-08-09 08:45:14

...and how does the text go under the image?

@Dhruv 2012-08-09 09:36:40

@holex : Thank you very much for directing me,I found flaw in it and then changed accordingly.

@Hemant Dixit 2012-08-06 10:02:42

Use this code:

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(0, 10, 200, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] 
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton]

@iPhone Developer 2012-07-30 07:45:58

Use this code:

UIButton *button=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    button.imageView.frame=CGRectMake(0.0f, 0.0f, 50.0f, 44.0f);///You can replace it with your own dimensions.
    UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0.0f, 35.0f, 50.0f, 44.0f)];///You can replace it with your own dimensions.
    [button addSubview:label];

@Prasad G 2012-08-03 11:18:47

You should create custom imageview for image and custom label for text and you add to your button as subviews. That's it.

UIButton *yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.backgroundColor = [UIColor greenColor];
yourButton.frame = CGRectMake(140, 40, 175, 30);     
[yourButton addTarget:self action:@selector(yourButtonSelected:) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:yourButton];

UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, yourButton.frame.size.width, yourButton.frame.size.height/2)];
imageView1.image =[UIImage imageNamed:@"images.jpg"];
[yourButton addSubview:imageView1];

UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, yourButton.frame.size.height/2, yourButton.frame.size.width, yourButton.frame.size.height/2)];
label.backgroundColor = [UIColor greenColor];
label.textAlignment= UITextAlignmentCenter;
label.text = @"ButtonTitle";
[yourButton addSubview:label];

For testing purpose, use yourButtonSelected: method

-(void)yourButtonSelected:(id)sender{
    NSLog(@"Your Button Selected");

}

I think it will be helpful to you.

Related Questions

Sponsored Content

34 Answered Questions

[SOLVED] How do I create a basic UIButton programmatically?

23 Answered Questions

[SOLVED] Xcode error "Could not find Developer Disk Image"

  • 2015-06-09 15:48:57
  • Nathan Kramer
  • 532480 View
  • 864 Score
  • 23 Answer
  • Tags:   ios iphone xcode

26 Answered Questions

[SOLVED] UIButton: how to center an image and a text using imageEdgeInsets and titleEdgeInsets?

10 Answered Questions

[SOLVED] How to change UIButton image in Swift

91 Answered Questions

48 Answered Questions

[SOLVED] Vertically align text to top within a UILabel

15 Answered Questions

[SOLVED] Color Tint UIButton Image

13 Answered Questions

[SOLVED] Aligning text and image on UIButton with imageEdgeInsets and titleEdgeInsets

11 Answered Questions

[SOLVED] Setting an image for a UIButton in code

1 Answered Questions

Sponsored Content