Photoshop Question posted in
The official user guide can be found here.

How to programmatically add two images to button along with two lines of text? – Photoshop

I want to add two images to a button that has two lines of text, like so:
enter image description here

Note: the above image is photoshopped to look like what I want.

I am not sure how to achieve this. I can programmatically add one image to the button on the left like so:

Button button = new Button(this);
int imgResource = R.drawable.titans;
String matchUpStr = "TitansnPatriots";

button.setGravity(Gravity.START);
button.setCompoundDrawablesWithIntrinsicBounds(imgResource, 0, 0, 0);
button.setText(matchUpStr);

but it just ends up like this:

enter image description here

Does anyone know how I could add the two images to the left of the text in the button? I am thinking maybe you can go to the next line on the imgResource variable and add another drawable. Not sure.

note that I will be dynamically creating buttons and it is not always going to be this matchup. So I can’t just add an image with these two teams on it.

I’m starting to think that maybe instead of adding two images along with two lines of text, why not just make two images that contain the text inside the images and add the images top and bottom.

Tags:

2

Answers


  1. 0

    The only solution that comes to mind is place a Button inside a relative layout (or any layout you prefer) match parent then organize the view over it (Just make sure that on api 21+ the button has elevation set it to 0 or something).

    This link inspired me: Android Custom button with imageview and textview inside?

    Login or Signup to reply.
  2. 0

    Although I agree with Nero that a custom button is probably a cleaner solution.

    I was able to come up with a solution using a LayerListDrawable.

    I resized both bitmap drawables to be the size of the button’s text and then inset them by that size in the layer list drawable. See the code example.

    package cj.com.testinglayerlist;

import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.ScaleDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.button);

        // We will need to know the size of the text in order to correctly resize our bitmaps. I 
        // am getting it from the button here, but it can also be retrieved from resources. 
        int buttonTextSize = (int) button.getTextSize();

        // Get the drawables as BitmapDrawables.
        BitmapDrawable patriotsDrawable = (BitmapDrawable) getDrawable(R.drawable.patriots);
        BitmapDrawable titansDrawable = (BitmapDrawable) getDrawable(R.drawable.titans);

        // Resize the drawables to be the size of our button text.
        patriotsDrawable = resizeDrawable(buttonTextSize,  patriotsDrawable);
        titansDrawable = resizeDrawable(buttonTextSize, titansDrawable);

        // Create an array of drawables that contains our two logos.
        Drawable[] drawables = new Drawable[2];
        drawables[0] = patriotsDrawable;
        drawables[1] = titansDrawable;

        // Create a layer drawable.
        LayerDrawable layerDrawable = new LayerDrawable(drawables);
        // Notice here how the top of this layer is the button text size. This is opposite of the
        // other drawable whom's bottom will be the button text size.
        layerDrawable.setLayerInset(0,0, buttonTextSize,0,0);
        layerDrawable.setLayerInset(1,0, 0,0,buttonTextSize);

        // Now I set my buttons drawable.
        button.setCompoundDrawablesWithIntrinsicBounds(layerDrawable, null,null,null);
    }

    /**
     * Takes in the desired size of the bitmap drawable and resizes the bitmap as such.
     * 
     * @param sizeOfDrawable      The desired size in pixels.
     * @param bitmapDrawable      The bitmap drawable to resize.
     *                            
     * @return      Bitmap drawable that has been resized.
     */
    private BitmapDrawable resizeDrawable(int sizeOfDrawable, BitmapDrawable bitmapDrawable) {
        Bitmap bitmap = bitmapDrawable.getBitmap();
        BitmapDrawable d = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(bitmap,
                sizeOfDrawable,
                sizeOfDrawable, true));
        return d;
    }
}

    I was able to conjure the following using my above code snippet.

    It is not 100%, but maybe a path that you can take to accomplish your goal.
    Layer List Drawable Screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search