CODEWITHSUNDEEP
javaandroid
lombrozo
lombrozo

Reputation: 169

How to position Android button on top of a TextView?

I need to create the following:

----------------------------------------------------
|     |                                            |
|     |                                            |
----------------------------------------------------
   |                       |
   ImageButton             TextView

The ImageButton has an image and needs to scaled to fit the height of the TextView...

I've managed to position the button using a RelativeLayout:

       <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/tense_textview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/tense"
                android:gravity="center_horizontal"
                android:background="@android:color/holo_orange_dark"
                android:padding="15dp"
                android:textStyle="bold"
                android:textColor="@android:color/white" />
            <ImageButton
                android:id="@+id/pauseButton"
                android:background="@drawable/pause_button_background"
                android:src="@drawable/pause"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp" />
        </RelativeLayout>

However, this gives me:

                           TextView
                           |
----------------------------------------------------  
|         |                                        |
|         |                                        |
|         |-----------------------------------------
|         |                                        |
----------------------------------------------------
     |                     |
     ImageButton           RelativeLayout

Any ideas?

Upvotes: 0

Views: 2376

Answers (4)

Nelson Hoang
Nelson Hoang

Reputation: 413

Use ImageView instead of ImageButton and add
android:layout_alignBottom="@id/tense_textview" android:layout_alignTop="@id/tense_textview" android:scaleType="CENTER_CROP OR CENTER_INSIDE "

CENTER_CROP = Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

CENTER_INSIDE = Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

From personal experience I never use ImageButton because ImageView gives me more flexibility and there is inherent padding in the ImageButton that prevented me from achieving pixel perfection. (It was do-able just a big pain)

Upvotes: 0

Sammys
Sammys

Reputation: 1453

Try this - 

<RelativeLayout
   android:layout_width="fill_parent"
   android:layout_height="wrap_content">
   <TextView
      android:id="@+id/tense_textview"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/tense"
      android:gravity="center_horizontal"
      android:background="@android:color/holo_orange_dark"
      android:padding="15dp"
      android:textStyle="bold"
      android:textColor="@android:color/white"
      android:layout_toRightOf="@+id/pauseButton"
      android:layout_alignParentRight="true"
      android:layout_alignBottom="@+id/pauseButton"
      android:layout_alignTop="@+id/pauseButton"/>
  <ImageButton
      android:id="@+id/pauseButton"
      android:background="@drawable/pause_button_background"
      android:src="@drawable/pause"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="10dp" />
</RelativeLayout>

Upvotes: 0

Rahul Sharma
Rahul Sharma

Reputation: 6169

You need to add properties:

android:layout_alignBottom="@+id/tense_textview"

and

android:layout_alignTop="@+id/tense_textview" to your imageview

Upvotes: 1

Vladimir Petrakovich
Vladimir Petrakovich

Reputation: 4276

Try to set height of the ImageButton to match_parent.

Upvotes: 0

Related Questions