Develop Reference

How can I align Text next to an Image Button inside a vertical Scrollview

I want to align some text next to an Imagebutton inside of a vertically oriented Scrollview, but I am out of ideas.
This is an App for my Grandma, to help her understand her phone and the Symbols better.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/SrcBtn1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
I can't manage to get the Text next to the Imagebutton

<ScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_menu_gallery"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</LinearLayout>

I would suggest to replace LinearLayout with RelativeLayout which is made just for this!
here are all of its attributes:
link
look for the LEFT_OF and RIGHT_OF attributes.

You Can use ConstraintLayout to make this layout super fast.
Here us an example layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button6"
android:src="#drawable/ic_launcher_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button8"
android:src="#drawable/wolverine"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button7"
app:layout_constraintVertical_bias="1.0"
android:src="#drawable/shadow" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button5"
android:src="#drawable/rose" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
It will look like this:
This will work for your Grandmas phone, but please notice that If you want to make a responsive layout using ConstraintLayout you will have to avoid using fixed sizes on your views and that's because different phones got different screen size so using fixed size value will not look the same on all devices.
You can use ConstraintLayout with guidelines and Chains to support different screen sizes.

To align some text next to an Imagebutton inside of a vertically oriented Scrollview. we can use linear layout with horizontal orientation
Like This
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/srcbtn1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>

Change object width and height without hard-coding xml values

I am creating a home page for my android application in Android Studios. In the layouts folder I have my home page activity XML file. The home page will contain 3 clickable "boxes" which are CardViews. They are functioning correctly but I am working to change the CardViews sizes without hard-coding XML width and height (or other objects in the future). So that the sizes change properly according to different screen sizes.
In this specific case I want to increase the height of the CardViews.
Capture Receipt and Create Invoice CardViews I want to modify size of.
I am using a Linear Layout inside a Constraint Layout. The CardViews layout_width and layout_height are selected to match parent. I have modified the layout_weight, but this does not get the result I am looking for. I want to increase the heights without increasing the width.
Is this something to be done in XML or the Java part of the code?
Here is my home page activity XML code (without the Bottom Nav bar and Add Item part):
<?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"
tools:context=".HomePageActivity">
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/lightComplimentGrey"
android:gravity="center|top"
android:orientation="vertical"
tools:context=".MainActivity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="290dp"
android:background="#drawable/curved_top"
android:orientation="horizontal"
android:paddingBottom="-50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="#+id/ll">
<TextView
android:id="#+id/currentUserTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="188dp"
android:layout_marginBottom="8dp"
android:gravity="left"
android:text="Current User"
android:textColor="#99E8F3"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.922"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.352" />
<TextView
android:id="#+id/userNameEntryTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="left"
android:hint="Not Signed In"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/currentUser"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/changeUserSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:backgroundTint="#FFFFFF"
app:layout_constraintBottom_toBottomOf="#+id/
app:layout_constraintStart_toEndOf="#+id/userNameEntry"
app:layout_constraintTop_toTopOf="#+id/currentUserTextView"
app:layout_constraintVertical_bias="0.558" />
<ImageButton
android:id="#+id/menuButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="4"
android:background="#drawable/ic_menu_light_blue_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.048" />
<ImageButton
android:id="#+id/notificationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="
android:background="#drawable/ic_tooLongToPost"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-70dp"
android:clipToPadding="false"
android:gravity="center"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/capture_receipt"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_margin="#dimen/view_margin_normal_screen"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:background="#drawable/circle_background_green"
android:padding="10dp"
android:src="#drawable/ic_photo_camera_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Capture Receipt"
android:textStyle="bold" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#color/lightComplimentGrey" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:text="Scan receipt to recognize items"
android:textColor="#android:color/darker_gray" />
</LinearLayout>
</android.support.v7.widget.CardView>
How is it possible to modify the heights and widths (just like you would when hard coding the XML) without hard-coding?

How to center imageView in third row using Constraint Layout

