Develop Reference

Linear Layout behind ImageView in Relative Layout

Let me explain i have a xml like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_circle" />
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView1"
android:textColor="#color/lblTextColor"
android:textSize="#dimen/lblTextLarge"
android:textStyle="normal" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView2"
android:textColor="#color/lblHintColor2"
android:textSize="#dimen/lblTextMedium"
android:textStyle="normal" >
</TextView>
</LinearLayout>
</RelativeLayout>
And this gives me Image and TextViews next to it
But i want to accomplish something like this
that TextView Background is extended (padding maybe) at the half of the Rounded Image (behind it) so that it looks like its "part" of the image. Or I was thinking of Making a view with background white that goes behind TextView so that it looks that way. But wanted to ask here maybe if there is a better way to do this.
I hope i was clear in explaining this (That is why I added pictures).

I have tried to use demo with your xml file and you can check below code. I had to give static height and width of the ImageView to achieve result.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/imgCarCircle"
android:layout_alignTop="#id/imgCarCircle"
android:layout_marginLeft="30dp"
android:background="#color/colorAccent"
android:orientation="vertical"
android:paddingLeft="40dp">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text1"
android:textStyle="normal"></TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text2"
android:textStyle="normal"></TextView>
</LinearLayout>
<ImageView
android:id="#+id/imgCarCircle"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>

try these:
first solution: change this
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
to this:
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_marginLeft="20dp" // or just figure your image width and set this programatically
android:layout_height="wrap_content"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
second solution: it to use AbsoluteLayout which is a bit hard to handle.

RelativeLayout or LinearLayout?

I am new to Android development, and I am unable to understand why it is not working as per desired output.
The desired output and the output I am getting are shown below as well as the ml layout.
Desired output
Achieved output
Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.caringhumans.rds.caringhumans.MainActivity">
<ImageView
android:id="#+id/logo"
android:src="#drawable/logo"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_toLeftOf="#+id/caring"/>
<TextView
android:id="#+id/caring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Caring Humans"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="25sp"
android:textColor="#f70f59"/>
<ImageView
android:id="#+id/child"
android:src="#drawable/child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/caring"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Campaign"
android:textColor="#f70f59"
android:textSize="22sp"
android:layout_below="#+id/child"/>
</RelativeLayout>

Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawableLeft="#drawable/logo"
android:gravity="center"
android:text="Caring Humans"
android:textColor="#f70f59"
android:textSize="25sp" />
<ImageView
android:id="#+id/child"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/logo"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/child" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/child"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Campaign"
android:textColor="#f70f59"
android:textSize="22sp" />
</RelativeLayout>
The problem is with image trying fixing that and your problem can be resolved.

LinearLayouts are used for placing your Views in a linear shape, either in a row or in a column.
The latter seems to be what you are after.
RelativeLayouts are used when you want to place the positions of your Views in a non linear way, rather using a relation between them (toRightOf, above, or similar).

In order for the Imageview to really "wrap" around the image you are displaying you need to add these two attributes
android:scaleType="fitXY"
android:adjustViewBounds="true"
documentation: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
as for the parent layout here you should probably use LinearLayouts (you will need to add to them android:orientation="vertical" as the default one is horizontal)

Change your code to this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.caringhumans.rds.caringhumans.MainActivity">
<ImageView
android:id="#+id/logo"
android:src="#drawable/logo"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_toLeftOf="#+id/caring"/>
<TextView
android:id="#+id/caring"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Caring Humans"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="25sp"
android:textColor="#f70f59"/>
<ImageView
android:id="#+id/child"
android:src="#drawable/child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/text"
android:layout_below="#+id/caring"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Campaign"
android:textColor="#f70f59"
android:textSize="22sp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

Adding following two tag into ImageView with id 'child' can resolve your problem.
android:scaleType="fitXY"
android:adjustViewBounds="true"
FitXY scale the image using fill
and you need to set adjustViewBounds to true to adjust its bounds to preserve the aspect ratio of its drawable.

<ImageView
android:id="#+id/child"
android:src="#drawable/child"
android:layout_width="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_height="256dp"
android:layout_below="#+id/caring"/>
This would help you to achieve desired layout. Increase height of image according to your needs. :)

Android - ImageView overlay another ImageView

I would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:
I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.
EDIT:
Sorry, here is my layout xml code
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
</RelativeLayout>

I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<TextView
android:id="#+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/white"
android:textSize="17sp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/black"
android:textSize="17sp"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/plus"
app:layout_anchor="#+id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Alternate way Try this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
// this is your first layout to put the big image
// use src or backgroud image as per requirement
<LinearLayout
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
// this is your bottom layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
// This is the imageview which overlay the first LinearLayout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/success"
android:adjustViewBounds="true"
android:layout_gravity="center"/>
</FrameLayout>
its look like this
found one more solution for that (Edit)
if your big image size is fixed height you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/layoutTop"
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="200dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/layoutTop" >
</RelativeLayout>
<ImageView
android:id="#+id/overlapImage"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="#id/layoutBottom"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-20dp"
android:adjustViewBounds="true"
android:src="#drawable/testimage" />
</RelativeLayout>
Refernce :- Android: Placing ImageView on overlap between layouts
Hope this will help.Good Luck

