Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-20357] Android: 9-patch padding box area ignored for Button backgroundImage

GitHub Issuen/a
TypeBug
PriorityCritical
StatusOpen
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sn/a
ComponentsAndroid
Labels9patch, android, button, engSchedule
ReporterAndrey Tkachenko
AssigneeUnknown
Created2016-02-03T22:00:11.000+0000
Updated2019-11-15T16:00:35.000+0000

Description

From doc [Nine-patch](http://developer.android.com/intl/ru/guide/topics/graphics/2d-graphics.html#nine-patch):
The pink rectangle in the bottom image identifies the region in which the contents of the View are allowed. 
If the contents don't fit in this region, then the image will be stretched so that they do. 
But it ignored:
<Button backgroundImage="/images/alert_button.png">Блокировать</Button>
Result: !2016-02-04 00-57-18 Genymotion for personal use - Google Nexus 4 - 4.2.2 - API 17 - 768x1280 (768x1280, 320dpi) - 192.168.5.png|thumbnail! xhdpi Image source: !alert_button.9.png|thumbnail!

Attachments

FileDateSize
2016-02-04 00-57-18 Genymotion for personal use - Google Nexus 4 - 4.2.2 - API 17 - 768x1280 (768x1280, 320dpi) - 192.168.5.png2016-02-03T21:58:05.000+00004368
alert_button.9.png2016-02-03T21:53:21.000+0000763
expected_button.png2016-02-04T11:37:22.000+00006795
patch.diff2016-02-04T20:04:08.000+00001378
patched_button.png2016-02-04T20:06:14.000+00002018
Screenshot_1509643799.png2017-11-02T17:30:09.000+000034511

Comments

  1. Sharif AbuDarda 2016-02-04

    Hello, I tried to test your project with SDK 5.1.2.GA. I have tested in Alloy and Classic project. In both case the image is stretched to allow the content. As I have not defined any width of the button and button has default SIZE behavior of it's content. The background image stretched according to the size of the text.
       Operating System
         Name                        = Mac OS X
         Version                     = 10.11.3
         Architecture                = 64bit
         # CPUs                      = 4
         Memory                      = 8589934592
       Node.js
         Node.js Version             = 4.2.2
         npm Version                 = 2.14.7
       Titanium CLI
         CLI Version                 = 5.0.5
       Titanium SDK
         SDK Version                 = 5.1.2.GA
         Target Platform             = android
       
    Thanks.
  2. Andrey Tkachenko 2016-02-04

    Hello! Can you to attach your screenshot? I expect this view of button: !expected_button.png|thumbnail!
  3. Andrey Tkachenko 2016-02-04

    I found a bug. Look at the [^patch.diff]. And patched button result: !patched_button.png|thumbnail! Android SDK reference: http://developer.android.com/intl/ru/reference/android/R.attr.html#padding
        Explicitly setting a padding value will override the corresponding padding found in the background. 
       
  4. Andrey Tkachenko 2016-02-05

    Quick fix till bug fixed: 1. Remove *backgroundColor* and *backgroundImage* attributes from style and alloy *
  5. Ashraf Abu 2016-02-10

    [~falko] PR on the master branch is welcomed. Please proceed. [^patch.diff] looks okay.
  6. Andrey Tkachenko 2016-02-10

    @Ashraf Abu [PR](https://github.com/appcelerator/titanium_mobile/pull/7696)
  7. Ashraf Abu 2016-02-24

    PR https://github.com/appcelerator/titanium_mobile/pull/7696 merged.
  8. Andrey Tkachenko 2016-04-02

    Please reopen this issue.
       Titanium.UI.setBackgroundColor('#000');
       
       var win = Titanium.UI.createWindow({  
           title:'timob20357',
           backgroundColor:'#fff'
       });
       
       var button = Titanium.UI.createButton({
       	backgroundImage: "/images/alert_button2.png",
       	title: "very very loooooong text"
       });
       
       win.add(button);
       
       win.open();
       
    Result: https://yadi.sk/i/8OAGo0Waqg8Ne alert_button2.9.png https://yadi.sk/i/ZbNwXGY2qg8Th
  9. Ashraf Abu 2016-04-04

    I see. The blue arrows shouldn't be behind the text? But what would happen if you used this in a native app and have no space for the button as well as have a long text. Would the result be the same?
  10. Andrey Tkachenko 2016-04-04

    I think it is TiUIView issue.
        package ru.falkolab.myapplication;
        
        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.support.v7.widget.AppCompatButton;
        import android.widget.RelativeLayout;
        
        public class MainActivity extends AppCompatActivity {
        
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
        
                final RelativeLayout container = (RelativeLayout) findViewById(R.id.container);
                final AppCompatButton btn = new AppCompatButton(this);
                btn.setText("test test test");
                btn.setBackgroundResource(R.drawable.alert_button2);
        
                if (container != null) {
                    container.addView(btn);
                }
            }
        }
        
        <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            tools:context="ru.falkolab.myapplication.MainActivity"
            android:id="@+id/container">
        </RelativeLayout>
        
    Result: !https://1.downloader.disk.yandex.ru/disk/d8a004c7ca54ee4cdb9079e74612cc58308f99e8cfb9d7aba63f6a21e6e05b95/570270df/iXTtIy0Erdd2yuvf9sL5sX02OtRTrVwAupnyqqsMuSOiVPF6lgMcXbhgdZNfaZ1ulQd5oydfTnOAXjfHMGYMyg%3D%3D?uid=0&filename=2016-04-04_12-48-05.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&fsize=12540&hid=f1905293b1f03d012ac398b7662ac07c&media_type=image&tknv=v2&etag=1ccc13a3d39a27312ed2edc7e4f6dc8e! https://yadi.sk/i/ga5hSYBaqiaFA
  11. Ashraf Abu 2016-04-05

    I see. Reopening this ticket.
  12. Gary Mathews 2017-11-02

  13. Andrey Tkachenko 2017-11-02

    Can't find images from broken links. Please use my test code without modifications.
  14. Gary Mathews 2017-11-02

    [~falko] I don't have access to alert_button2.png
  15. Andrey Tkachenko 2017-11-02

  16. Gary Mathews 2017-11-02

    I did, and could not see any issues
  17. Andrey Tkachenko 2017-11-04

    I can't attaching a files. Please use for test one of resource set from link. It is good for test. https://yadi.sk/d/YgixO6033PQFK5 https://yadi.sk/i/QlC-fAF23PQFEa That's ok if your button text will be inside content body. Thx.
  18. Yordan Banev 2018-04-12

    PR: https://github.com/appcelerator/titanium_mobile/pull/9999
  19. Andrey Tkachenko 2018-04-12

    Wow don't believe to my eyes! Good news, good PR number =)
  20. Alan Hutton 2019-11-13

    [~ybanev] Can you take a quick look at this? I cannot see the issue.
  21. Yordan Banev 2019-11-14

    [~ahutton] The issue is still a valid one. Unfortunately the solution in the PR for it requires a major change in how we deal with backgrounds for components.

JSON Source