Is it possible to place one view over another in android?

Question

Can we place a small view over another large view? For example, I have a VideoView which is playing a file in the background. Over this, somewhere in the middle/corner, I want to place another ImageView.

But in Linear/Relative Layout, views can be placed only one after another or relative to each other, and AbsoluteLayout is advised against. So what do I do?

RelativeLayout will work but you can use FrameLayout. – bhups Sep 29 '10 at 12:52 — bhups, Sep 29 '10 at 12:52

Stephan Henningsen · Answer 1 · 2018-09-25T18:31:01.227

The FrameLayout is the simplest ViewGroup and stacks the Views in the order they're defined in layout XML (or added programmatically); the first will be lower, and the last will be on top.

Here is an example where two Views are stacked and offset to better illustrate the point:

Here is the actual layout XML with the two overlapping TextView boxes. The offset of the two boxes is done using android:layout_gravity while android:gravity is used for centering the text itself within each box.

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

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="top|left"
        android:background="@android:color/holo_blue_light"
        android:gravity="center"
        android:text="First is below"/>

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="bottom|right"
        android:background="@android:color/holo_green_light"
        android:gravity="center"
        android:text=" Last is on top"/>

</FrameLayout>

It doesn't work. can't drag the element over the bottom element in design view. — Ronen Festinger, May 02 '22 at 18:09

score 37 · Answer 2 · edited Mar 29 '18 at 05:40

37

Just in case if you want to place a view on top of a ButtonView then use this; android:elevation="7dp" for the view which needs to be placed on top of the button.

edited Mar 29 '18 at 05:40

R.daneel.olivaw

2,681
21
31

answered Mar 28 '18 at 20:39

Roshan Halwai

552
4
5

Thanks. It worked, but also worked with 1dp up for me. – Chivorn Sep 04 '18 at 09:44
Thanks , I got stuck to send back the button for hours.You saved my day – Zulqarnain Jul 27 '20 at 06:11

score 33 · Accepted Answer · edited Sep 05 '11 at 11:59

33

FrameLayouts let you pile each view on top of the one below. This can also be achieved with a RelativeLayout.

edited Sep 05 '11 at 11:59

DonGru

13,532
8
45
55

answered Sep 29 '10 at 12:52

skorulis

4,361
6
32
43

5

Could you please give me an example of either case? I am not able to think it out. – kiki Sep 29 '10 at 12:54
1

@kiki - Google "android FrameLayout" and you'll find plenty of examples. – McStretch Sep 29 '10 at 13:47
2

http://stackoverflow.com/questions/6690530/how-to-show-one-layout-on-top-of-the-other-programmatically-in-my-case – nograde Apr 12 '12 at 07:00
Use FrameLayout as it allow you to overlapping between views – Gaurav Agrawal Mar 05 '13 at 08:24

score 5 · Answer 4 · answered Apr 26 '17 at 21:40

You can also do it by using ConstraintLayout a new layout introduced by google.

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups).

 <?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.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:id="@+id/container"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:layout_weight="4"
  tools:context="com.edalat.example.MainActivity">
  <VideoView
    android:id="@+id/videoView"
    android:layout_width="283dp"
    android:layout_height="349dp"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="24dp"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="24dp"
    android:layout_marginRight="24dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginLeft="24dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintHorizontal_bias="0.509"/>
  <ImageView
     android:id="@+id/imageView"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:srcCompat="@mipmap/ic_launcher"
     app:layout_constraintTop_toTopOf="parent"
     android:layout_marginTop="24dp"
     app:layout_constraintBottom_toBottomOf="parent"
     android:layout_marginBottom="24dp"
     android:layout_marginLeft="24dp"
     app:layout_constraintLeft_toLeftOf="parent"
     android:layout_marginRight="24dp"
     app:layout_constraintRight_toRightOf="parent"/>
   </android.support.constraint.ConstraintLayout>

In ConstraintLayout, views are placed taking in consideration the order. For example ` ` View2 will be placed over View1 (if both are in the same place on screen) — Martin Olariaga, Jul 21 '21 at 13:26

score 3 · Answer 5 · edited Jun 28 '19 at 04:11

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/dp_20"
    android:background="@color/yellow"
    >
        <VideoView
            android:id="@+id/videoview"
            android:layout_width="wrap_content"
            android:layout_centerInParent="true"
            android:layout_height="300dp"
            android:contentDescription="@string/app_name"
             />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/camera"
            android:layout_margin="30dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:id="@+id/imageView" />

</RelativeLayout>

score 2 · Answer 6 · answered Aug 13 '21 at 18:00

2

Create Relative Layout and place views inside it and add

android:elevation="2dp"

for the view whcich is to be over another one

answered Aug 13 '21 at 18:00

Nadeem

53
12

If you are using materialCardView Like components then you should use android:cardElevation – Nadeem Sep 01 '21 at 06:13

score 0 · Answer 7 · answered Feb 03 '23 at 07:52

It can be done easily by putting the back layouts before forwarded layouts in XML file.

for example if I want to cardView1 comes over cardView2 I write this code:

<androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

<androidx.cardview.widget.CardView
        android:id="@+id/cardView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

Since cardView2 comes before cardView1 , cardView1 is the one that comes over the other one.

score 0 · Answer 8 · answered Apr 15 '23 at 22:42

Quite the same problem solved. I did it by placing the needed element between two layouts and using negative value for android:layout_marginTop attribute.

Here's the code:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="-35dp">

And how it looks in the layout:

I'm not allowed to post pictures yet, so here's a link to it

Is it possible to place one view over another in android?

8 Answers8

Linked