Try out this way:
Just change layout_width and layout_height according to your need.
<?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:orientation="vertical" >
<View
android:id="#+id/viewOne"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#126989" />
<View
android:id="#+id/viewTwo"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/viewOne"
android:background="#547866" />
<View
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignBottom="#+id/viewTwo"
android:layout_centerHorizontal="true"
android:background="#ff7800"
android:layout_marginBottom="35dp" />
</RelativeLayout>
It will look like this:

I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/parentLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/image_view_product"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/circle"
android:src="#drawable/ic_add_circle_green_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Use layout_marginTop = -20dp ( Half of your image size ). It will go up.
android:layout_marginTop="-20dp"

put both the image in Relative layout
first define the image you want to put behind the green circle
than define the green circle as
android:layout_alignBottom="#+id/Image1"
Than adjust the position by giving margin to the green circle image.

I recommend you to use a framelayout with these two images.
with the refresh imageview at the bottom and the table fan at the top.
Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.
And do the set the gravity of the refresh icon to be bottom|center to make it look this way.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_fan"
android:scaleType="centerCrop"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<ImageView
android:src="#drawable/ic_refresh"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center|bottom"/>
</FrameLayout>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="#+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.
I did not run this code so if you face any issues just let me know i hope this works well for you..

Screenshot:
activity_main.xml:
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="null"
android:scaleType="fitXY"
android:src="#drawable/album9" />
<ImageView
android:id="#+id/imageView_round"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/user_profile" />
</RelativeLayout>

Android: gravity ImageView in RelativeLayout failed

I would like to align this ImageView in center (horizontal and vertical):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header"
android:gravity="center">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_event_black_18dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#color/sliding_tab_border_color"/>
</RelativeLayout>
If I don't add the line (the View) after my ImageView it's perfect, it's work, but with this line the gravity doesn't work.
Thanks by advance!

You need to change some property and your view is perfect. Just check below and you see I change gravity property in .
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header"
>
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#color/sliding_tab_border_color"/>
</RelativeLayout>
You need to use
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
instead of
android:layout_gravity="center_horizontal|center_vertical"
because This is works in LinearLayout.
But, for RelativeLayout you need to use above property for gravity set.

Try android:layout_centerInParent="true" property of Relativelayout and remove the gravity.
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:layout_centerInParent="true"
android:src="#drawable/ic_event_black_18dp"/>

You shoud use layout_alignBottom instead layout_alignParentBottom in View element.
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignBottom="#+id/icon"
android:background="#color/sliding_tab_border_color" />

Change your code with this .
It is working and i changed the icon to the one which was available with me, you can use your icon
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:src="#drawable/abc_ic_ab_back_mtrl_am_alpha"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/li">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"/>
</LinearLayout>
</RelativeLayout>

You can use one more layout element to merge ImageView and View elements. Like this;
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header"
android:gravity="center">
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:src="#drawable/ic_event_black_18dp"/>
<View
android:layout_below="#+id/icon"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/sliding_tab_border_color"/>
</RelativeLayout>
</RelativeLayout>

Android relative layout, positioning something in the middle of 2 views [duplicate]

This question already has answers here:
issue with "#id" vs "#+id" in positioning in Relative Layout
(3 answers)
Closed 7 years ago.
I have 2 ImageButtons and a Seerkbar inside a relative layout and I am trying to position them so that :
1) first imageButton is on the left, it's left side and the parent's left side align.
2) second imageButton is on the right, it's right side and the parent's right side align.
3) the Seekbar is in the middle, and it covers all of the remaining space.
It should look something like this:
I tried this:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/image_1"/>
<SeekBar android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_1"
android:layout_toLeftOf="#id/image_2"
android:max="95"/>
<ImageButton android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/image_2"/>
</RelativeLayout>
This works fine on my intellij device preview, BUT fails to compile because of the line:
android:layout_toLeftOf="#id/image_2"
as I am using the id/image_2 before declaring it. Is there a solution to this ?

TRY THIS....
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/image_1"/>
<SeekBar android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image_1"
android:layout_toLeftOf="#+id/image_2"
/>
<ImageButton android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/image_2"/>
</RelativeLayout>

I think you forgot to put + sign before id like this:
android:layout_toRightOf="#+id/image_1"
android:layout_toLeftOf="#+id/image_2"

This would help you deal with different resolution, give it a try
i have put the imageview instead of seekbar lol
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:gravity="center"
android:background="#FFF"
android:layout_margin="1dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#aef"
android:layout_margin="4dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:background="#984"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="100dip"
android:layout_weight="20"
android:background="#fec"
android:layout_margin="4dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView2"
android:background="#594"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="#9ef"
android:layout_margin="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageView3"
android:background="#994"/>
</LinearLayout>
</LinearLayout>

I don't recommend in the RelativeLayout to reference two components such as toRightOf and toLeftOf. Always try to reference each to only one. In your case you can also use LinearLayout with weights for a uniformed distribution for the chils as the following
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<SeekBar
android:id="#+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:max="95" />
<ImageButton
android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>