Android Text over image

Question

I have an imageView with an image, over that image I want to place a text. How can I achieve that?

Simple way is to take a textView and set it background as you do in ImageView. it will do your work easy.. — Zar E Ahmer, May 23 '14 at 12:08
just look at below link. I hope it will help u... https://stackoverflow.com/questions/11100428/add-text-to-image-in-android-programmatically/26064945#26064945 — Ganesh Katikar, Sep 26 '14 at 17:19

score 168 · Answer 1 · edited Feb 09 '18 at 09:40

That is how I did it and it worked exactly as you asked for inside a RelativeLayout:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/myImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/myImageSouce" />

    <TextView
        android:id="@+id/myImageViewText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/myImageView"
        android:layout_alignTop="@id/myImageView"
        android:layout_alignRight="@id/myImageView"
        android:layout_alignBottom="@id/myImageView"
        android:layout_margin="1dp"
        android:gravity="center"
        android:text="Hello"
        android:textColor="#000000" />

</RelativeLayout>

Thanks a ton for this example. I tried to use the compoundedDrawable textview but there I am not able to set an image url. But it's important to use this workaround in a relative layout for the layout_align settings to be recognized. — AntonSack, Oct 05 '13 at 11:17
putting the id of control to the alignment solved a lot, thanks — jack, Oct 15 '17 at 00:25

score 19 · Answer 2 · answered Oct 26 '12 at 14:56

19

You may want to take if from a diffrent side: It seems easier to have a TextView with a drawable on the background:

 <TextView
            android:id="@+id/text"
            android:background="@drawable/rounded_rectangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        </TextView>

answered Oct 26 '12 at 14:56

martar

448
3
9

10

the problem with this answer is you cant control the background attributes like imageView . scale for example . – Jesus Dimrix Sep 08 '13 at 12:28
1

creating a drawable can allow you do that I hope @JesusDimrix – Moses Wangira Feb 08 '21 at 06:05

score 7 · Answer 3 · edited Oct 16 '13 at 09:45

7

You want to use a FrameLayout or a Merge layout to achieve this. Android dev guide has a great example of this here: Android Layout Tricks #3: Optimize by merging.

edited Oct 16 '13 at 09:45

JJD

50,076
60
203
339

answered Mar 09 '11 at 08:14

Hakan Ozbay

4,639
2
22
28

score 7 · Answer 4 · answered Mar 09 '11 at 08:14

You could possibly

make a new class inherited from the Class ImageView and
override the Method onDraw. Call super.onDraw() in that method first and
then draw some Text you want to display.

if you do it that way, you can use this as a single Layout Component which makes it easier to layout together with other components.

score 6 · Answer 5 · edited Apr 15 '15 at 10:57

6

There are many ways. You use RelativeLayout or AbsoluteLayout.

With relative, you can have the image align with parent on the left side for example and also have the text align to the parent left too... then you can use margins and padding and gravity on the text view to get it lined where you want over the image.

edited Apr 15 '15 at 10:57

Philipp E.

3,296
3
34
52

answered Mar 09 '11 at 08:14

Anthony Graglia

5,355
5
46
75

1

I came upon this method by accident. But it is very handy when you want to put some text over an imagebutton or an imageview. Example - put the current temperature over the image of the current conditions. – Phobos Mar 09 '11 at 08:26

score 4 · Answer 6 · answered Sep 05 '13 at 11:35

For this you can use only one TextView with android:drawableLeft/Right/Top/Bottom to position a Image to the TextView. Furthermore you can use some padding between the TextView and the drawable with android:drawablePadding=""

Use it like this:

<TextView
    android:id="@+id/textAndImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:drawableBottom="@drawable/yourDrawable"
    android:drawablePadding="10dp" 
    android:text="Look at the drawable below"/>

With this you don't need an extra ImageView. It's also possible to use two drawables on more than one side of the TextView.

The only problem you will face by using this, is that the drawable can't be scaled the way of an ImageView.

score 3 · Answer 7 · answered Jan 02 '16 at 08:57

Try the below code this will help you`

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="150dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/gallery1"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#7ad7d7d7"
        android:gravity="center"
        android:text="Juneja Art Gallery"
        android:textColor="#000000"
        android:textSize="15sp"/>
</RelativeLayout>

score 3 · Answer 8 · edited Feb 06 '12 at 17:26

3

You can use a TextView and change its background to the image you want to use

edited Feb 06 '12 at 17:26

Eonasdan

7,563
8
55
82

answered Oct 31 '11 at 18:46

the problem with this answer is you cant control the background attributes like imageView . scale for example . – Jesus Dimrix Sep 08 '13 at 12:25

score 1 · Answer 9 · edited Jan 06 '20 at 00:25

The below code this will help you

public class TextProperty {
    private int heigt;                              //读入文本的行数
    private String []context = new String[1024];    //存储读入的文本

    /*
     *@parameter wordNum
     *
     */
    public TextProperty(int wordNum ,InputStreamReader in) throws Exception {
        int i=0;
        BufferedReader br = new BufferedReader(in);
        String s;
        while((s=br.readLine())!=null){
            if(s.length()>wordNum){
                int k=0;
                while(k+wordNum<=s.length()){
                    context[i++] = s.substring(k, k+wordNum);
                    k=k+wordNum;
                }
                context[i++] = s.substring(k,s.length());
            }
            else{
                context[i++]=s;
            }
        }
        this.heigt = i;
        in.close();
        br.close();
    }


    public int getHeigt() {
        return heigt;
    }

    public String[] getContext() {

        return context;
    }
}

public class MainActivity extends AppCompatActivity {

    private Button btn;
    private ImageView iv;
    private final int WORDNUM = 35;  //转化成图片时  每行显示的字数
    private final int WIDTH = 450;   //设置图片的宽度

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

        iv = (ImageView) findViewById(R.id.imageView);
        btn = (Button) findViewById(R.id.button);

        btn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                int x=5,y=10;
                try {
                    TextProperty tp = new TextProperty(WORDNUM, new InputStreamReader(getResources().getAssets().open("1.txt")));
                    Bitmap bitmap = Bitmap.createBitmap(WIDTH, 20*tp.getHeigt(), Bitmap.Config.ARGB_8888);
                    Canvas canvas = new Canvas(bitmap);
                    Paint paint = new Paint();
                    paint.setColor(Color.WHITE);
                    paint.setTextAlign(Paint.Align.LEFT);
                    paint.setTextSize(20f);

                    String [] ss = tp.getContext();
                    for(int i=0;i<tp.getHeigt();i++){
                        canvas.drawText(ss[i], x, y, paint);
                        y=y+20;
                    }

                    canvas.save(Canvas.ALL_SAVE_FLAG);
                    canvas.restore();
                    String path = Environment.getExternalStorageDirectory() + "/image.png";
                    System.out.println(path);
                    FileOutputStream os = new FileOutputStream(new File(path));
                    bitmap.compress(Bitmap.CompressFormat.PNG, 100, os);
                    //Display the image on ImageView.
                    iv.setImageBitmap(bitmap);
                    iv.setBackgroundColor(Color.BLUE);
                    os.flush();
                    os.close();
                }
                catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        });
    }
}```

Android Text over image

9 Answers9

Linked

Related