Android combining text image on a Button or ImageButton

Question

I m trying to have an image  as the background  on a button and add dynamically  depending on what s happening during run-time  some text above over the image   If I use ImageButton I don t even have the possibility to add text  If I use Button I can add text but only define an image with android drawableBottom and similar XML attributes as defined here   However these attributes only combine text  amp  image in x- and y-dimensions  meaning I can draw an image around my text  but not below under my text  with the z-axis defined as coming out of the display    Any suggestions on how to do this  One idea would be to either extend Button or ImageButton and override the draw  -method  But with my current level of knowledge I don t really know how to do this  2D rendering   Maybe someone with more experience knows a solution or at least some pointers to start

User · Answer

lt Button android id    id imeageTextBtn           android layout width  240dip          android layout height  wrap content          android text  Side Icon With Text Button          android textSize  20sp          android drawableLeft   drawable left side icon                     gt

User · Answer

You can use drawableTop  also drawableLeft  etc  for the image and set text below the image by adding the gravity left center vertical   lt Button             android id    id btn video              android layout width  wrap content              android layout height  wrap content              android layout alignParentRight  true              android layout centerVertical  true              android background   null              android drawableTop   drawable videos              android gravity  left center vertical              android onClick  onClickFragment              android text  Videos              android textColor   color white    gt

User · Answer

lt Button      android id    id groups button bg       android layout height  wrap content       android layout width  wrap content       android text  Groups       android drawableTop   drawable  image     gt    android drawableLeft android drawableRight android drawableBottom android drawableTop   http   www mokasocial com 2010 04 create-a-button-with-an-image-and-text-android

User · Answer

You can use this      lt Button                     android id    id reset all                      android layout width  wrap content                      android layout height  wrap content                      android layout marginRight  5dp                      android layout weight  1                      android background   drawable btn med                      android text  Reset all                      android textColor   ffffff    gt                    lt Button                     android id    id undo                      android layout width  wrap content                      android layout height  wrap content                      android layout marginLeft  5dp                      android layout weight  1                      android background   drawable btn med                      android text  Undo                      android textColor   ffffff    gt    in that i have put an image as background and also added text

User · Answer

You can call setBackground   on a Button to set the background of the button   Any text will appear above the background   If you are looking for something similar in xml there is  android background attribute which works the same way

User · Answer

Just use a LinearLayout and pretend it s a Button - setting background and clickable is the key    lt LinearLayout     android id    id button      android layout width  wrap content      android layout height  wrap content      android background   android drawable btn default      android clickable  true      android orientation  horizontal   gt        lt ImageView         android id    id img          android layout width  wrap content          android layout height  wrap content          android layout gravity  center vertical          android layout marginLeft  5dp          android src   drawable image    gt        lt TextView         android id    id textView2          android layout width  wrap content          android layout height  wrap content          android layout gravity  center vertical          android layout margin  5dp          android text  Do stuff    gt   lt  LinearLayout gt

User · Answer

There s a much better solution for this problem   Just take a normal Button and use the drawableLeft and the gravity attributes    lt Button   android layout width  fill parent    android layout height  wrap content    android drawableLeft   drawable my btn icon    android gravity  left center vertical    gt    This way you get a button which displays a icon in the left side of the button and the text at the right site of the icon vertical centered

User · Answer

lt ImageView         android id    id iv          android layout width  match parent          android layout height  match parent          android scaleType  centerCrop          android src   drawable temp            gt

User · Answer

This code works for me perfectly                             lt LinearLayout     android id    id choosePhotosView      android layout width  match parent      android layout height  wrap content      android orientation  horizontal      android gravity  center      android clickable  true      android background   drawable transparent button bg rev selector  gt        lt ImageView         android layout width  wrap content          android layout height  wrap content          android src   drawable choose photo   gt         lt TextView         android layout width  wrap content          android layout height  wrap content          android textColor   android color white          android text   string choose photos tv   gt    lt  LinearLayout gt

User · Answer

Important Update     Don t use normal android drawableLeft etc    with vector drawables  else it   will crash in lower API versions   I have faced it in live app    For vector drawable  If you are using vector drawable  then you must    Have you migrated to AndroidX  if not you must migrate to AndroidX first  It is very simple  see what is androidx  and how to migrate  It was released in version 1 1 0-alpha01  so appcompat version should be at least 1 1 0-alpha01  Current latest version is 1 1 0-alpha02  use latest versions for better reliability  see release notes - link       implementation  androidx appcompat appcompat 1 1 0-alpha02   Use AppCompatTextView AppCompatButton AppCompatEditText  Use app drawableLeftCompat  app drawableTopCompat  app drawableRightCompat  app drawableBottomCompat  app drawableStartCompat and app drawableEndCompat   For regular drawable  If you don t need vector drawable  then you can    use android drawableLeft  android drawableRight  android drawableBottom  android drawableTop  You can use either regular TextView  Button  amp  EditText or AppCompat classes    You can achieve Output like below -

User · Answer

lt Button             android layout width  0dp              android layout weight  1              android background   drawable home button              android drawableLeft   android drawable ic menu edit              android drawablePadding  6dp              android gravity  left center              android height  60dp              android padding  6dp              android text  AndroidDhina              android textColor   000              android textStyle  bold    gt

User · Answer

