Search code examples
androidandroid-image

Android ImageButton cut off from screen


How can I place an image button at the bottom of my screen so that a part of it, let's say half, or 20dp, is not on the screen.

If it would be a circle, we would see half a circle at the bottom of the screen.

EDIT: layout added

<RelativeLayout <!-- upper level layout-->
     ...>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">

        <ImageButton
            android:id="@+id/myButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/my_image_button" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="SOME TEXT\nON DRAWABLE"
            android:textColor="@color/bg_start"
            android:textSize="20dp" />
    </FrameLayout>

</RelativeLayout>

Solution

  • Lets say you have RelativeLayout and ImageButton inside it:

    <RelativeLayout android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom">
        <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
    
    </RelativeLayout>
    

    add layout_alignParentBottom property to your RelativeLayout:

    android:layout_alignParentBottom="true"
    

    and layout_marginTop to the ImageButton

    android:layout_marginTop="some dp"
    

    EDIT-after published layout

    add android:layout_marginBottom="-20dp" - not the best solution, but a solution. Try with device (if it actually works). Designer shows half of the image & text moved out of the layout borders

    <RelativeLayout <!-- upper level layout-->
         ...>
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="-20dp"
            android:layout_centerHorizontal="true">
    
            <ImageButton
                android:id="@+id/myButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="@null"
                android:scaleType="fitCenter"
                android:src="@drawable/my_image_button" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="SOME TEXT\nON DRAWABLE"
                android:textColor="@color/bg_start"
                android:textSize="20dp" />
        </FrameLayout>
    
    </RelativeLayout>
    

    OR add layout_marginTop="some dp" to your ImageView and TextView

    <RelativeLayout <!-- upper level layout-->
         ...>
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true">
    
            <ImageButton
                android:id="@+id/myButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="@null"
                android:scaleType="fitCenter"
                android:layout_marginTop="20dp"
                android:src="@drawable/my_image_button" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:layout_marginTop="40dp"
                android:text="SOME TEXT\nON DRAWABLE"
                android:textColor="@color/bg_start"
                android:textSize="20dp" />
        </FrameLayout>
    
    </RelativeLayout>