0

I need to place 5 imageButtons on top of the screen. I did it with LinarLayout like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.terrormachine.swipeapp.NewAdFragment">


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/image"
            android:id="@+id/imageButton6"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/image"
            android:id="@+id/imageButton7"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/image"
            android:id="@+id/imageButton8"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/image"
            android:id="@+id/imageButton9"
            android:layout_weight="1"
            android:scaleType="fitCenter" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/image"
            android:id="@+id/imageButton10"
            android:layout_weight="1"
            android:scaleType="fitCenter" />
    </LinearLayout>
</RelativeLayout>

Problem is I need to put text centered below every image. I tried several solutions and none seems to work for me. Ive tried this:

Android Text Below Icon (button) How to add a text under the image button in Android? How to place text below a Button or a ImageButton?

Some of them do the trick but images are not scaled. In my case I cant set text below. Is there any way to do this? I don't HAVE to use LinearLayout but I cannot figure any proper way to place them equally separated and with screen width. Any ideas are welcome.

This is my target: enter image description here

Community
  • 1
  • 1
nephilimrising
  • 135
  • 3
  • 18

3 Answers3

2

Just wrap your image button and textview in linear layout as follows :

<LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/image"
                    android:id="@+id/imageButton6"

                    android:scaleType="fitCenter" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Main"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/image"
                    android:id="@+id/imageButton7"

                    android:scaleType="fitCenter" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Main"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/image"
                    android:id="@+id/imageButton8"

                    android:scaleType="fitCenter" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Main"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/image"
                    android:id="@+id/imageButton9"

                    android:scaleType="fitCenter" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Main"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/image"
                    android:id="@+id/imageButton10"

                    android:scaleType="fitCenter" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Main"
                    android:layout_gravity="center"
                    android:textColor="@android:color/black"/>
            </LinearLayout>






        </LinearLayout>
USKMobility
  • 5,721
  • 2
  • 27
  • 34
0

There should be several methods you could do, the first thing I can think of is instead of ImageViews, you can instead use TextViews and inside each TextView specify drawableTop for your image:

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/image" 
        ...etc  />

Otherwise if you need the ImageViews, you can wrap the ImageViews and TextViews into individual Linears to get the alignment:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.terrormachine.swipeapp.NewAdFragment">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

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

            <ImageButton />
            <TextView />
        </LinearLayout>

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

            <ImageButton />
            <TextView />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>
jak10h
  • 519
  • 4
  • 11
0

Don't think about adding text to an image button.

Think about adding an image to a text button:

            <Button
                android:id="@+id/imageButton9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableTop="@drawable/image"
                android:text="Main"/>

With drawablePadding and other settings you can tweak the button to look how you want. To get rid of the button boundary use android:background="@null".

kris larson
  • 30,387
  • 5
  • 62
  • 74