1) Is it possible to create drawable, example
static Bitmap.Config conf = Bitmap.Config.ARGB_8888;
static Bitmap bmp = Bitmap.createBitmap(100, 100, conf);
// something draw
// eventually convert to DrawableBitmap
and then convert it / asiggn as / put in resource, to use in function with resource id param, like:
public void setWidgetLayoutResource (int widgetLayoutResId)
or
2) is it possible to dynamically draw to change image in R.drawable.something.bmp?
All this for change color of widget in setWidgetLayoutResource() to any color, not fixed as color of concrete resource
My own answer
This question is relative to my other: Android PreferenceScreen
and I was do it in this way:
ColorLinesView.java
public class ColorLinesView extends View
{
private static GradientDrawable gdDefault = new GradientDrawable();
public static int fillColor;
public ColorLinesView(Context context, AttributeSet attrs)
{ super(context, attrs);
}
#Override protected void onDraw(Canvas cv)
{
gdDefault.setColor(fillColor);
gdDefault.setCornerRadius(4);
gdDefault.setStroke(2, 0xffbbbbbb);
this.setBackgroundDrawable(gdDefault);
}
}
color_lines_accesory.xml
<?xml version="1.0" encoding="utf-8"?>
<android.swp.ColorLinesView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/colorBoxLines"
android:layout_width="52dp"
android:layout_height="26dp"
android:gravity="right"
android:layout_marginRight="6dp" />
and finally while programmatically create PreferenceScreen, after add category preference "somePref":
ColorLinesView.fillColor = 0xff00ff00; // examply green
somePref.setWidgetLayoutResource(R.layout.color_lines_accesory);
and the same two lines (with new color) in OnPreferenceClickListener() for "somePref" category, after using color picker to change color.
result:
Related
I try to display a bitmap with a specific alpha. The Bitmap is created in ARGB format, for each pixel I set the color with value 0x04FFAAAA.
The display is made in a class that extends GLSurfaceView (the class name is BitmapView).
I have another class RelativeLayoutBitmap (extends RelativeLayout), that creates and addView BitmapView.
In screen.xml
I define a relative layout :
<RelativeLayout
android:id="id"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/overlay_background">
<RelativeLayoutBitmap
android:id="id_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>
public RelativeLayoutBitmap(Context context, AttributeSet attrs) {
super(context, attrs);
internalConstruct(context, attrs);
}
public RelativeLayoutBitmap(Context context) {
super(context);
internalConstruct(context, null);
}
private void internalConstruct(Context context, AttributeSet attrs){
this.mContext = context;
this.mAttrs = attrs;
if (null != mBitmapView) {
this.removeView(mBitmapView);
mBitmapView = null;
}
// create the bitmapview
mBitmapView = new BitmapView(mContext, mAttrs);
mBitmapView(getBackground()); //same background for mBitmapView
LayoutParams params = (LayoutParams) this.generateDefaultLayoutParams();
params.width = LayoutParams.MATCH_PARENT;
params.height = LayoutParams.MATCH_PARENT;
mBitmapView.setLayoutParams(params);
this.addView(mBitmapView, 0);
}
Over this relativeLayout, I have a relativeLayout with a background 0x4D000000.
This doesn't work, the Bitmap was displayed, but visible; I hoped the bitmap will be display and not visibile because the alpha of each pixel was 0.015f.
If I hide the relativeLayout over (or set background to be transparent), the bitmap was displayed and not visibile (if I change the alpha of each pixel to 1.0 the Bitmap is visible.).
If in my screen.xml, I include the BitmapView:
<RelativeLayout
android:id="id"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/overlay_background">
<BitmapView
android:id="id_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>
This works, the Bitmap was displayed and not visible; then if I change the alpha of each pixel to 1.0 the Bitmap is visible.
For my final project, I can't modify the app, the BitmpaView must be included in RelativeLayoutBitmap.
I don't understand why I don't have the comportment I expect when my BitmapView is added in a RelativeLayout.
In RelativeLayoutBitmap, what do I need to set to have the bitmap displayed with the alpha of each pixel?
I would like to add TextView and EditView into my custom LinearLayout programmatically.
But I don't know how.
Something like this (that doesn't work):
<com.custom.FavoritesViewer
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="gone"
android:id="#+id/favoritesViewer">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"/>
</com.custom.FavoritesViewer>
and my custom layout
public class FavoritesViewer extends LinearLayout {
private Bitmap fullImage;
private int canvasWidth;
private int canvasHeight;
private final Paint paint = new Paint();
public FavoritesViewer(Context context, AttributeSet attrs) {
super(context, attrs);
setWillNotDraw(false);
initializeCanvasSize(context);
}
private void initializeCanvasSize(Context context) {
final Pair<Integer, Integer> screenSize = Utils.getScreenSize(context);
canvasWidth = screenSize.first;
canvasHeight = screenSize.second;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(canvasWidth, canvasHeight / 3);
}
#Override
protected void onDraw(Canvas cvs) {
if (fullImage == null) {
fullImage = Bitmap.createBitmap(canvasWidth, canvasHeight / 3, Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(fullImage);
paint.reset();
paint.setColor(Color.parseColor("#AA000000"));
canvas.drawRect(0, 0, canvasWidth, canvasHeight / 3, paint);
}
cvs.drawBitmap(fullImage, 0, 0, null);
}
}
So I have a canvas (like background) and I would like to add some standart Views on top. I cannot add it on onDraw.
Is it any way to add View into custom Layout?
EDITTED
I need to implement some special UI with buttons. I want to wrap this in one component. I draw that UI on canvas and somehow should add buttons (It's enough for me to add simple ImageButton, not to draw an image and emulate button's behaviour). That's why I selected Layout as container and need to add Views programmatically.
As long as you call through to super (probably super.onDraw()), I imagine the parent class will draw the views you add as expected. It looks like you're just overriding onDraw, which would prevent the parent LinearLayout class from rendering it's content (like the TextView).
Try commenting out your onDraw method first, and see if the LinearLayout behaves as expected.
Also, what's the goal of the Custom Layout? There may be a better way to achieve your goal.
I am trying to display a blue line next to a block of text, pretty much like this:
Here's my code:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/blue_line" />
blue_line is a jpg file. a blue rectangle. it displays in its original size regardless of the text in the textview. how can i adjust its height dynamically according to the height of the text? like make it shorter when theres little amount of text and longer when there's more text....
You can try doing it in code by setting bounds for the image
textView1.getViewTreeObserver()
.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Drawable img = ActivityName.this.getContext().getResources().getDrawable(
R.drawable.blue_line);
img.setBounds(0, 0, img.getIntrinsicWidth() * textView1.getMeasuredHeight() / img.getIntrinsicHeight(), textView1.getMeasuredHeight());
textView1.setCompoundDrawables(img, null, null, null);
textView1.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
});
The best way to do this is to wrap your drawable in an xml drawable file and set it as a drawable in your text view as follows:
Drawable XML File:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:scaleType="fitXY"
android:src="#drawable/total_calories"/>
TextView in XML:
<TextView
android:id="#+id/title_total_cal"
style="#style/title_stats_textview"
android:drawableLeft="#drawable/total_calories_drawable"/>
Try as below...
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/btndr" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imageView" />
</RelativeLayout>
Simply, Keep your image as 9patch drawable.
You can add android:drawableLeft="#drawable/checkmark" to your textview. You can also set drawablePadding to keep the textview organized.
android:drawableLeft="#drawable/button_icon"
android:drawablePadding="2dip"
Here is the link to create 9patch drawable
<TextView android:text="#string/txtUserName"
android:id="#+id/txtUserName"
android:layout_width="160dip"
android:layout_height="60dip"
android:layout_gravity="center"
android:drawableLeft="#drawable/button_icon"
android:drawablePadding="2dip"
/>
Unfortunately, setBounds was not working for me so I had to do a workaround.
// Turn wanted drawable to bitmap
Drawable dr = getResources().getDrawable(R.drawable.somedrawable);
Bitmap bitmap = ((BitmapDrawable) dr).getBitmap();
// I had a square image with same height and width so I needed only TextView height (getLineHeight)
int size = textView1.getLineHeight();
Drawable d = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(bitmap, size, size, true));
textView1.setCompoundDrawables(d, null, null, null);
// Now we can set some spacing between text and image
textView1.setCompoundDrawablePadding(10);
It is not the best solution regarding performance because new bitmap is created, but still works.
You can draw a line with your desired height on drawable canvas and set as left drawable of your TextView. check this out:
public class FullHeightLineDrawable extends Drawable {
private Paint mPaint;
private int mHeight;
public FullHeightLineDrawable(int height) {
mPaint = new Paint();
mPaint.setColor(CompatUtils.getColor(R.color.colorAccent));
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(15);
mHeight = height;
}
#Override
public void draw(Canvas canvas) {
canvas.drawLine(0, -mHeight, 0, mHeight, mPaint);
}
#Override
public void setAlpha(int alpha) {
}
#Override
public void setColorFilter(ColorFilter colorFilter) {
}
#Override
public int getOpacity() {
return 0;
}
}
Usage:
final Drawable drawable = new FullHeightLineDrawable(getHeight());
mTextView.setTextColor(watchingColor);
mTextView.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);
I abstract out this method. It works when the drawable is on the left of the TextView,dynamically scaling. If drawable is on the right side,this method doesn't work, needing to figure out why, but you can just directly use textView.setcompounddrawableswithintrinsicbounds() with the right-size Drawable resource
#RequiresApi(api = Build.VERSION_CODES.HONEYCOMB)
public static void ajustCompoundDrawableSizeWithText(final TextView textView, final Drawable leftDrawable, final Drawable topDrawable, final Drawable rightDrawable, final Drawable bottomDrawable) {
textView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
#Override
public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
if(leftDrawable != null){
leftDrawable.setBounds(0, 0, (int)textView.getTextSize(), (int)textView.getTextSize());
}
if(topDrawable != null){
topDrawable.setBounds(0, 0, (int)textView.getTextSize(), (int)textView.getTextSize());
}
if(rightDrawable != null){
rightDrawable.setBounds(0, 0, (int)textView.getTextSize(), (int)textView.getTextSize());
}
if(bottomDrawable != null){
bottomDrawable.setBounds(0, 0, (int)textView.getTextSize(), (int)textView.getTextSize());
}
textView.setCompoundDrawables(leftDrawable, topDrawable, rightDrawable, bottomDrawable);
textView.removeOnLayoutChangeListener(this);
}
});
}
I Created a class that extends TextView, and resize the drawables in onPreDrawListener.
public class MyTextView extends AppCompatTextView {
public MyTextView(Context context, AttributeSet attrs, int style) {
super(context, attrs, style);
fitCompoundDrawableToLineHeight();
}
private void fitCompoundDrawableToLineHeight() {
OnPreDraw.run(this, () -> {
final Drawable[] cd = getCompoundDrawables();
Arrays.stream(cd)
.filter(drawable -> drawable != null)
.forEach(d -> d.setBounds(0, 0, getLineHeight(), getLineHeight()));
setCompoundDrawables(cd[0], cd[1], cd[2], cd[3]);
});
}
}
// Convenience class that abstracts onPreDraw logic
public class OnPreDraw {
public static void run(View view, Runnable task) {
view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
#Override
public boolean onPreDraw() {
if (!view.getViewTreeObserver().isAlive()) {
return true;
}
view.getViewTreeObserver().removeOnPreDrawListener(this);
task.run();
return true;
}
});
}
}
You need to make a one horizontal XML layout that has the blue line left and a textview right.
Than use that layout like an item and make a ListView of those items. Something like here, but a bit simpler
I found how to change the opacity of a View, but I need to actually darken a View. My best idea is to put a transparent black rectangle over it and then slowly increase the opacity of the rectangle.
Do you know a nicer way to do it?
public class Page07AnimationView extends ParentPageAnimationView {
private final String TAG = this.getClass().getSimpleName();
private ImageView overlay;
private int mAlpha = 0;
public Page07AnimationView(Context context) {
super(context);
}
public Page07AnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
}
protected void init()
{
overlay = new ImageView(mContext);
overlay.setImageResource(R.drawable.black_background);
overlay.setAlpha(0);
overlay.setWillNotDraw(false);
// make the PageAniSurfaceView focusable so it can handle events
setFocusable(true);
}
protected void draw_bitmaps(Canvas canvas)
{
overlay.draw(canvas);
update_bitmaps();
invalidate();
}
public void update_bitmaps()
{
if(mAlpha < 250)
{
mAlpha += 10;
overlay.setAlpha(mAlpha);
}
}
}
The code above isn't doing what I had hoped. Page07AnimationView is added to a FrameLayout over the view I need to darken. R.drawable.black_background points to a 787px x 492px black png image.
I added overlay.setWillNotDraw(false); but it didn't help.
I changed the first setAlpha(0) to setAlpha(255) but that didn't help.
I removed the setAlpha() calls altogether, but it didn't help.
This basic technique of adding a PageNNAnimationView has been working to draw Bitmaps, but not to draw ImageView overlay. (I would use Bitmaps, but they don't seem to have an alpha component.)
Edit2: this is the parent of the class above:
public class ParentPageAnimationView extends View {
private final String TAG = this.getClass().getSimpleName();
protected Context mContext;
public ParentPageAnimationView(Context context) {
super(context);
mContext = context;
init();
}
public ParentPageAnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
init();
}
protected void init()
{
}
protected void draw_bitmaps(Canvas canvas)
{
// will be overridden by child classes
}
#Override
protected void onDraw(Canvas canvas) {
if(this.getVisibility() == View.VISIBLE)
{
if(canvas != null)
{
draw_bitmaps(canvas);
}
}
}
public void update_bitmaps()
{
// will be overridden by child classes
}
public void elementStarted(PageElement _pageElement) {
// Nothing in parent class
}
public void elementFinished(PageElement mElement) {
// Nothing in parent class
}
}
In case of an ImageView, here's one way to achieve it:
imageView.setColorFilter(Color.rgb(123, 123, 123), android.graphics.PorterDuff.Mode.MULTIPLY);
I would rather do it in the opposite way - put a dark rectangle behind the view and set the view's opacity. This saves painting the rectangle when the view is 100% opaque.
I would do something like this:
view.getBackground().setColorFilter(color, PorterDuff.Mode.DARKEN);
Use black color with some alpha like 0x7f000000 for a typical darkening.
It's more concise and you can also darken the View with animation or scrolling event for example. Just set Color.argb(alpha, 0, 0, 0) as the color and animate alpha, or change it based on the scrolling offset.
This is how I ended up doing it. The key was to use a Paint with its alpha set to whatever I wanted.
public class Page07AnimationView extends ParentPageAnimationView {
private final String TAG = this.getClass().getSimpleName();
private Bitmap bitmap;
private BitmapDrawable drawable;
private ImageView overlay;
private int which = -1;
private long last_time;
private Page07State state;
private int mAlpha;
private int maxAlpha;
private Paint mPaint;
private int _alpha_step;
private int minAlpha;
public enum Page07State {
WAITING, DARKENING, DARKENED
}
public Page07AnimationView(Context context) {
super(context);
}
public Page07AnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
}
protected void init()
{
minAlpha = 0;
mAlpha = minAlpha;
_alpha_step = 5;
maxAlpha = 255;
mPaint = new Paint();
mPaint.setAlpha(minAlpha);
state = Page07State.WAITING;
overlay = new ImageView(mContext);
overlay.setImageResource(R.drawable.black_background);
drawable = (BitmapDrawable) overlay.getDrawable();
bitmap = drawable.getBitmap();
last_time = 0;
}
protected void draw_bitmaps(Canvas canvas)
{
if(state != Page07State.WAITING)
{
DebugLog.d(TAG, "drawing " + Integer.toString(which));
canvas.drawBitmap(bitmap, 0, 0, mPaint);
}
update_bitmaps();
invalidate();
}
public void update_bitmaps()
{
if(state == Page07State.DARKENING)
{
if(mAlpha < maxAlpha)
{
if(System.currentTimeMillis() > last_time + 12)
{
last_time = System.currentTimeMillis();
mAlpha += _alpha_step;
mPaint.setAlpha(mAlpha);
}
}
else
{
state = Page07State.DARKENED;
}
}
}
public void runAnimation()
{
state = Page07State.DARKENING;
}
}
Adding to android developer's answer:
imageView.setColorFilter(Color.rgb(123, 123, 123), android.graphics.PorterDuff.Mode.MULTIPLY);
you can setColorFilter on any view like this:
GradientDrawable gd = (GradientDrawable) textView.getBackground();
gd.setColor(color); //you can also set BG color to a textview like this
gd.setColorFilter(Color.rgb(123, 123, 123), android.graphics.PorterDuff.Mode.MULTIPLY);
you could try using the Alpha animation like this (perhaps on the rectangle):
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(350);
That would cause the rectangle to gradually become opaque over 350 seconds...
Android actually exposes a drawable which can be used to darken views. You can easily attach it to any view with an Overlay.
Here are two extension functions which can be used to darken any view.
fun View.darken() {
val darkOverlay = ResourcesCompat.getDrawable(
resources,
android.R.drawable.screen_background_dark_transparent,
context.theme
)!!.mutate() // We mutate the drawable so we can later implement a fade in/out animation and animate the Drawable's alpha property. Since Drawables share their state we need to mutate otherwise we would impact all instances of this drawable
darkOverlay.setBounds(0, 0, width, height)
setTag(R.id.dark_overlay, darkOverlay)
overlay.add(darkOverlay)
}
fun View.lighten() {
(getTag(R.id.dark_overlay) as? Drawable)?.let {
overlay.remove(it)
setTag(R.id.dark_overlay, null)
}
}
Make sure you add the id to ids.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="dark_overlay" type="id" />
</resources>
And if you're darkening your application's root layout and would like to darken the NavigationBar as well, you might need to add the the following to your theme in styles.xml
<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- required for api 29 otherwise the system will set a white background color to the NavigationBar to ensure the buttons are visible -->
<item name="android:enforceNavigationBarContrast">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
You should check iPaulPro's answer in this question. You will need to extend ImageView and override the onDraw() method.
Depending on what you are going to do, Alexandru Cristescu's answer is also valid but you should
call setFillAter(true) for the animation to persist after finished.
I'm trying to create a View with rounded corners (and a background color of choice) that I can reuse with different background colors; hard to explain, so here's my code:
/app/src/com/packagename/whatever/CustomDrawableView.java
package com.packagename.whatever;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.PaintDrawable;
import android.util.AttributeSet;
import android.view.View;
public class CustomDrawableView extends View {
private PaintDrawable mDrawable;
int radius;
private void init(AttributeSet attrs) {
TypedArray a = getContext().obtainStyledAttributes(attrs,R.styleable.RoundedRect);
radius = a.getInteger(R.styleable.RoundedRect_radius, 0);
}
public CustomDrawableView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
mDrawable = new PaintDrawable();
}
protected void onDraw(Canvas canvas) {
mDrawable.setCornerRadius(radius);
mDrawable.draw(canvas);
}
}
Here's the XML to display the custom component:
/app/res/layout/test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ny="http://schemas.android.com/apk/res/com.packagename.whatever"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:padding="10dp">
<com.packagename.whatever.CustomDrawableView
android:id="#+id/custom"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#b80010"
ny:radius="50"
/>
</LinearLayout>
I'm wanting the red box to have 50px rounded corners, but as you'll see, it does not:
The idea is that I could easily change the background color in the XML and automatically have a nice View with rounded corners, without having to create multiple drawables.
Thanks for the help!
You need to set your corner radius and color into the background drawable.
Here is one way that would work. Grab the color you set in android:background, then use it to create a new drawable that you set into the background in the constructor. This will work as long as you only set android:background to a color value.
public CustomDrawableView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
// pull out the background color
int color = attrs.getAttributeIntValue("http://schemas.android.com/apk/res/android", "background", 0xffffffff);
// create a new background drawable, set the color and radius and set it in place
mDrawable = new PaintDrawable();
mDrawable.getPaint().setColor(color);
mDrawable.setCornerRadius(radius);
setBackgroundDrawable(mDrawable);
}
If you override onDraw, make sure you call super.onDraw(canvas) first to get the background drawn.
given a simple shapedrawable like this:
public ShapeDrawable Sd(int s){
float[] outerR = new float[] { 12, 12, 12, 12, 12, 12, 12, 12 };
ShapeDrawable mDrawable = new ShapeDrawable(new RoundRectShape(outerR, null,null));
mDrawable.getPaint().setColor(s);
return mDrawable;
}
you can do the following:
LinearLayout l=(LinearLayout) findViewById(R.id.testLayout);
l.setBackgroundDrawable(Sd(0xff74AC23));
where the 12's represent the radius.
you could apply this to any view for a background drawable.
Take a look at this question: How do I set the rounded corner radius of a color drawable using xml?
And perhaps also these two:
How to add rounded corner to a drawable I'm using as a background in Android?
How should I give images rounded corners in Android?