Set Text on Button with button backround and text background differently

Question

I want to Display image in gridview with a text written on it at bottom. So I took a button and set background on that and set wallpaper on that. This gives a image with a text over which I may make any work.

The code I use is

Button
        android:id="@+id/img"
        android:layout_gravity="center"
        android:gravity="bottom|center"
        android:layout_width="100dp"
        android:paddingBottom="4dp"
        android:textSize="13dp"
        android:layout_height="100dp">
    </Button>

Button imageView = (Button) rowView.findViewById(R.id.img);
        imageView.setText(web[position]);

        imageView.setBackgroundResource(imageId[position]);

And I get the result as the first Image but the problem here is It is tough to read the text on some images

I want the text to be written with its own background as written on second image. So what must I do to achieve this result. Your suggestions are valuable for me. So kindly suggest, Thanks in Advance

enter image description here

possible duplicate of [How can I add a TextView into an ImageView in GridView Layout?](http://stackoverflow.com/questions/11101864/how-can-i-add-a-textview-into-an-imageview-in-gridview-layout) — Steve Benett, Jul 07 '14 at 12:32
possible duplicate of [How to add text to image in grid view?](http://stackoverflow.com/questions/16869403/how-to-add-text-to-image-in-grid-view) — Manish Dubey, Jul 07 '14 at 12:34

score 2 · Answer 1 · answered Jul 07 '14 at 12:31

Use the following layout for your GridView item :

<RelativeLayout
    android:layout_width="100dp"
    android:layout_height="100dp">
    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:id="@+id/caption"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#55000000"
        android:color="#ffffffff"/>
</RelativeLayout>

You are not restricted to using a single View as your list item. On Android, it is common to use compound layouts as list items.

The current example consists in overlaying the image itself with a bottom-aligned TextView. Note that the alignment is done on the TextView itself; not the contained text.

I dont think it's a good idea to set a specific width and height to 100dp though. It should also wrap_content for both. — cokeby190, Jul 07 '14 at 12:42
Yes, the 100dp is arbitrary and is here according to the example from the question. The width can be set to wrap_content and get the right size by setting the appropriate parameters on the GridView. Nevertheless, you would need either to be sure of your pictures' height or set a vertical dimension. The GridView is not able to guess the vertical item dimension for you. Also, it is possible to use a derived ImageVIew that sets it height according to its width, but that's another story. — DavGin, Jul 07 '14 at 13:22

score 1 · Answer 2 · answered Jul 07 '14 at 12:32

1

I suggest you 1) Take one Linearlayout instead of button then set Gravity=bottom|centerInHorizontal 2) Take Textview Inside Linearlayout set background to text view and set text wat you want set gravity=center

Thats it..and get LinearLayout Click event...

answered Jul 07 '14 at 12:32

Jayesh Khasatiya

2,140
1
14
15

Your suggestion is also good but I get the desired result using framelayout, anyways thanks and for your good suggestion i upvoted your answer – nawaab saab Jul 07 '14 at 13:19

score 0 · Answer 3 · answered Jul 07 '14 at 12:30

layout.xml

 <RelativeLayout
        android:id="@+id/RelativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />

        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:background="@drawable/shadow"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="vertical">


            <TextView
                android:id="@+id/TextView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/TextView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="number"
                android:textAppearance="?android:attr/textAppearanceSmall" />

        </LinearLayout>

    </RelativeLayout>

and create shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
 <gradient
    android:angle="270"
    android:endColor="#33000000"
    android:centerColor="#11000000"
    android:startColor="#00000000" />
 </shape>

score 0 · Accepted Answer · answered Jul 07 '14 at 12:39

Try this way,hope this will help you to solve your problem.

colors.xml

<resources>
    <color name="transparent_background">#CC4d4d4d</color>
</resources>

grid_item.xml

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

    <FrameLayout
        android:layout_width="100dp"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:adjustViewBounds="true"
            android:src="@drawable/ic_launcher"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:padding="7dp"
            android:background="@color/transparent_background"
            android:text="Games"/>

    </FrameLayout>
</LinearLayout>

Set Text on Button with button backround and text background differently

4 Answers4

Linked