Overlay text over imageview in framelayout programmatically - Android

andreasv picture andreasv · Oct 10, 2011 · Viewed 19.3k times · Source

I am trying to implement a textview over an image in a framelayout at the center and bottom of the layout as it is seen here:

http://developer.android.com/resources/articles/layout-tricks-merge.html

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">

<ImageView  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 

    android:scaleType="center"
    android:src="@drawable/golden_gate" />

<TextView
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="20dip"
    android:layout_gravity="center_horizontal|bottom"

    android:padding="12dip"

    android:background="#AA000000"
    android:textColor="#ffffffff"

    android:text="Golden Gate" />

</FrameLayout>

I am trying to implement this programmatically but with no luck.. I always get the textview on the top left corner..can anyone help? Here is my code:

FrameLayout frameLay = new FrameLayout(MainScreen.this);                            
LayoutParams layoutParamsFrame = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);

frameLay.setLayoutParams(layoutParamsFrame);

LinearLayout.LayoutParams layoutParamsImage= new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);

ImageView imageView= new ImageView(MainScreen.this);
imageView.setImageResource(R.drawable.movie);   
imageView.setLayoutParams(layoutParamsImage);

TextView theText=new TextView(MainScreen.this);
theText.setText("GOLDEN Gate");
theText.setTextColor(Color.WHITE);                           
theText.setTypeface(Typeface.DEFAULT_BOLD); 

LayoutParams layoutParamsText= new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

theText.setLayoutParams(layoutParamsText);

theText.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.BOTTOM);

frameLay.addView(theText);
frameLay.addView(imageView);

Answer

blessenm picture blessenm · Oct 10, 2011

All you need to do ias make the textview to fill the parent like

LayoutParams layoutParamsText= new LayoutParams(LayoutParams.FILL__PARENT, 
        LayoutParams.FILL_PARENT); 

When you set gravity to the textview, it mean you are telling the textview where to position its children. But since your textview only has the size of your text, the gravity wont show any difference. So just make the textview to fill the parent.

But I think RelativeLayout is a lot more suitable for this than the FrameLayout. Using the RelativeLayout this is how it would look

RelativeLayout rLayout = new RelativeLayout(this);
LayoutParams rlParams = new LayoutParams(LayoutParams.FILL_PARENT
        ,LayoutParams.FILL_PARENT); 
rLayout.setLayoutParams(rlParams);

ImageView image= new ImageView(this); 
image.setImageResource(R.drawable.icon);    
image.setLayoutParams(rlParams);

RelativeLayout.LayoutParams tParams = new RelativeLayout.LayoutParams
        (LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
tParams.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
tParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
TextView text=new TextView(this); 
text.setText("GOLDEN Gate"); 
text.setTextColor(Color.WHITE);                            
text.setTypeface(Typeface.DEFAULT_BOLD);
text.setLayoutParams(tParams);

rLayout.addView(image);
rLayout.addView(text);
setContentView(rLayout);