Is there a wat to make a indicator like this?
it has some pointed arrow down like in the selected item?
The only solution I could find is to grab the source code of the original TabLayout and customize it, according your needs.
In fact, all you need to do to get this custom pointing arrow is to override SlidingTabStrip's void draw(Canvas canvas) method. Unfortunately, SlidingTabStrip is private inner class inside TabLayout.
Luckily, all support library code is open, so we can create our own TabLayoutWithArrow class. I replaced the standard void draw(Canvas canvas) by this one to draw the arrow:
#Override
public void draw(Canvas canvas) {
super.draw(canvas);
// i used <dimen name="pointing_arrow_size">3dp</dimen>
int arrowSize = getResources().getDimensionPixelSize(R.dimen.pointing_arrow_size);
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight - arrowSize,
mIndicatorRight, getHeight() - arrowSize, mSelectedIndicatorPaint);
canvas.drawPath(getTrianglePath(arrowSize), mSelectedIndicatorPaint);
}
}
private Path getTrianglePath(int arrowSize) {
mSelectedIndicatorPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mSelectedIndicatorPaint.setAntiAlias(true);
int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize*2;
int rightPointX = leftPointX + arrowSize*2;
int bottomPointX = leftPointX + arrowSize;
int leftPointY = getHeight() - arrowSize;
int bottomPointY = getHeight();
Point left = new Point(leftPointX, leftPointY);
Point right = new Point(rightPointX, leftPointY);
Point bottom = new Point(bottomPointX, bottomPointY);
Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.setLastPoint(left.x, left.y);
path.lineTo(right.x, right.y);
path.lineTo(bottom.x, bottom.y);
path.lineTo(left.x, left.y);
path.close();
return path;
}
Of course, the background, the particular design of the indicator can be improved/adjust according your needs.
To make my custom TabLayoutWithArrow, I had to copy these files into my project:
AnimationUtils
TabLayout
ThemeUtils
ValueAnimatorCompat
ValueAnimatorCompatImplEclairMr1
ValueAnimatorCompatImplHoneycombMr1
ViewUtils
ViewUtilsLollipop
To have transparency behind the arrow, you just need to set this Shape-drawable, as a background for the TabLayoutWithArrow :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="#dimen/pointing_arrow_size">
<shape android:shape="rectangle" >
<solid android:color="#FFFF00" />
</shape>
</item>
<item android:height="#dimen/pointing_arrow_size"
android:gravity="bottom">
<shape android:shape="rectangle" >
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
And the actual usage is:
<klogi.com.viewpagerwithdifferentmenu.CustomTabLayout.TabLayoutWithArrow
android:id="#+id/tabLayout"
android:background="#drawable/tab_layout_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
I've uploaded the whole project (the TabLayoutWithArrow + one-page app which is using it) to my dropbox - feel free to check it out.
I hope, it helps
now it doesn't work, tintmanager class is removed from support library 23.2.0 , I managed same functionality by changing background drawable at runtime inside for loop detecting clicked position , PS : check this question and answer I am using same library : https://github.com/astuetz/PagerSlidingTabStrip/issues/141
Here is the code for anyone requiring an upward triangle using #Konstantin Loginov code
private Path getTrianglePath(int arrowSize) {
mSelectedIndicatorPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mSelectedIndicatorPaint.setAntiAlias(true);
mSelectedIndicatorPaint.setColor(Color.WHITE);
int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize * 1 / 2;
int mTopX = leftPointX + arrowSize;
int mTopY = getHeight() - arrowSize;
int rightPointX = leftPointX + arrowSize * 2;
int leftPointY = getHeight();
Point left = new Point(leftPointX, leftPointY);
Point right = new Point(rightPointX, leftPointY);
Point bottom = new Point(mTopX, mTopY);
Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.setLastPoint(left.x, left.y);
path.lineTo(right.x, right.y);
path.lineTo(bottom.x, bottom.y);
path.lineTo(left.x, left.y);
path.close();
return path;
}
I am trying to draw a level on top of a background, but I am unsure how to do it. I am able to draw each of the pieces separately, but am completely lost on how to draw both on the screen. I believe I may have to draw the background with a different method, but I don't know of such a method.
Here is my code thus far:
public class DisplayMap extends Activity {
ImageView mapView;
String FILENAME = "World.tmx";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
setContentView(new TileBackground(this));
}
public void loadWorld(String path) {
ImageView mapView;
// Start the parser, get back TMX data object
TileMapData t = TMXLoader.readTMX(FILENAME, this);
mapView = (ImageView) findViewById(R.id.MapImage);
// Create a Bitmap from the tilemap data
Bitmap mapImage = TMXLoader.createBitmap(t, this, 0, t.layers.size());
// Set the imageview to show the map, if we have one
if (mapImage != null) {
mapView.setImageBitmap(mapImage);
}
// Map loading problem, inform the user.
else {
Toast errorMessage = Toast.makeText(getApplicationContext(),
"Map could not be loaded", Toast.LENGTH_LONG);
errorMessage.show();
}
}
class TileBackground extends View {
Bitmap bg;
public TileBackground(Context context) {
super(context);
try {
AssetManager assetManager = context.getAssets();
InputStream inputStream;
inputStream = assetManager.open("Background.png");
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.ARGB_4444;
bg = BitmapFactory.decodeStream(inputStream, null, options);
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
#Override
public void onDraw(Canvas canvas) {
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
int iWidth = bg.getWidth();
int iHeight = bg.getHeight();
for (int x = 0; x < width; x += iWidth) {
for (int y = 0; y < height; y += iHeight)
canvas.drawBitmap(bg, x, y, null);
}
loadWorld(FILENAME);
invalidate();
}
}
activity_main.xml
<?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"
tools:context=".MainActivity" >
<com.seanheiss.shovelshovel.DisplayMap.TileBackground
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/TileBackground" />
<ImageView
android:id="#+id/MapImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
By commenting one setContentView and not the other I can draw one piece, but I can't figure out how to draw both. I've heard of something called ViewFlipper, but am unsure if I should use that or not; I don't know how it works.
Thank you very much to anyone that can help me!
You should add your custom view (TileBackground) to your activity_main.xml layout file. That should allow it to be drawn properly when you use setContentView on activity_main. You'll probably want it as the first element under a RelativeLayout parent so that it gets drawn in the background.
In your case, you should have as your first element of the RelativeLayout:
<com.YOUR_PACKAGE.TileBackground
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/TileBackground" />
I'm subclassing ImageButton in order to draw lines on it and trying to figure out where the actual button coordinates are within my gridview. I am using onGlobalLayout to setup Top, Bottom, Right and Left, but these seem to be for the actual "square" within the grid, and not the actual button (see image). The purple lines are drawn in myImageButton.onDraw() using coords gathered from myImageButton.onGlobalLayout(). I thought these would be for the button, but they seem to be from something else. Not sure what. I'd like the purple lines to match the outline of the button so the lines I draw appear on the button and not just floating out in the LinearLayout somewhere. The light blue is the background color of the vertical LinearLayout holding the Textview (for the number) and myImageButton. Any way to get the actual button size?
XML Layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lay_cellframe"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill_vertical|fill_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_cell"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:gravity="center"
android:text="TextView"
android:textSize="10sp" />
<com.example.icaltest2.myImageButton
android:id="#+id/imageButton1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_margin="0dp"
android:adjustViewBounds="false"
android:background="#android:drawable/btn_default"
android:scaleType="fitXY"
android:src="#android:color/transparent" />
</LinearLayout>
</FrameLayout>
myImageButton.java
public myImageButton (Context context, AttributeSet attrs)
{
super (context, attrs);
mBounds = new Rect();
ViewTreeObserver vto = this.getViewTreeObserver ();
vto.addOnGlobalLayoutListener (ogl);
Log.d (TAG, "myImageButton");
}
...
OnGlobalLayoutListener ogl = new OnGlobalLayoutListener()
{
#Override
public void onGlobalLayout ()
{
Rect b = getDrawable ().getBounds ();
mBtnTop = b.centerY () - (b.height () / 2);
mBtnBot = b.centerY () + (b.height () / 2);
mBtnLeft = b.centerX () - (b.width () / 2);
mBtnRight = b.centerX () + (b.width () / 2);
}
};
...
#Override
protected void onDraw (Canvas canvas)
{
super.onDraw (canvas);
Paint p = new Paint ();
p.setStyle (Paint.Style.STROKE);
p.setStrokeWidth (1);
p.setColor (Color.MAGENTA);
canvas.drawCircle (mBtnLeft, mBtnTop, 2, p);
canvas.drawCircle (mBtnLeft, mBtnBot, 2, p);
canvas.drawCircle (mBtnRight, mBtnTop, 2, p);
canvas.drawCircle (mBtnRight, mBtnBot, 2, p);
canvas.drawRect (mBtnLeft, mBtnTop, mBtnRight, mBtnBot, p);
}
Update: added image with jsmith's suggestion
Rect r = canvas.getClipBounds (); //<- not sure about this
int w = getMeasuredWidth () - getPaddingLeft () - getPaddingRight ();
int h = getMeasuredHeight () - getPaddingTop () - getPaddingBottom ();
int left = r.centerX () - (w / 2);
int right = r.centerX() + ( w / 2);
int top = r.centerY() - (h / 2);
int bot = r.centerY() + (h / 2);
p.setColor (Color.GREEN);
canvas.drawRect (left, top, right, bot, p);
By the time onDraw is called the layout was handled and the size information should be available. You can use the View.getMeasuredWidth() / View.getMeasuredHeight() to retrieve the information that you need. However, you may also need to factor in the padding with View.getPaddingLeft() / ... For example:
final int displayWidth = (getMeasuredWidth() - getPaddingLeft() - getPaddingRight());
I think what you're doing is right, the problem is Android's standard button style has about 3dip of padding, so it seems the image is aligning to the gridview's cell, but is not.
So, the lines will need to have less 6dip width (3 to left and 3 to right) to fit the button's view.
mBtnLeft = b.centerX () - (b.width () / 2) + 3;
mBtnRight = b.centerX () + (b.width () / 2) - 3;
First Q. I have working code to make this move elsewhere in the file -- that's not the question. The question is how do I create a Radial Gradient that can be moved (below API 16).
Preempting snark, I've spent a lot of time here:
http://developer.android.com/reference/android/graphics/drawable/GradientDrawable.html
With GradientDrawable (below), there doesn't seem to be a way to set the colors without also setting a non-radial orientation.
public class CustomView extends View {
int width = (sWidth/8); // sWidth defined elsewhere as width of screen
int height = (sWidth/8);
GradientDrawable gradient;
int[] colors = {0x60ffffff,0x000000};
public CustomView(Context context) {
super(context);
gradient = new GradientDrawable(GradientDrawable.Orientation.BL_TR,colors);
}
protected void onDraw(Canvas canvas) {
if(x != 0 && y != 0){ // OnTouch calls invalidate on this view for movement
gradient.mutate();
gradient.setShape(GradientDrawable.RADIAL_GRADIENT);
// This just makes it disappear:
// setGradientType (GradientDrawable.RADIAL_GRADIENT);
gradient.setBounds(x-width/2, y-height/2, x + width, y + height);
gradient.draw(canvas);
}
}
}
There is also this:
http://developer.android.com/reference/android/graphics/RadialGradient.html
But there seems to be no way to move that gradient. Can you maybe put the radial gradient on a transparent circle of some kind that can then be moved? I'm at a loss. My thanks in advance.
Edit:
Step 1, define an oval shape in your drawable folder. This one is "cloud.xml":
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#00000000"
android:gradientRadius="30"
android:startColor="#f0ffffff"
android:type="radial" />
<size
android:width="60dp"
android:height="60dp" />
</shape>
The radius, width and height will likely need to be changed dynamically. So put whatever. The color scheme above will give a slightly transparent color to fully transparent. Cloud effect.
Step 2, the constructor of your custom view:
// actually before the constructor this, of course:
GradientDrawable circle;
// now the constructor:
circle = (GradientDrawable) context.getResources().getDrawable(R.drawable.cloud);
Step 3, the onDraw method:
// x & y being coordinates updated from onTouch method,
// circleRad being some constant dependent on screen dp
if(x != 0 && y != 0){
circle.setGradientRadius(circleRad);
circle.setBounds(x-circleRad, y-circleRad,
x+circleRad, y+circleRad);
circle.draw(canvas);
}
------------- Original, Less Process Efficient Solution Preserved Below -----------
Wait a couple weeks and you can answer your own questions. Turns out it was RadialGradient the whole time.
public class CustomView extends View implements OnTouchListener {
Shader radialGradientShader;
Paint paint;
private int circleDiam;
private int x = 0;
private int y = 0;
private int lastScreenColor;
public CustomView(Context context, int circleDiam) {
super(context);
this.circleDiam = circleDiam;
paint = new Paint();
}
protected void onDraw(Canvas canvas) {
if(x != 0 && y != 0){
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
radialGradientShader = new
RadialGradient(x, y, circleDiam,
0xf0ffffff,0x00000000,Shader.TileMode.MIRROR);
paint.setShader(radialGradientShader);
canvas.drawCircle(x, y, circleDiam, paint);
}
}
public boolean onTouch(View v, MotionEvent event) {
x = (int)event.getX();
y = (int)event.getY();
if(event.getAction() == MotionEvent.ACTION_DOWN
&& event.getAction() == MotionEvent.ACTION_MOVE){
invalidate();
return true;
}
else{
x = 0;
y = 0;
invalidate();
return false;
}
}
}
A fluffy cloud!
The only problem with this solution is that Eclipse gets mad when you instantiate an object in the onDraw method. However, if you try to instantiate it in the constructor things get ugly fast.
Extra points for a solution that avoids said problem.
how can I make the drawable on a button smaller? The icon is too big, actually higher than the button. This is the code I am using:
<Button
android:background="#drawable/red_button"
android:drawableLeft="#drawable/s_vit"
android:id="#+id/ButtonTest"
android:gravity="left|center_vertical"
android:text="S-SERIES CALCULATOR"
android:textColor="#android:color/white"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:drawablePadding="10dp">
</Button>
The upper is how it should look, the lower how it looks right now.
I tried this but there is no image displayed. :-(
Resources res = getResources();
ScaleDrawable sd = new ScaleDrawable(res.getDrawable(R.drawable.s_vit), 0, 10f, 10f);
Button btn = (Button) findViewById(R.id.ButtonTest);
btn.setCompoundDrawables(sd.getDrawable(), null, null, null);
I have found a very simple and effective XML solution that doesn't require ImageButton
Make a drawable file for your image as below and use it for android:drawableLeft
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/half_overlay"
android:drawable="#drawable/myDrawable"
android:width="40dp"
android:height="40dp"
/>
</layer-list>
You can set the image size with android:width and android:height properties.
This way you could at least get the same size for different screens.
The drawback is that it is not exactly like fitXY which would scale image width to fit X and scale image height accordingly.
You should use a ImageButton and specify the image in android:src, and set android:scaletype to fitXY
Setting scaled drawable in code
Drawable drawable = getResources().getDrawable(R.drawable.s_vit);
drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*0.5),
(int)(drawable.getIntrinsicHeight()*0.5));
ScaleDrawable sd = new ScaleDrawable(drawable, 0, scaleWidth, scaleHeight);
Button btn = findViewbyId(R.id.yourbtnID);
btn.setCompoundDrawables(sd.getDrawable(), null, null, null); //set drawableLeft for example
Buttons do not resize their inner images.
My solution does not require code manipulation.
It uses a layout with TextView and ImageView.
The background of the layout should have the red 3d drawable.
You may need to define the android:scaleType xml attribute.
Example:
<LinearLayout
android:id="#+id/list_item"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:padding="2dp" >
<ImageView
android:layout_width="50dp"
android:layout_height="fill_parent"
android:src="#drawable/camera" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:lines="1"
android:gravity="center_vertical"
android:text="Hello - primary" />
</LinearLayout>
BTW:
Counting on different resolution icons may result in a non predictable UI (icon too big or too small)
Text in textview (including in buttons) does not fill the component. This is an Android problem and I don't know how to solve it.
You can use it as an include.
Good luck
Use a ScaleDrawable as Abhinav suggested.
The problem is that the drawable doesn't show then - it's some sort of bug in ScaleDrawables. you'll need to change the "level" programmatically. This should work for every button:
// Fix level of existing drawables
Drawable[] drawables = myButton.getCompoundDrawables();
for (Drawable d : drawables) if (d != null && d instanceof ScaleDrawable) d.setLevel(1);
myButton.setCompoundDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
My DiplayScaleHelper, that works perfectly:
import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.ScaleDrawable;
import android.widget.Button;
public class DisplayHelper {
public static void scaleButtonDrawables(Button btn, double fitFactor) {
Drawable[] drawables = btn.getCompoundDrawables();
for (int i = 0; i < drawables.length; i++) {
if (drawables[i] != null) {
if (drawables[i] instanceof ScaleDrawable) {
drawables[i].setLevel(1);
}
drawables[i].setBounds(0, 0, (int) (drawables[i].getIntrinsicWidth() * fitFactor),
(int) (drawables[i].getIntrinsicHeight() * fitFactor));
ScaleDrawable sd = new ScaleDrawable(drawables[i], 0, drawables[i].getIntrinsicWidth(), drawables[i].getIntrinsicHeight());
if(i == 0) {
btn.setCompoundDrawables(sd.getDrawable(), drawables[1], drawables[2], drawables[3]);
} else if(i == 1) {
btn.setCompoundDrawables(drawables[0], sd.getDrawable(), drawables[2], drawables[3]);
} else if(i == 2) {
btn.setCompoundDrawables(drawables[0], drawables[1], sd.getDrawable(), drawables[3]);
} else {
btn.setCompoundDrawables(drawables[0], drawables[1], drawables[2], sd.getDrawable());
}
}
}
}
}
You can call setBounds on the "compound" drawables to modify the size of the image.
Try this code to autosize the drawable of your button:
DroidUtils.scaleButtonDrawables((Button) findViewById(R.id.ButtonTest), 1.0);
defined by this function:
public final class DroidUtils {
/** scale the Drawables of a button to "fit"
* For left and right drawables: height is scaled
* eg. with fitFactor 1 the image has max. the height of the button.
* For top and bottom drawables: width is scaled:
* With fitFactor 0.9 the image has max. 90% of the width of the button
* */
public static void scaleButtonDrawables(Button btn, double fitFactor) {
Drawable[] drawables = btn.getCompoundDrawables();
for (int i = 0; i < drawables.length; i++) {
if (drawables[i] != null) {
int imgWidth = drawables[i].getIntrinsicWidth();
int imgHeight = drawables[i].getIntrinsicHeight();
if ((imgHeight > 0) && (imgWidth > 0)) { //might be -1
float scale;
if ((i == 0) || (i == 2)) { //left or right -> scale height
scale = (float) (btn.getHeight() * fitFactor) / imgHeight;
} else { //top or bottom -> scale width
scale = (float) (btn.getWidth() * fitFactor) / imgWidth;
}
if (scale < 1.0) {
Rect rect = drawables[i].getBounds();
int newWidth = (int)(imgWidth * scale);
int newHeight = (int)(imgHeight * scale);
rect.left = rect.left + (int)(0.5 * (imgWidth - newWidth));
rect.top = rect.top + (int)(0.5 * (imgHeight - newHeight));
rect.right = rect.left + newWidth;
rect.bottom = rect.top + newHeight;
drawables[i].setBounds(rect);
}
}
}
}
}
}
Be aware, that this may not be called in onCreate() of an activity, because button height and width are not (yet) available there. Call this in on onWindowFocusChanged() or use this solution to call the function.
Edited:
The first incarnation of this function did not work correctly. It used userSeven7s code to scale the image, but returning ScaleDrawable.getDrawable() does not seem to work (neither does returning ScaleDrawable) for me.
The modified code uses setBounds to provide the bounds for the image. Android fits the image into these bounds.
If you want to use 1 image and display it in different size, you can use scale drawable ( http://developer.android.com/guide/topics/resources/drawable-resource.html#Scale ).
I am doing it as below. This creates a 100x100 size image in the button independent of the input image.
drawable.bounds = Rect(0,0,100,100)
button.setCompoundDrawables(drawable, null, null, null)
Not using ScaleDrawable either. Not using button.setCompoundDrawablesRelativeWithIntrinsicBounds() solved my problem, as that seems to use intrinsic bounds (source image size) instead of the bounds you just set.
You can use different sized drawables that are used with different screen densities/sizes, etc. so that your image looks right on all devices.
See here: http://developer.android.com/guide/practices/screens_support.html#support
Did you try wrapping your image in a ScaleDrawable and then using it in your button?
Here the function which I created for scaling vector drawables. I used it for setting TextView compound drawable.
/**
* Used to load vector drawable and set it's size to intrinsic values
*
* #param context Reference to {#link Context}
* #param resId Vector image resource id
* #param tint If not 0 - colour resource to tint the drawable with.
* #param newWidth If not 0 then set the drawable's width to this value and scale
* height accordingly.
* #return On success a reference to a vector drawable
*/
#Nullable
public static Drawable getVectorDrawable(#NonNull Context context,
#DrawableRes int resId,
#ColorRes int tint,
float newWidth)
{
VectorDrawableCompat drawableCompat =
VectorDrawableCompat.create(context.getResources(), resId, context.getTheme());
if (drawableCompat != null)
{
if (tint != 0)
{
drawableCompat.setTint(ResourcesCompat.getColor(context.getResources(), tint, context.getTheme()));
}
drawableCompat.setBounds(0, 0, drawableCompat.getIntrinsicWidth(), drawableCompat.getIntrinsicHeight());
if (newWidth != 0.0)
{
float scale = newWidth / drawableCompat.getIntrinsicWidth();
float height = scale * drawableCompat.getIntrinsicHeight();
ScaleDrawable scaledDrawable = new ScaleDrawable(drawableCompat, Gravity.CENTER, 1.0f, 1.0f);
scaledDrawable.setBounds(0,0, (int) newWidth, (int) height);
scaledDrawable.setLevel(10000);
return scaledDrawable;
}
}
return drawableCompat;
}
Using "BATCH DRAWABLE IMPORT" feature you can import custom size depending upon your requirement example 20dp*20dp
Now after importing use the imported drawable_image as drawable_source for your button
It's simpler this way
It is because you did not setLevel. after you setLevel(1), it will be display as u want
I made a custom button class to achieve this.
CustomButton.java
public class CustomButton extends android.support.v7.widget.AppCompatButton {
private Drawable mDrawable;
public CustomButton(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.CustomButton,
0, 0);
try {
float mWidth = a.getDimension(R.styleable.CustomButton_drawable_width, 0);
float mHeight = a.getDimension(R.styleable.CustomButton_drawable_width, 0);
Drawable[] drawables = this.getCompoundDrawables();
Drawable[] resizedDrawable = new Drawable[4];
for (int i = 0; i < drawables.length; i++) {
if (drawables[i] != null) {
mDrawable = drawables[i];
}
resizedDrawable[i] = getResizedDrawable(drawables[i], mWidth, mHeight);
}
this.setCompoundDrawables(resizedDrawable[0], resizedDrawable[1], resizedDrawable[2], resizedDrawable[3]);
} finally {
a.recycle();
}
}
public Drawable getmDrawable() {
return mDrawable;
}
private Drawable getResizedDrawable(Drawable drawable, float mWidth, float mHeight) {
if (drawable == null) {
return null;
}
try {
Bitmap bitmap;
bitmap = Bitmap.createBitmap((int)mWidth, (int)mHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return drawable;
} catch (OutOfMemoryError e) {
// Handle the error
return null;
}
}
}
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomButton">
<attr name="drawable_width" format="dimension" />
<attr name="drawable_height" format="dimension" />
</declare-styleable>
</resources>
Usage in xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.MainActivity">
<com.example.CustomButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_hero"
android:text="Avenger"
custom:drawable_height="10dp"
custom:drawable_width="10dp" />
</RelativeLayout>
I tried the techniques of this post but didnot find any of them so attractive. My solution was to use an imageview and textview and align the imageview top and bottom to the textview. This way I got the desired result. Here's some code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="48dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/textViewTitle"
android:layout_alignBottom="#+id/textViewTitle"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/textViewBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textViewTitle"
android:layout_alignBottom="#+id/textViewTitle"
android:layout_toRightOf="#+id/imageView1"
android:text="Back"
android:textColor="#color/app_red"
android:textSize="#dimen/title_size" />
</RelativeLayout>
Using Kotlin Extension
val drawable = ContextCompat.getDrawable(context, R.drawable.my_icon)
// or resources.getDrawable(R.drawable.my_icon, theme)
val sizePx = 25
drawable?.setBounds(0, 0, sizePx, sizePx)
// (left, top, right, bottom)
my_button.setCompoundDrawables(drawable, null, null, null)
I suggest creating an extension function on TextView (Button extends it) for easy reuse.
button.leftDrawable(R.drawable.my_icon, 25)
// Button extends TextView
fun TextView.leftDrawable(#DrawableRes id: Int = 0, #DimenRes sizeRes: Int) {
val drawable = ContextCompat.getDrawable(context, id)
val size = context.resources.getDimensionPixelSize(sizeRes)
drawable?.setBounds(0, 0, size, size)
this.setCompoundDrawables(drawable, null, null, null)
}