Monday, August 19, 2013

Place TextView over ImageView

Last exercise how to "Draw text on bitmap". If you only want to display text over image, not draw text on bitmap, you can simple place TextView over ImageView.

Place TextView over ImageView

Layout
<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:id="@+id/loadimage1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Load Image 1" />

    <TextView
        android:id="@+id/sourceuri1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/caption"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/processing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Draw text on Bitmap" />

    <RelativeLayout
        android:id="@+id/imagelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/result"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:layout_alignParentTop="true"/>
        <TextView
            android:id="@+id/resulttext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:textSize="30sp"
            android:textStyle="bold"
            android:layout_alignLeft="@id/result"
            android:layout_alignTop="@id/result"
            android:layout_alignRight="@id/result"
            android:layout_alignBottom="@id/result"/>
    </RelativeLayout>

</LinearLayout>


MainActivity Java code:
package com.example.androiddrawtextonbitmap;

import java.io.FileNotFoundException;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
 
 Button btnLoadImage1;
 TextView textSource1;
 EditText editTextCaption;
 Button btnProcessing;
 ImageView imageResult;
 TextView textResult;
 
 final int RQS_IMAGE1 = 1;
 
 Uri source1;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  btnLoadImage1 = (Button)findViewById(R.id.loadimage1);
  textSource1 = (TextView)findViewById(R.id.sourceuri1);
  editTextCaption = (EditText)findViewById(R.id.caption);
  btnProcessing = (Button)findViewById(R.id.processing);
  imageResult = (ImageView)findViewById(R.id.result);
  
  textResult = (TextView)findViewById(R.id.resulttext);

  btnLoadImage1.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    Intent intent = new Intent(Intent.ACTION_PICK,
      android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    startActivityForResult(intent, RQS_IMAGE1);
   }});
  
  btnProcessing.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {
    
    if(source1 != null){
     Bitmap processedBitmap = ProcessingBitmap();
     if(processedBitmap != null){
      imageResult.setImageBitmap(processedBitmap);
      Toast.makeText(getApplicationContext(), 
        "Done", 
        Toast.LENGTH_LONG).show();
     }else{
      Toast.makeText(getApplicationContext(), 
        "Something wrong in processing!", 
        Toast.LENGTH_LONG).show();
     }
    }else{
     Toast.makeText(getApplicationContext(), 
       "Select both image!", 
       Toast.LENGTH_LONG).show();
    }
    
   }});
 }
 
 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);
  if(resultCode == RESULT_OK){
   switch (requestCode){
   case RQS_IMAGE1:
    source1 = data.getData();
    textSource1.setText(source1.toString());
    break;
   }
  }
 }
 
 private Bitmap ProcessingBitmap(){
  Bitmap newBitmap = null;
  
  try {
   newBitmap = BitmapFactory.decodeStream(
     getContentResolver().openInputStream(source1));
   
   String captionString = editTextCaption.getText().toString();
   if(captionString != null){
    
    textResult.setText(captionString);
    
   }else{
    Toast.makeText(getApplicationContext(), 
      "caption empty!", 
      Toast.LENGTH_LONG).show();
   }
   
  } catch (FileNotFoundException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  
  return newBitmap;
 }

}

download filesDownload the files.

3 comments:

Unknown said...

after set TextView over ImageView. it can drag freedom?

operadorretail said...

The text is saved with the image? Or just overlays it?

Erik said...

Hello jms,

Please read Draw text on bitmap using Canvas.drawText().