CODEWITHSUNDEEP
javaandroid
Blaze
Blaze

Reputation: 2339

Android: Placing a text under a button

I am trying to place a text under an image but the text is over lapping on the image. 

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/snap"
        android:textColor="#FFFFFF"
        android:id="@+id/shutterButton"
        android:paddingTop="32sp"
        android:drawablePadding="-22sp"
        android:text="SNAP"></Button>

OUTPUT enter image description here

Please how do I place the text below the image. Many Thanks

Upvotes: 1

Views: 1407

Answers (4)

Sunny Onesotrue
Sunny Onesotrue

Reputation: 152

I would put the Button and the Text field as seperate containers, and then place them both in a LinearLayout with vertical orientation:

`

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="87dp">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/snap"
            android:id="@+id/buttonCamera" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="SNAP"
            android:id="@+id/textSnap"
            android:textAlignment="center" />
    </LinearLayout>

`

Upvotes: 0

Robbert
Robbert

Reputation: 66

This is what i use to accomplish this: note that i use PercentRelativeLayout.

<Button
    android:text="@string/Tesksten" <-- and of course the text.
    android:id="@+id/btContent"
    android:drawableTop="@drawable/ic_menu" <-- display icon on top
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_heightPercent="16%"
    app:layout_widthPercent="100%"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:textStyle="bold"
    android:alpha="0.65"
    android:layout_marginBottom="10dp"/>

What it looks like:

Example

Upvotes: 1

Nitesh Pareek
Nitesh Pareek

Reputation: 362

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/snap"
        android:textColor="#FFFFFF"
        android:id="@+id/shutterButton"
        android:paddingTop="32sp"
        android:drawablePadding="-22sp"
        android:text="SNAP"></Button>

Upvotes: 1

Blackbelt
Blackbelt

Reputation: 157487

use android:drawableTop="@drawable/snap" instead of android:background="@drawable/snap" and get rid of android:paddingTop="32sp" and android:drawablePadding="-22sp"

the property android:drawableTop takes care of drawing the drawable above your text. E.g

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/snap"
    android:textColor="#FFFFFF"
    android:id="@+id/shutterButton" 
    android:text="SNAP" />

Upvotes: 3

Related Questions