CODEWITHSUNDEEP
androidandroid-studio
Kayan Almeida
Kayan Almeida

Reputation: 611

Place button over Image View bottom Line

I'm using FrameLayout and want to place the button exactly like this:

Sketch

How can I do this in XML? The button needs to be over the bottom of the image view always.

Here's my xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:layout_centerInParent="true" />

</RelativeLayout>

Upvotes: 0

Views: 5827

Answers (4)

doubleA
doubleA

Reputation: 2466

There is no way to do this naturally in android (pre Lollipop). My suggestion is to trick you user into thinking you are staggering one view over the other.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/full_header"
    android:layout_width="match_parent"
    android:layout_height="148"
    android:clipChildren="false">
    <ImageView
        android:id="@+id/background_image"
        android:layout_width="wrap_content"
        android:layout_height="120dp"
        android:contentDescription="@string/background_image_contentdescription"
        android:adjustViewBounds="true"
        android:layout_alignParentTop="true"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true">
    </Button>

</RelativeLayout>

Then in code when i am setting up this view.

//The large view is an Image with a fixed height of 120dp
int bgImageHeight = FSUtils.dpToPixels(120, getResources().getDisplayMetrics());
//The small view is a Relative Layout with a fixed height of 56 dp.
int dataLeafHeight = FSUtils.dpToPixels(56, getResources().getDisplayMetrics());
//The full header contains the two and its minimum height is set
// to the height of the large image + half the height of the small view
full_header.setMinimumHeight(bgImageHeight + dataLeafHeight/2);

Then you use align parent bottom and align parent top to pull the views to the top and bottom making the smaller view stagger the boundary of the big background view.

I believe there is a way to do this in the new OS LolliPop but i have not experimented with it yet. Maybe someone else can chime in on this.

Upvotes: 0

Ganesh MB
Ganesh MB

Reputation: 1179

You can use Guideline in ConstraintLayout its easy to achieve.

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="#fff">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.37619698" />

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Nicholas Anyanwu
Nicholas Anyanwu

Reputation: 1

You can achieve this by using a constriantLayout as your parent layout, it makes it easy that you can simply drag and drop items at any position in the parent layout.

Upvotes: 0

Karma Hunter
Karma Hunter

Reputation: 389

I believe this could be easier done in RelativeLayout as such 

<RelativeLayout ...>
    <ImageView (image) ...>
    <Button (button)
       android:layout_alignParentBottom="true"
       android:layout_centerInParent="true" />
</RelativeLayout>

Adding a small amount of padding to the image should also achieve the effect of it overlapping the bottom. With this you should easily be able to put the button where you want.

Here's an example of the code being put into action and working on a test app I made up:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="200dp">
<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    android:src="@drawable/login_logo"
    android:paddingEnd="0dp"
    android:paddingStart="0dp"
    android:paddingBottom="15dp" />
<Button
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true" />
</RelativeLayout>

Here's an image displaying it in action, sorry for the less than ideal image I was using as an example.

Upvotes: 1

Related Questions