2x2 plus 1 un-centered tile
I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:
<?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/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" android:background="#drawable/sunrise" tools:layout_editor_absoluteY="25dp">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/toolBarColor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/refresh2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Now - The Technology"
android:textColor="#color/appTitleColor"
android:textSize="18sp"
android:layout_gravity="center"
android:id="#+id/toolbar_title"/>
</android.support.v7.widget.Toolbar>
<ImageView
android:id="#+id/ivPlay"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/play"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintEnd_toStartOf="#+id/ivReminder"
android:layout_marginEnd="16dp"
/>
<TextView android:id="#+id/tvPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintTop_toBottomOf="#+id/ivPlay"
android:layout_marginBottom="2dp"
android:text="#string/play_10_minutes"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivReminder"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/reminder"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintStart_toEndOf="#+id/ivPlay"
android:layout_marginStart="16dp"
/>
<TextView android:id="#+id/tvReminder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
app:layout_constraintTop_toBottomOf="#+id/ivReminder"
android:layout_marginBottom="2dp"
android:text="#string/now_reminder"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivGuide"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/guide"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvPlay"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintHorizontal_bias="1.0"/>
<TextView android:id="#+id/tvGuide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintTop_toBottomOf="#+id/ivGuide"
android:layout_marginBottom="2dp"
android:text="#string/guide"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivUpgrade"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/upgrade"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toTopOf="#+id/ivGuide"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
/>
<TextView android:id="#+id/tvUpgrade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivUpgrade"
app:layout_constraintEnd_toEndOf="#+id/ivUpgrade"
app:layout_constraintTop_toBottomOf="#+id/ivUpgrade"
android:layout_marginTop="2dp"
android:text="#string/upgrade"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivLearn"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/learn"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvGuide"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintBottom_toTopOf="#+id/tvLearn"
android:layout_marginTop="16dp"
android:foregroundGravity="center_horizontal"
app:layout_constraintHorizontal_bias="0.5"/>
<TextView android:id="#+id/tvLearn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivLearn"
app:layout_constraintEnd_toEndOf="#+id/ivLearn"
app:layout_constraintTop_toBottomOf="#+id/ivLearn"
app:layout_constraintBottom_toTopOf="#+id/navigation"
android:text="#string/learn"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
android:layout_marginTop="2dp"
android:layout_marginBottom="16dp"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#D3D3D3"
app:menu="#menu/navigation" app:itemTextColor="#color/navAccent" style="#style/AppTheme"
android:visibility="visible" app:itemIconTint="#color/navAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp"/>
</android.support.constraint.ConstraintLayout>
Thanks in advance.

Try change attributes of android:id="#+id/ivLearn"
from
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
to
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.
Thanks.

Space removal on the left of image in Xml file in android studio using the recycler view

I have two images that are beside textviews.
Now the problem with this UI is that the images must be aligned to complete left side, as if coming out or sticking to the edge of the screen. However, that's not the case. I have tried scaleType and adjustViewBound, but both of them didn't work. The xml file contents have been shown below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
>
<TextView
android:id="#+id/textView_subtopic_title"
android:layout_width="245dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView_bulb"
android:layout_marginEnd="43dp"
android:layout_marginRight="43dp"
android:gravity="center"
android:text="Subtopic Title"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="64dp" />
<TextView
android:id="#+id/textView_count"
android:layout_width="91dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView_subtopic_title"
android:layout_marginLeft="135dp"
android:layout_marginStart="135dp"
android:text="Count"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="83dp" />
<ImageView
android:id="#+id/imageView_bulb"
android:layout_width="70dp"
android:layout_height="81dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="64dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/bulb_on" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="128dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView_bulb"
android:layout_centerHorizontal="true"
android:outlineAmbientShadowColor="#color/colorPrimary"
android:outlineSpotShadowColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="114dp" />
<TextView
android:id="#+id/textView_topic_title"
android:layout_width="242dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="52dp"
android:layout_marginStart="52dp"
android:layout_marginTop="23dp"
android:text="Topic Title" />
<ImageView
android:id="#+id/imageView"
android:layout_width="16dp"
android:layout_height="41dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="9dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="#drawable/blue"
android:layout_alignParentLeft="true"
android:layout_marginLeft="0dp" />
</RelativeLayout>
What should be done to remove the space on the left of the images as shown in the image?

One way you could do it is set negative margin:
android:layout_marginStart="-10dp"
or
android:paddingStart="-10dp"
change -10 to what suits you.
<ImageView
android:id="#+id/imageView"
android:layout_width="16dp"
android:layout_height="41dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="-10dp"
android:layout_marginTop="9dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:srcCompat="#drawable/nodata"/>

I got the solution to this problem. It basically lay with the activity_main.xml. The recyclerview in this xml had a left padding. I just removed it, made it 0. The snippet is shown below.
<?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="#mipmap/bg"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_Main"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I reduced the left margin to be zero in the attributes of the recyclerview.

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.