ImageButton with TextView in Android

Question

In My application I am using image button's and textview's for that I designed my linear layout like this.

Now I want Image button bottom I want to display the textview in all the cases.can any one please help me

xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />


        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>


    </LinearLayout>

     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>

    </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
       <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.1" >

        <ImageButton
            android:id="@+id/imageButton8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>

    </LinearLayout>

</LinearLayout>

score 2 · Answer 1 · edited Oct 25 '14 at 13:27

Hi Very simple approach is used only textView instead of complex layout it will slow down performance.

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/text"
    android:src="@drawable/ic_launcher" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/text" />

the same code can be converted into simple text view as

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text" 
android:drawableTop="@drawable/ic_launcher"
android:gravity="center"/>

:)

http://blog.stylingandroid.com/compound-drawable/

enter image description here

MysticMagicϡ · Accepted Answer · 2014-10-10T11:58:08.427

What's the issue in using RelativeLayout instead of LinearLayout?

Example:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/student" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageButton1"
        android:text="TextView" />
</RelativeLayout>

OR:

Use a LinearLayout woth orientation specified as Vertical:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/student" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>

Hope this helps.

EDIT:

If you want two textViews below two ImageButtons: You can use this way:

Put two LinearLayouts (Vertical) inside another parent LienarLayout (Horizontal)

Example:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horoizontal" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/student" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </LinearLayout>
</LinearLayout>

Hi MysticMagic left side i have imagebutton1 and textview1 linear layout vertical means going next in horizonyial I want 2 imagebutton's and textview's — user3640092, Oct 10 '14 at 11:44
showing only imagebutton1 and textview1 not showing imagebutton2 and textview2 not showing in the above code — user3640092, Oct 10 '14 at 11:57
@user3640092 problem was in LinearLayout's width. Make it wrap_content as per edited answer and check again. — MysticMagicϡ, Oct 10 '14 at 11:58
@user3640092 fill parent in outer layout is fine.. But two inner layouts need to be wrap_content, so they can becontained in same row. — MysticMagicϡ, Oct 10 '14 at 12:10
k thank you how to give space between imagebutton1 and imagebutton2 — user3640092, Oct 10 '14 at 12:13
You can use margin and padding property for that. [refer this](http://android4beginners.com/2013/07/lesson-2-2-how-to-use-margins-and-paddings-in-android-layout/) @user3640092 — MysticMagicϡ, Oct 10 '14 at 12:14
I want constant sizes for all devices means which one best for spaces — user3640092, Oct 10 '14 at 12:32
padding, and use along with property layout_weight and weightSum. @user3640092 — MysticMagicϡ, Oct 10 '14 at 12:33
@user3640092 read about [weightsum in detail here](http://stackoverflow.com/questions/7452741/what-is-androidweightsum-in-android-and-how-does-it-work). I won't be able to explain that nicely myself :) — MysticMagicϡ, Oct 10 '14 at 12:36

score 0 · Answer 3 · edited Oct 10 '14 at 12:12

0

Set this property to your ImageButton:

android:layout_gravity="bottom"

edited Oct 10 '14 at 12:12

anaximander

7,083
3
44
62

answered Oct 10 '14 at 11:34

Chetan Gaikwad

1,268
1
13
26

Could you expand on what this does, and why that fixes the problem? – anaximander Oct 10 '14 at 12:11

ImageButton with TextView in Android

3 Answers3