Develop Reference

How show cardview as a dilouge while bluring the background

I have a card view with 2 radio buttons I want to show it as a dialogue
I want to achieve multiple things
Showing card view as a dialogue
blurring the background layout while showing the dialog
I have 2 radio buttons (only one is selectable) I want that after selecting one of them the dialogue will disappear but not immediately at least there should be a short delay so the user can see the selection of the radio button
Note:- If you want more references of the code please tell me I will
update the question as you can find I dint include the fragment_home
java file so the question doesn't get long and confusing
Here is the layout
sort_image.xml
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:backgroundTint="#color/grey"
app:cardCornerRadius="20dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="5dp"
android:fontFamily="#font/roboto"
android:text="Sort by"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/divider_line_sort_by"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/sort_textView"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:backgroundTint="#color/lite_grey"
app:cardCornerRadius="50dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<TextView
android:id="#+id/latest_sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:fontFamily="#font/roboto"
android:text="Latest"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<TextView
android:id="#+id/most_popular_sort_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/latest_sort_textView"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:layout_marginStart="30dp"
android:layout_marginTop="25sp"
android:fontFamily="#font/roboto"
android:text="Most Popular"
android:textAlignment="center"
android:textColor="#color/lite_grey"
android:textSize="25sp" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true">
<RadioButton
android:id="#+id/latest_sort_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25sp" />
<RadioButton
android:id="#+id/most_popular_sort_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</RadioGroup>
</RelativeLayout>
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
fragment_home.xml // This layout contains the text which I want that when pressed I open the dialogue and also this is the fragment/layout which I want to blur when showing the dialogue
Note:- only included the necessary code of this layout
<com.google.android.material.card.MaterialCardView
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
android:layout_toStartOf="#id/divider_line"
android:backgroundTint="#color/black"
android:elevation="6dp"
android:paddingBottom="10dp"
android:textAlignment="center"
app:cardCornerRadius="10dp">
<TextView
android:id="#+id/sort_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="5dp"
android:fontFamily="#font/roboto"
android:text="#string/sort"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="17sp"
android:textStyle="bold" />
</com.google.android.material.card.MaterialCardView>

I think you need to use dialog fragment. You can read more about that in official documentation https://developer.android.com/guide/fragments/dialogs

Hello friends how achieve bottom media controller layout?

Hello friends i am beginner in android i want know how to achieve this type layout the image which shown below please help me i trying achieve this type of layout

It is very simple layout FYI
It can be done with any type of parent layout Constraint, Relative and
even with Linear
I will share a Relative one example. Use your own drawables and assests.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="4dp">
<TextView
android:id="#+id/textViewSongTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="24dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="#+id/buttonBackward"
android:ellipsize="end"
android:maxLines="1"
android:padding="2dp"
android:text="Song Name - [details]"
android:textColor="#android:color/white"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewArtistName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textViewSongTitle"
android:layout_alignParentStart="true"
android:layout_marginStart="24dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="#+id/buttonBackward"
android:padding="2dp"
android:text="Singer Name"
android:textColor="#android:color/white"
android:textSize="12sp" />
<Button
android:id="#+id/buttonForward"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:text="F"
android:textColor="#android:color/white" />
<Button
android:id="#+id/buttonPlayAndStop"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:layout_toStartOf="#id/buttonForward"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:text="PS"
android:textColor="#android:color/white" />
<Button
android:id="#+id/buttonBackward"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:layout_toStartOf="#id/buttonPlayAndStop"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:text="B"
android:textColor="#android:color/white" />
</RelativeLayout>

how to make android activity to fit in all size of mobile display's?

