0

Edit 4: I solved it by creating a larger font, one that does fill the space. See solution posted below

Edit 3: I have come to the conclusion that my problem as stated cannot be solved. The problem is that the fonts do not fill the image space because they are leaving room for descender like j and for umlauts above the capital letters. With further searching I find that negative padding, which is clearly what I need, is undefined so might do anything.

One solution would be to create custom fonts that fill the entire image space. Another is the suggestion below to use an imagebutton but my added complication of both needing a change in color on focus and a change in the basic image on program state complicates that solution to the point I can't figure that out.

Edit2: Added screen shot

Edit: Added code of drawable below.

I have tried every example I could find on stackoverflow and every answer from Google. I spent at least 3 hours last night before giving up. I sure could use some help on this if anyone knows the answer.

I have buttons on an Android app that is constrained in that the buttons can only be so big and the text in them needs to be readable in bright daylight so they need to be big. The solution is obvious, make the text a pixel smaller than the button. In other words, make the padding small. android:paddingTop="-10sp" does nothing. I have tried everything I could think of. To be clear, I want very little space between the top and bottom of the text inside a button and the edge of the button itself.

Here is an example of one of my buttons:

            <Button
        android:id="@+id/buttonSetTgt"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textHeader"
        android:layout_alignParentLeft="true"
        android:background="@drawable/button_start"
        android:textColor="@android:color/white"
        android:onClick="onSetTgt"
        android:paddingLeft="6sp"
        android:paddingRight="6sp"
        android:paddingTop="0sp"
        android:paddingBottom="0sp"
        android:text="&#x25CE;"
        android:textSize="@dimen/menu"
        android:textStyle="bold" />

button_start has some colors and rounded corners definitions.

It is shown with padding top and bottom of zero but negative numbers don't do the trick so the 0sp or -10sp are equivalent.

Here is the code for the drawable:

    <?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" >
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
         <solid android:color="#f07304"/> 
        <corners android:radius="7dp"/>
    </shape>
</item>
<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="#222222"/> 
        <corners android:radius="7dp"/>
    </shape>
</item>

enter image description here

Allen Edwards
  • 1,488
  • 1
  • 27
  • 44
  • Just try this, Instead using `Button` use `TextView`, keep this `xml` as it is, just replace `Button` with `TextView` and see if it gives the desired output or not. – MKJParekh Mar 22 '13 at 15:46
  • I see no difference with TextView. It is something I had tried but I tried it again after your suggestion, which I appreciate. I added the android:paddingBottom="-10sp" and android:paddingTop="-10sp" but it is the same as 0sp. Changing the -10sp to +10sp doubles the padding so I am pretty sure that it is -10sp that I want but it is being ignored. – Allen Edwards Mar 22 '13 at 15:53
  • I also tried modifying the padding inside the shape item in the background drawable. I can increase it but not decrease it. does nothing, for exampel. Positive numbers increase the padding. – Allen Edwards Mar 22 '13 at 16:06
  • Is button_start a .9.png? If so, how many pixels does it use up top and bottom? – Neil Townsend Mar 22 '13 at 16:45
  • button_start.xml is under res/drawable. – Allen Edwards Mar 22 '13 at 16:59

3 Answers3

1

there is a nice facility provided...Imagebutton...

design the image(jpeg or png) as you want...place your text as you want any where in your image and simply set android:src="@drawable/yourimage

and here you go you will have the look as you want...

you can handle the ImageButton as normal button

try and implement this...

karan
  • 8,637
  • 3
  • 41
  • 78
  • This sounds promising. Thanks. I will look into it. I probably should have mentioned that pressing the "@T" button changes the text to "@A" and the next time to "@S", then back to "@T". Can the image be changed programmatically? – Allen Edwards Mar 22 '13 at 18:26
  • yes,of course...search SO for more question over this...hope you can find it...or better ask another question...but before at least try this out first – karan Mar 22 '13 at 18:29
  • by the way you can upvote this if you find this proper...thnx – karan Mar 22 '13 at 18:30
  • I will give this a try. Kind of a pain as I have two screen sizes (tablets and phones) and many images but a solution is a solution. If it works I will mark it as a solution although a bit more detail would be welcome :-) – Allen Edwards Mar 22 '13 at 18:35
  • here is how you can change image programatically...http://stackoverflow.com/questions/11802893/changing-image-dynamically-in-an-imagebutton – karan Mar 22 '13 at 18:39
  • Cool. One last question (hopefully). Any guidance how I get it to change color when it is in focus? I use a bluetooth remote with this app and I need to know what is in focus. – Allen Edwards Mar 22 '13 at 18:46
  • i still not have implemented that stuff...but if i find i will post the solution ... or any reference of question – karan Mar 22 '13 at 18:54
0

Try using margin instead of padding. Also, is your button background drawable wide enough to accommodate the text while preserving its proportions?

geeky_chik
  • 28
  • 1
  • 5
  • Thanks for the suggestion. I tried it again just to make sure. Margins did nothing to the button background, either positive or negative ones. My understanding is that margins are outside the background of the button. I added the code for the drawable in my question. There is no width or height in the drawable. Perhaps I am using it wrong. – Allen Edwards Mar 22 '13 at 16:44
  • What happens if you set only paddingTop to 0sp and remove paddingBottom? Does that bring your text up? If that is the case, I would assume that the application is ignoring the padding when set for both Top and Bottom in order to preserve the text appearance. – geeky_chik Mar 22 '13 at 17:20
  • paddingTop="0sp" is the same as not having it. Only positive numbers do anything. This is with no paddingBottom line. – Allen Edwards Mar 22 '13 at 17:24
  • could you provide a screenshot of what your button looks like now? – geeky_chik Mar 22 '13 at 17:32
  • I added a screen shot of the page. For reference, the old style button like the one that says "GUN" is unreadable in use thus the larger one such as the "@T". But as you see, the background is too large and touches the readouts. The orange one has focus, the dark gray ones do not. – Allen Edwards Mar 22 '13 at 17:45
0

I found that you cannot specify negative padding so the solution was to make the fonts themselves larger, going almost all the way to where the padding starts. This means that t font needs to fill the area all the way to the top of the accent area and all the way down to the bottom of the descender area. What I did was found a program called Type 3.2 by CR8Software Solutions. You load your favorite font and copy one of the scaling actions to get a scale factor of about 1.56, make some adjustments to the baseline and font edges and save it. I probably could have gone a little bigger and actually gone above the top of the accent line. If I did it again, I would load a form character font to really see where the font space is. The trial version allows you to save up to about capital R so in my case where I just needed a few letters that was fine. Now I loaded the font into the "assets" folder and added code in the onCreate section of the code like this:

    Typeface tf = Typeface.createFromAsset(this.getAssets(), "startline.ttf");
    Button button = (Button) findViewById(R.id.buttonSync);
    button.setTypeface(tf);
    Button button2 = (Button) findViewById(R.id.buttonSetTgt);
    button2.setTypeface(tf);
    etc...

This allows me to change the size of the font and button without creating a new image and all the backgrounds and such work fine.

enter image description here

Allen Edwards
  • 1,488
  • 1
  • 27
  • 44