Search code examples
androidandroid-edittextandroid-canvasandroid-viewtextview

left drawable alignment with text in android


I am new to custom view and didn't know much about canvas in android, I wanted to align a left drawable to right side of layout along with the text(whether multiline or not) of same textview as in this image enter image description here

In the above image, i wanted to align $ image along with text($20.0 -$90.0 /hour) and must be in center if text is multiline and i don't want to use any extra layouts. Thanks in advance

This is my basic xml,

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"">

        <TextView
            android:id="@+id/ad_post_tv_noDays"
            style="@style/textView"
            android:text="20 days"
            android:layout_width="wrap_content"
            android:layout_alignParentLeft="true"
            android:drawablePadding="5dp"
            android:textColor="@color/color60"
            android:drawableLeft="@drawable/icon_calender"
            android:layout_gravity="left|center"
            android:gravity="left|center"
            android:layout_centerVertical="true"
            />

        <TextView
            style="@style/textView"
             android:layout_alignParentRight="true"
            android:id="@+id/ad_post_tv_wage"
            android:layout_marginLeft="5dp"
            android:text="$8 - $12/hour"
            android:textSize="10dp"
            android:layout_toRightOf="@id/ad_post_tv_noDays"
            android:drawablePadding="5dp"
            android:layout_width="wrap_content"
            android:textStyle="bold"
            android:layout_gravity="right|center"
            android:gravity="right|center"
            android:drawableLeft="@drawable/icon_dollar"
            />
    </RelativeLayout>

I had tried to implement it with custom views, it works for small text but when the text got bigger,it gets weird, my code image is as follows,enter image description here


Solution

  • try something like this

    package views;
    
    import android.content.Context;
    import android.content.res.Resources;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.util.AttributeSet;
    import android.widget.TextView;
    
    import com.upsilon.docta.R;
    
    
    public class MyTempView extends TextView {
        public MyTempView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    public MyTempView(Context context) {
        super(context);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        //ContextCompat.getColor(mContext, R.color.back_text_color)
        Paint textPaint = getPaint();
        Rect bounds = new Rect();
        textPaint.getTextBounds(getText().toString(), 0, getText().length(), bounds);
        int textWidth = bounds.width();
        Resources res = getResources();
        Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.ic_close);
        canvas.drawBitmap(bitmap, 0, getHeight() / 2 - bitmap.getHeight() / 2, textPaint);
        canvas.translate(bitmap.getWidth(), 0);
        super.onDraw(canvas);
    }
    }