I have aligned it perfectly in the android studio but when I'm running it, it goes out of order, I have tried in a smartphone as well as in emulator but the result is same.is there any way I can make it display in mobile the same the way I see in the android studio?
The pic that I have uploaded shows that in android studio the display looks perfectly fine but after running its position changes.
this is the xml :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wm"
tools:context="sanal.gmail.android.PetCare.doctorassignment">
<ImageView
android:id="#+id/imageView9"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="36dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/petownerde" />
<ImageView
android:id="#+id/imageView11"
android:layout_width="match_parent"
android:layout_height="38dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout6"
app:srcCompat="#drawable/pet" />
<EditText
android:id="#+id/editText10"
android:layout_width="213dp"
android:layout_height="142dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="472dp"
android:background="#drawable/button"
android:ems="10"
android:gravity="top|left"
android:hint="Type your message here"
android:inputType="textMultiLine"
android:lines="10"
android:maxLength="160"
android:maxLines="5"
android:minLines="6"
android:scrollbars="vertical"
android:singleLine="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.036"
tools:layout_editor_absoluteX="99dp" />
<Button
android:id="#+id/button5"
android:layout_width="88dp"
android:layout_height="44dp"
android:layout_marginBottom="60dp"
android:layout_marginEnd="162dp"
android:layout_marginLeft="161dp"
android:layout_marginRight="162dp"
android:layout_marginStart="161dp"
android:layout_marginTop="19dp"
android:background="#drawable/button1"
android:onClick="sendmessage"
android:text="SEND"
android:textColor="#F6F6F6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText10" />
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="168dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView11"
app:layout_constraintVertical_bias="0.049">
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="84dp"
android:layout_height="160dp"
android:orientation="vertical">
<TextView
android:id="#+id/textView21"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="Pet name :"
android:textSize="18sp" />
<TextView
android:id="#+id/textView22"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="Breed :"
android:textSize="18sp" />
<TextView
android:id="#+id/textView23"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="Colour :"
android:textSize="18sp" />
<TextView
android:id="#+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="Age :"
android:textSize="18sp" />
<TextView
android:id="#+id/textView25"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Gender :"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Pet name"
android:textColor="#F6F6F6"
android:textSize="18sp" />
<TextView
android:id="#+id/textView14"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="breed"
android:textColor="#F6F6F6"
android:textSize="18sp" />
<TextView
android:id="#+id/textView15"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="colour"
android:textColor="#F6F6F6"
android:textSize="18sp" />
<TextView
android:id="#+id/textView16"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="age"
android:textColor="#F6F6F6"
android:textSize="18sp" />
<TextView
android:id="#+id/textView17"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="gender"
android:textColor="#F6F6F6"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout6"
android:layout_width="match_parent"
android:layout_height="136dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="31dp"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/imageView11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView9">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="79dp"
android:layout_height="126dp"
android:orientation="vertical">
<TextView
android:id="#+id/textView18"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Name :"
android:textSize="18sp" />
<TextView
android:id="#+id/textView10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Email :"
android:textSize="18sp" />
<TextView
android:id="#+id/textView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Contact : "
android:textSize="18sp" />
<TextView
android:id="#+id/textView8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Address : "
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="name"
android:textColor="#F6F6F6"
android:textSize="18sp" />
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="email "
android:textColor="#F6F6F6"
android:textSize="18sp" />
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="phone number"
android:textColor="#F6F6F6"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="address"
android:textColor="#F6F6F6"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
`

Follow these two links You will get your answer. Its a time consuming approach but definitely you will learn a lot from these links.
http://developer.android.com/training/multiscreen/screensizes.html
http://developer.android.com/guide/practices/screens_support.html
Making fully responsive your android application to all screen sizes is not a very tough job but it requires good knowledge and experience of layouts and there XML properties.

use RelativeLayout instead of constraintLayout
and give the perfectly position of your views they cant change view your layout
use property of RelativeLayout -> below , above , toLeftOf , toRightOf
and set your other component
and also height and width all component not fixed given..
your requirement fixed size then given fixed otherwise use match_parent and wrap_content
one important things for your layout either you can use scrollview coz your edittext and button are mess ... OR your component size given small then not mess your layout
also you can fixed size or density used then use Dependency SDP and SSP

For android there are several ways to make it Compatible with all the devices.
You can use the ConstraintLayout for more responsive activity instead of LinearLayout.
Apart from that use more flexible and adaptive layout like "match_parent", "wrap_content" instead of hard coded values.
For example -
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:margin_top="5sp"
And so on. I hope this will solve your problem.
For more info related to this you can check this link

Android RelativeLayout working in LayoutEditor but breaking on device

For the TitleBar I have a RelativeLayout, which should display two buttons on the right side, and two TextViews on the left side. I got the layout code working in the Editor, but on the device it always breaks down.
On the image you can see a Screenshot from the Layout Editor and from the device (runs like this on multiple devices).
Here is the Layout Code I'm using:
- I know I just can dump in LinearLayouts, but this should be possible with RelativeLayout?
- I used the "toStartOf" properties because I don't want to overflow the icons with text if the text might be longer.
- Bonus Question: how can I center the two labels vertical, so that they are also centered if I only have a title and set the subtitle visibility to GONE
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
tools:src="#drawable/account"/>
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="16dp"
android:layout_toStartOf="#id/toolbar_right_button"
android:background="#android:color/transparent"
tools:src="#drawable/ic_notifications"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toStartOf="#id/toolbar_left_button"
android:fontFamily="#string/font_family_medium"
android:textAppearance="?android:textAppearanceMedium"
tools:text="Title "/>
<TextView
android:id="#+id/toolbar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#id/toolbar_title"
android:textAppearance="?android:textAppearanceSmall"
tools:text="Subtitle"/>
</RelativeLayout>

A ConstraintLayout would solve your problem. It keeps your layout flat, and also centers your text layouts vertically (and maintains it even after you 'remove' the subtitle).
<android.support.constraint.ConstraintLayout>
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/account" />
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/toolbar_right_button"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_notifications" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/font_family_medium"
android:textAppearance="?android:textAppearanceMedium"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#id/toolbar_subtitle"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/toolbar_left_button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Title " />
<TextView
android:id="#+id/toolbar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:textAppearance="?android:textAppearanceSmall"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_title"
tools:text="Subtitle" />
</android.support.constraint.ConstraintLayout>

I have made it simple so it wont get messy:
<RelativeLayout 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="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
app:srcCompat="#android:drawable/ic_menu_compass" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignStart="#+id/imageButton"
android:layout_below="#+id/imageButton"
app:srcCompat="#android:drawable/btn_dialog" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageButton2"
android:layout_alignParentStart="true"
android:text="TextView" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView4"
android:text="TextView" />
There are high chances that if You add a lot of elements and tools to the layout it will get messy, try to keep it simple and You will find what caused the problem.

How to position the image buttons in my android app with respect to the background for different screen sizes?

I am making an android app for which i need the 3 image buttons containing the location pointers to be placed along the road in the background in the positions shown in the screenshot. Unfortunately the image buttons change their positions on different screen sizes. Any help is appreciated.
This following is my XML code. For now for the sake of the screenshot i have manually given values to the margin of the buttons and also because i don't know any other way of doing it.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment.HomeFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_image"
android:orientation="vertical">
<LinearLayout
android:id="#+id/ll1"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="85dp"
android:layout_marginStart="85dp"
android:layout_marginTop="200dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/potheri_button_text"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_marginBottom="5dp"/>
<ImageButton
android:id="#+id/potheri_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00000000"
android:scaleType="centerInside"
android:src="#drawable/location_pointer" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll2"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="300dp"
android:layout_marginStart="300dp"
android:layout_marginTop="200dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/srm_button_text"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_marginBottom="5dp"/>
<ImageButton
android:id="#+id/srm_button"
android:textSize="20sp"
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="centerInside"
android:background="#00000000"
android:src="#drawable/location_pointer" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll3"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="170dp"
android:layout_marginStart="170dp"
android:layout_marginTop="435dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/guduvancheri_button_text"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_marginBottom="5dp"/>
<ImageButton
android:id="#+id/guduvancheri_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00000000"
android:scaleType="centerInside"
android:src="#drawable/location_pointer"
android:text="#string/guduvancheri_button_text"/>
</LinearLayout>
</RelativeLayout>

Give a try to constraint layout.They are great when it comes to resizing and placing components that should look same in all devices.You can find it here
Constraint Layout Code Labs
Alternatively you can design the screen for various devices.For that you don't need the dimen.xml file, since they can be tricky. You can be make different layout files layout-large,layout-land,layout-xxxhdpi,layout-sw700dp. You can find it here Supporting multiple Screens in Android
Mike's solution in the comments for using x and y coordinates can also be applied here, but for that instead of taking the x and y coordinate you can place an transparent view over your location images.Those transparent views will shift a bit as per the device resolution but they will be largely on place to take your click event
Update
<FrameLayout 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.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/bg_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1" />
<LinearLayout
android:id="#+id/ll1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginStart="6dp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/ll2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/ll2"
app:layout_constraintTop_toTopOf="#+id/guideline2"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_weight="38.89"
android:text="Potheri"
android:textColor="#android:color/black"
android:textStyle="bold" />
<ImageButton
android:id="#+id/potheri_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00000000"
android:scaleType="centerInside"
android:src="#drawable/location_pointer" />
</LinearLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="101dp" />
<!--<android.support.constraint.Guideline-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:id="#+id/guideline3"-->
<!--app:layout_constraintGuide_begin="300dp"-->
<!--android:orientation="horizontal" />-->
<LinearLayout
android:id="#+id/ll2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.38"
app:layout_constraintLeft_toRightOf="#+id/ll1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintVertical_bias="0.36"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintTop_creator="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:text="SRM"
android:textColor="#android:color/black"
android:textStyle="bold" />
<ImageButton
android:id="#+id/srm_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00000000"
android:scaleType="centerInside"
android:src="#drawable/location_pointer"
android:textSize="20sp" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/textView6"
app:layout_constraintHorizontal_bias="0.0"
tools:layout_constraintRight_creator="1"
tools:layout_constraintLeft_creator="1"
app:layout_constraintTop_toTopOf="#+id/guideline2"
android:layout_marginTop="0dp"
app:layout_constraintVertical_bias="0.68" />
<LinearLayout
android:id="#+id/ll3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1"
app:layout_constraintTop_toBottomOf="#+id/textView6"
android:layout_marginTop="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:text="Gudvancheri"
android:textColor="#android:color/black"
android:textStyle="bold" />
<ImageButton
android:id="#+id/guduvancheri_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00000000"
android:scaleType="centerInside"
android:src="#drawable/location_pointer"
android:text="Gudvancheri" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
The above is the best i could do given the scenarios, let me know if this works.
Alternatively you could divide the image into 3 parts to have a anchor for the ll3,ll2 and ll1.That way no mater how much the image stretches the layouts will always be pinned at a particular position.