How to display text on android ImageView with Linear Layout. I found many examples on stack overflow for this purpose but all are for Relative Layout, Frame Layout But I am not getting it in Linear Layout.
I have tried for android:text="My Text" But its not working.
Please suggest me if its possible to do so. If so how can it be done.
<ImageView
android:id="#+id/share_button"
android:layout_width="fill_parent"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_margin="5dp"
android:layout_weight="2"
android:text="text"
android:background="#drawable/iosbutton" />
This is the Image attached to this ImageView on which I want to display text in the center.
Try this
Use this method
public BitmapDrawable writeOnDrawable(int drawableId, String text){
Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.BLACK);
paint.setTextSize(20);
Canvas canvas = new Canvas(bm);
canvas.drawText(text, 0, bm.getHeight()/2, paint);
return new BitmapDrawable(bm);
}
call like this
ImageView image=(ImageView)findViewById(R.id.imageView1);
image.setImageDrawable(writeOnDrawable(R.drawable.ic_launcher,"Hello"));
Does it have to be an ImageView?
<TextView
android:id="#+id/share_button"
android:layout_width="fill_parent"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_margin="5dp"
android:layout_weight="2"
android:text="text"
android:gravity="center"
android:background="#drawable/iosbutton" />
Related
I have an activity that list data with listView with their row's images.
String[] from = {"subject","img","description","id"};
int[] to = {R.id.tv_subject,R.id.iv_pic, R.id.tv_details, R.id.hide_id};
SimpleAdapter adapter = new SimpleAdapter(ListViewActivity.this,searchResult,R.layout.listview, from, to);
mListView.setAdapter(adapter);
My ListView.xml is :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_pic"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"/>
<TextView
android:textColor="#000000"
android:layout_gravity="center"
android:id="#+id/tv_subject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:textColor="#000000"
android:layout_gravity="right"
android:paddingRight="5dp"
android:id="#+id/tv_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:visibility="gone"
android:id="#+id/hide_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
now I have a part of code that display image with mask:
ImageView mImageView= (ImageView)findViewById(R.id.img);
ImageView mImageView1= (ImageView)findViewById(R.id.img1);
Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.c);
Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.poster);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode( new PorterDuffXfermode(Mode.DST_IN));
mCanvas.drawBitmap(original, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
mImageView.setImageBitmap(result);
I wish to display each image in listview with mask(each image is in a row if listview)
In order to customize the inflation of your ListView (eg. set "masks") you have to subclass the SimpleAdapter you have created and override the getView(int position, View convertView, ViewGroup parent) method.
In that method you check the view that was clicked and inflate it appropriately, setting the ImageView's and TextViews that you desire. And also within that method you will fill in the data that corresponds to the view that is being inflated.
Check out this tutorial for more.
Thanks for helping me to solve the problem.
I use setImageViewBitmap to widget imageview from a bitmap by drawing round corners with canvas, but it has a black field in imageview's corners. I don't know why this only happens on Widget but didn't happens on my Activity view.
How to let my corners on Widget look like corners on Activity?
here is my situation
on Widget :
http://goo.gl/YpzhJh
on Activity :
http://goo.gl/bc09oL
here is my code of making round corners.
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
//final int color = 0xff000000;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 60;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
here is the code of setting widget remoteviews
bitmap = getRoundedCornerBitmap(orgin_bitmap);
if(bitmap!=null)
views.setImageViewBitmap(R.id.main_imageview, bitmap);
here is widget xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/main_imageview"
android:layout_width="600dp"
android:layout_height="600dp"
android:layout_centerInParent="true"
android:background="#color/transparent"
android:visibility="visible"
android:src="#drawable/widget_back3" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="600dp"
android:layout_height="600dp"
android:visibility="visible"
android:layout_centerInParent="true"
android:src="#drawable/widget_back2" />
<ImageView
android:id="#+id/imageView_redheart"
android:layout_width="600dp"
android:layout_height="600dp"
android:layout_centerInParent="true"
android:background="#color/blue"
android:visibility="visible"
android:src="#drawable/widget_back1" />
<TextView
android:id="#+id/now"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#color/transparent"
android:fontFamily="sans-serif-condensed"
android:gravity="center"
android:shadowColor="#color/black"
android:shadowRadius="3.0"
android:text="9999"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/trans"
android:textSize="25sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
setbackground(null);
will help
in xml
android:background="#null"
my imageview not fully show on imageview width see this image its show white space http://imgur.com/3fDXgij but i want to show mageview like this shape http://imgur.com/g8UeI4b and image show full in imageview no white space below is my code please help me
<ImageView
android:id="#+id/test_button_image"
android:layout_width="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:background="#drawable/border6"
android:src="#drawable/ic_launcher" >
</ImageView>
android:adjustViewBounds="true"
Reference: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
this should fix your problems. In this case scaling is not your problem, because image is already scaled. Problem is that container is trying to get all possible space inside layout, but image cannot expand its width because its trying to keep its ratio.
<ImageView
android:id="#+id/test_button_image"
android:layout_width="80dp"
android:adjustViewBounds="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:background="#drawable/border6"
android:src="#drawable/ic_launcher" >
</ImageView>
This attribute will "crop" the remaining not used space in ImageView.
Also you should check your background image if its properly 9patch image.
I would recommend you to put the imageview without any background inside FrameLayout, and set border image for this FrameLayout.
Imageview to fill a layout (in your xml):
android:scaleType="fitXY"
If you want to cut the corners you have to :
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = pixels;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
reference
<LinearLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#Android:Color:white"
android:padding="1dp" >
<ImageView
android:id="#+id/test_button_image"
android:layout_width="wrapcontent"
android:layout_height="wrapcontent"
android:background="#drawable/border6"
>
</ImageView>
</LinearLayout>
I would like to do this on my android chat
but I can not get my picture fit my bubble.
-I have a LinearLayout, and his background is a bubble 9patch
-within this, I have a imageview, insert the image here
but not how to make this fit the background like we see on screen.
this is how my image is
could give me an idea of how I can do this?
thank.
UPDATE : 28/04/2013
this is my layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rtlImganen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:gravity="center_vertical" >
<LinearLayout
android:id="#+id/lnyGenImagenMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/bocadilloazulmio"
android:gravity="right"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imgImagenMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:maxHeight="#dimen/maximagen"
android:maxWidth="#dimen/maximagen"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imgPlayMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/play" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp" >
<ImageView
android:id="#+id/imgImagenEnvioRecibidoMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/enviadorecibido" />
<TextView
android:id="#+id/txtFechaImagenVideoMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:textColor="#0000FF"
android:textSize="8sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
yet I still haven´t the solution
this can only be done with a custom view. I had the same problem. Look for Custom ImageView and Paths and clipping Bitmaps. I wrote this snippet to clip a speech bubble shape out of a given bitmap:
public static Bitmap clipit(Bitmap bitmapimg,int direct) {
//1 = direction right
//0 = direction left
Bitmap output = Bitmap.createBitmap(bitmapimg.getWidth(),
bitmapimg.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmapimg.getWidth(),
bitmapimg.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
if(direct == 0) {
canvas.drawRect(0, 0, bitmapimg.getWidth()-15, bitmapimg.getHeight(), paint);
Path path = new Path();
path.moveTo(bitmapimg.getWidth()-15, 10);
path.lineTo(bitmapimg.getWidth(), 20);
path.lineTo(bitmapimg.getWidth()-15, 30);
path.lineTo(bitmapimg.getWidth()-15, 10);
canvas.drawPath(path,paint);
}
if(direct == 1) {
canvas.drawRect(15, 0, bitmapimg.getWidth(), bitmapimg.getHeight(), paint);
Path path = new Path();
path.moveTo(15, 10);
path.lineTo(0, 20);
path.lineTo(15, 30);
path.lineTo(15, 10);
canvas.drawPath(path,paint);
}
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmapimg, rect, rect, paint);
return output;
}
does this solve your problem?
I have this xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/photo0"
android:id="#+id/imagBackground">
<TextView android:layout_width="20dip" android:layout_height="20dip"
android:layout_marginLeft="250dip" android:layout_marginTop="15dip" android:background="#FFFFFF"
android:id="#+id/index" android:text="0" android:textColor="#000000">
</TextView>
<ImageView android:layout_marginTop="280dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#drawable/anim_ctrl_panel" android:id="#+id/change">
</ImageView>
</LinearLayout>
and over this I must draw some rectangular by code. How to do this ?
I tried this :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
layout = (LinearLayout) findViewById(R.id.imagBackground);
changeImage = (ImageView) findViewById(R.id.change);
index = (TextView) findViewById(R.id.index);
draw();
}
private void draw() {
System.out.println("desenam");
int width = 50;
int height = 100;
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Paint paint = new Paint();
paint.setColor(Color.BLUE);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.RED);
canvas.drawRect(25, 50, 75, 150, paint);
ImageView imageView = new ImageView(this);
imageView.setImageBitmap(bitmap);
layout.addView(imageView);
setContentView(layout);
}
but the rectangulars are on the bottom on screen. How to set the location where to put them?
My guess is, the reason why it's in the bottom of the page is because of the LinearLayout: in the end you will have 3 children: TextView, ImageView and ImageView, all below each other.
A few possible solutions:
Add a FrameLayout inside the LinearLayout and add the ImageViews inside it, so the hierarchy would be:
LinearLayout
TextView
FrameLayout
ImageView
ImageView
Use a RelativeLayout instead of the LinearLayout and align all the edges of the second ImageView with the first one
Create a custom ImageView class, for example "com.foo.bar.MyImageView", which of course extends ImageView. Override onDraw:
public void onDraw(Canvas canvas) {
super.onDraw(canvas); // This will render the original image
// ... and here you can have the code to render the rectangle
}
In the xml you replace
<ImageView ...
with
<com.foo.bar.MyImageView ...
I would go for the last solution, since from a performance point of view it's the best.
try this code:
Point left=new Point(x, y);
paint.setColor(Color.parseColor("#00CCFF"));
paint.setStyle(Style.FILL);
canvas.drawCircle(left.x, left.y, 9, paint);
So you have to create a Point using pixels and then draw a rectangle around it otherwise it doesn't know where to draw
Why dont you do this in the layout file itself:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/photo0"
android:id="#+id/imagBackground">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#android:color/darker_gray">
<LinearLayout android:layout_width="fill_parent"
android:layout_margin="5dip"
android:layout_height="fill_parent" android:background="#android:color/black">
<TextView android:layout_width="20dip" android:layout_height="20dip"
android:layout_marginLeft="250dip" android:layout_marginTop="15dip" android:background="#FFFFFF"
android:id="#+id/index" android:text="0" android:textColor="#000000">
</TextView>
<ImageView android:layout_marginTop="280dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#drawable/anim_ctrl_panel" android:id="#+id/change">
</ImageView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Try to change your LinearLayout to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:gravity="top" android:layout_gravity="top"
android:layout_height="fill_parent" android:background="#drawable/photo0"
android:id="#+id/imagBackground">
...