I took a different approach from the ones stated here  and it is working really well  so I wanted to share it   I m using a Style to create a custom button with image at the left and text at the center-right  Just follow the 4  easy steps  below   I  Create your 9 patches using at least 3 different PNG files and the tool you have at   YOUR OWN PATH android-sdk-mac x86 tools   draw9patch  After this you should have   button normal 9 png  button focused 9 png and button pressed 9 png  Then download or create a 24x24 PNG icon   ic your icon png  Save all in the drawable  folder on your Android project   II  Create a XML file called button selector xml in your project under the drawable  folder  The states should be like this    lt item android state pressed  true  android drawable   drawable button pressed    gt   lt item android state focused  true  android drawable   drawable button focused    gt   lt item android drawable   drawable button normal    gt    III  Go to the values  folder and open or create the styles xml file and create the following XML code    lt style name  ButtonNormalText  parent   android style Widget Button  gt       lt item name  android textColor   gt  color black lt  item gt       lt item name  android textSize   gt 12dip lt  item gt       lt item name  android textStyle   gt bold lt  item gt       lt item name  android height   gt 44dip lt  item gt       lt item name  android background   gt  drawable button selector lt  item gt       lt item name  android focusable   gt true lt  item gt       lt item name  android clickable   gt true lt  item gt   lt  style gt    lt style name  ButtonNormalTextWithIcon  parent  ButtonNormalText  gt       lt item name  android drawableLeft   gt  drawable ic your icon lt  item gt   lt  style gt    ButtonNormalTextWithIcon is a  child style  because it is extending ButtonNormalText  the  parent style     Note that changing the drawableLeft in the ButtonNormalTextWithIcon style  to drawableRight   drawableTop or drawableBottom you can place the icon in other position with respect to the text   IV  Go to the layout  folder where you have your XML for the UI and go to the Button where you want to apply the style and make it look like this    lt Button android id    id buttonSubmit   android text   string button submit   android layout width  fill parent   android layout height  wrap content   style   style ButtonNormalTextWithIcon   gt  lt  Button gt    And    voil    You got your button with an image at the left side   For me  this is the better way to do it  because doing it this way you can manage the text size of the button separately from the icon you want to display and use the same background drawable for several buttons with different icons respecting the Android UI Guidelines using styles   You can also create a theme for your App and add the  parent style  to it so all the buttons look the same  and apply the  child style  with the icon only where you need it

User · Answer

just replace    android background   drawable icon    with  android background   android color transparent  android drawableTop   drawable  your background image here     izz a pretty good trick

User · Answer

MaterialButton has support for setting an icon and aligning it to the text   lt com google android material button MaterialButton         android layout width  quot wrap content quot          android layout height  quot wrap content quot          android text  quot My button quot          app icon  quot  drawable your icon quot          app iconGravity  quot textStart quot            gt   app iconGravity can also be to start   end if you want to align the icon to the button instead of the text inside it

User · Answer

For users who just want to put Background  Icon-Image and Text in one Button from different files  Set on a Button background  drawableTop Bottom Rigth Left and padding attributes    lt Button         android layout width  wrap content          android layout height  wrap content          android background   drawable home btn test          android drawableTop   drawable home icon test          android textColor   FFFFFF          android id    id ButtonTest          android paddingTop  32sp          android drawablePadding  -15sp          android text  this is text  gt  lt  Button gt    For more sophisticated arrangement you also can use RelativeLayout  or any other layout  and make it clickable    Tutorial  Great tutorial that covers both cases  http   izvornikod com Blog tabid 82 EntryId 8 Creating-Android-button-with-image-and-text-using-relative-layout aspx

User · Answer

Probably my solution will suit for a lot of users  I hope so   What I am suggesting it is making TextView with your style  It works for me perfectly  and has got all features  like a button    First of all lets make button style  which you can use everywhere   I am creating button with hover xml       lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state pressed  true   gt           lt shape android shape  rectangle    gt               lt corners android radius  3dip    gt               lt stroke android width  1dip  android color   8dbab3    gt               lt gradient android angle  -90  android startColor   48608F  android endColor   48608F     gt           lt  shape gt            lt  -- 284682 -- gt           lt  --border-color   223b6f -- gt       lt  item gt       lt item android state focused  true  gt           lt shape android shape  rectangle    gt               lt corners android radius  3dip    gt               lt stroke android width  1dip  android color   284682    gt               lt solid android color   284682   gt           lt  shape gt       lt  item gt       lt item  gt           lt shape android shape  rectangle    gt               lt corners android radius  3dip    gt               lt stroke android width  1dip  android color   color ControlColors    gt               lt gradient android angle  -90  android startColor   color ControlColors  android endColor   color ControlColors    gt           lt  shape gt       lt  item gt    lt  selector gt    Secondly   Lets create a textview button         lt TextView     android layout width  wrap content      android layout height  wrap content      android layout marginBottom  20dip      android layout gravity  right bottom      android gravity  center      android padding  12dip      android background   drawable button with hover      android clickable  true      android drawableLeft   android drawable btn star big off      android textColor   ffffffff      android text  Golden Gate    gt    And this is a result  Then style your custom button with any colors or any other properties and margins  Good luck

User · Answer

lt Button android id    id myButton       android layout width  150dp      android layout height  wrap content      android text  Image Button      android drawableTop   drawable myimage                 gt      Or you can programmatically   Drawable drawable   getResources getDrawable R drawable myimage   drawable setBounds 0  0  60  60   myButton setCompoundDrawables null  drawable  null  null    to the Top of the Button

[android] Android: combining text & image on a Button or ImageButton

Examples related to android

Examples related to image

Examples related to text

Examples related to button