Develop Reference

what is the best layout can I use it?

I have a layout which depends on constraint layout.
The result was very good in one device , but when in change the screen size to see it in multi devices and multi screen Obs !The layout was destroyed .
So ,
What is the best way to get the layout to support all screen sizes without being destroyed?
This is the xml code
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/b11"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="56dp"
android:layout_marginEnd="196dp"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/imageView8"
app:srcCompat="#drawable/ic_book5" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="68dp"
android:layout_marginTop="132dp"
app:layout_constraintStart_toEndOf="#+id/imageView8"
app:layout_constraintTop_toBottomOf="#+id/imageView6"
app:srcCompat="#drawable/ic_book1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="104dp"
android:layout_marginTop="28dp"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1"
app:srcCompat="#drawable/ic_book3" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="132dp"
android:layout_marginEnd="136dp"
app:layout_constraintEnd_toStartOf="#+id/imageView9"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/imageView7"
app:layout_constraintTop_toBottomOf="#+id/winner"
app:srcCompat="#drawable/ic_book4" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="104dp"
android:layout_marginEnd="80dp"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintTop_toBottomOf="#+id/imageView7"
app:srcCompat="#drawable/ic_book2" />
<ImageView
android:id="#+id/winner"
android:layout_width="78dp"
android:layout_height="117dp"
android:layout_marginStart="36dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/imageView7"
app:srcCompat="#drawable/ic_winner"
tools:layout_editor_absoluteY="-34dp" />
<ImageView
android:id="#+id/start"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="128dp"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:srcCompat="#drawable/ic_startt" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="104dp"
android:layout_marginEnd="116dp"
app:layout_constraintEnd_toStartOf="#+id/imageView10"
app:layout_constraintHorizontal_bias="0.954"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView4"
app:srcCompat="#drawable/ic_book6" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="61dp"
android:layout_marginTop="24dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/winner"
app:srcCompat="#drawable/ic_book7" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toStartOf="#+id/imageView6"
app:layout_constraintTop_toBottomOf="#+id/imageView6"
app:srcCompat="#drawable/ic_book8" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="228dp"
android:layout_marginTop="12dp"
app:layout_constraintStart_toEndOf="#+id/imageView7"
app:layout_constraintTop_toBottomOf="#+id/winner"
app:srcCompat="#drawable/ic_book9" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="116dp"
android:layout_marginTop="120dp"
app:layout_constraintStart_toEndOf="#+id/imageView4"
app:layout_constraintTop_toBottomOf="#+id/imageView9"
app:srcCompat="#drawable/ic_book10" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is the layout which I want to be
and this is the result

Use constrainlayout guidelines to resolve varying screen sizes issue .
Below you find your xml file updated to resolve different screen sizes issue using guidelines.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline4"
app:layout_constraintLeft_toRightOf="#id/guideline3"
app:srcCompat="#drawable/ic_book5" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline4"
app:layout_constraintLeft_toRightOf="#id/guideline7"
app:srcCompat="#drawable/ic_book1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline17"
app:layout_constraintLeft_toRightOf="#id/guideline9"
app:srcCompat="#drawable/ic_book3" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline13"
app:layout_constraintLeft_toRightOf="#id/guideline6"
app:srcCompat="#drawable/ic_book4" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline14"
app:layout_constraintRight_toLeftOf="#id/guideline1"
app:srcCompat="#drawable/ic_book2" />
<ImageView
android:id="#+id/winner"
android:layout_width="78dp"
android:layout_height="117dp"
app:layout_constraintBottom_toTopOf="#id/guideline16"
app:layout_constraintLeft_toRightOf="#id/guideline3"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageView
android:id="#+id/start"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline5"
app:layout_constraintLeft_toRightOf="#id/guideline6"
app:srcCompat="#drawable/ic_startt" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline12"
app:layout_constraintLeft_toRightOf="#id/guideline6"
app:srcCompat="#drawable/ic_book6" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline15"
app:layout_constraintLeft_toRightOf="#id/guideline1"
app:srcCompat="#drawable/ic_book7" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline11"
app:layout_constraintLeft_toRightOf="#id/guideline1"
app:srcCompat="#drawable/ic_book8" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline15"
app:layout_constraintLeft_toRightOf="#id/guideline9"
app:srcCompat="#drawable/ic_book9" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toTopOf="#id/guideline18"
app:layout_constraintLeft_toRightOf="#id/guideline8"
app:srcCompat="#drawable/ic_book10" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.15" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.21" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.36" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.43" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.78" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.82" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.78" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.71" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.55" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.36" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.23" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.14" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.42" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.44" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.86" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.87" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can learn in detail about the guidelines from here
https://constraintlayout.com/basics/guidelines.html
As far as handling image sizes for different screens, you can create different image files for different sizes.
res/drawable-mdpi/graphic.png // bitmap for medium-density
res/drawable-hdpi/graphic.png // bitmap for high-density
res/drawable-xhdpi/graphic.png // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png // bitmap for extra-extra-high-density

so after seeing your images there seems to be a path in the background. basically you need to position all your little ic_book images relative to that path image (which for some reason I cant find in the list of views) and not relative to each other like you are doing. You probably want to use ConstraintLayout but try to replicate the behaviour of the deprecated RelativePercentLayout so you can express positions as percentages of your path image. here is an example of how to do that using guidelines (as also suggested above).

ConstraintLayout - When text wrapping happens, it will "push away" ImageView. How to avoid such behavior?

I have the following layout
I wish to achieve
Available space priority will be given to red region LinearLayout, so that no text wrapping will occur.
ConstraintLayout will try its best effort to occupy remaining space. If the remaining space isn't enough, it will perform text wrapping.
Hence,
wrap_content is given to red region LinearLayout
android:layout_width="0dp" and android:layout_weight="1" is given to ConstraintLayout
However, currently, when the content of ConstraintLayout is too long. It will perform text wrapping. However, it will also perform an undesired effect. It will push away the baby icon
This is my complete XML
<LinearLayout
android:orientation="horizontal"
android:id="#+id/top_relative_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="12dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toStartOf="#+id/sticky_image_view"
app:layout_constraintRight_toLeftOf="#+id/sticky_image_view"
android:text="Home long text long text"
android:id="#+id/label_text_view"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:textColor="?attr/secondaryTextColor" />
<ImageView
app:layout_constraintLeft_toRightOf="#+id/label_text_view"
app:layout_constraintStart_toEndOf="#+id/label_text_view"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/sticky_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:tint="?attr/greyIconColor"
app:srcCompat="#drawable/sn_baby" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:background="#ff0000"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/pin_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="?attr/smallPinIcon" />
<ImageView
android:id="#+id/locked_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_repeat_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="4dp"
android:paddingRight="4dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<TextView
android:text="Yesterday, 31 December, 2019"
android:id="#+id/date_time_text_view"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor" />
</LinearLayout>
</LinearLayout>
Any idea how I can prevent such?

If you actually want the text to wrap, you might want to constrain the sticky_image_view to the end, bottom and top of parent. Then just add either a height or width to this imageview, a ratio of 1:1, and a horizontalBias of 0. This should do the trick.

Try to set layout_width = "0dp" on ConstraintLayout's TextView. ConstraintLayout constraints work when you set dimension to 0dp.
And the image view should be like this -
<ImageView
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
Instead of this -
<ImageView
app:layout_constraintLeft_toRightOf="#+id/label_text_view"
app:layout_constraintStart_toEndOf="#+id/label_text_view"
app:layout_constraintTop_toTopOf="parent"

Maybe this layout can work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/top_relative_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingTop="8dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/label_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:paddingEnd="28dp"
android:text="Home"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/sticky_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="2dp"
app:layout_constraintEnd_toEndOf="#id/label_text_view"
app:layout_constraintTop_toTopOf="#id/label_text_view"
app:srcCompat="#drawable/ic_done" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="top"
android:orientation="horizontal">
<ImageView
android:id="#+id/pin_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="#drawable/ic_circle" />
<ImageView
android:id="#+id/locked_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_repeat_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingEnd="4dp"
android:paddingRight="4dp"
android:scaleType="fitEnd" />
<TextView
android:id="#+id/date_time_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yesterday, 31 December, 2019"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>

Image is not shown in the CardView

Although the preview shows the image but when I run the application on the device, the image is not shown in the card view.
XML
<com.google.android.material.card.MaterialCardView
android:id="#+id/CollegesCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ImportantDatesCard"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:layout_marginTop="13dp"
android:elevation="10dp"
android:padding="10dp"
android:background="#drawable/campus"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:stateListAnimator="#drawable/lift_on_touch">
<RelativeLayout
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_gravity="center">
<TextView
android:id="#+id/COLLEGES"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="serif-monospace"
android:text="COLLEGES"
android:textColor="#000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/Content"
android:layout_width="102dp"
android:layout_height="107dp"
android:layout_below="#+id/COLLEGES"
android:layout_marginStart="1dp"
android:layout_marginTop="14dp"
android:text="Take Admission in Top Colleges in your Location"
android:textColor="#200094"
android:textSize="15sp" />
<ImageView
android:id="#+id/CAMPUSIMAGE"
android:layout_width="65dp"
android:layout_height="73dp"
android:layout_below="#+id/COLLEGES"
android:layout_alignStart="#+id/Content"
android:layout_marginStart="101dp"
android:layout_marginTop="2dp"
tools:srcCompat="#drawable/campus" />
<ImageView
android:layout_width="54dp"
android:layout_height="38dp"
android:layout_below="#id/CAMPUSIMAGE"
android:layout_alignStart="#+id/CAMPUSIMAGE"
android:layout_alignParentEnd="true"
android:layout_marginStart="7dp"
android:layout_marginTop="13dp"
android:layout_marginEnd="14dp"
tools:srcCompat="#drawable/ic_arrow_forward_black_24dp"
android:scaleType="centerCrop"/>
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
[This is the image of the snapshot from virtual device.1[This is the image of the preview]2
I have attached the images of screenshot of the preview and the application running on a device. I have no idea why the image is not shown.
Image type is .png and it is been added from the drawable folder.

I changed some attributes of the 3 views, try it:
<com.google.android.material.card.MaterialCardView
android:id="#+id/CollegesCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ImportantDatesCard"
android:layout_alignParentStart="true"
android:layout_marginStart="15dp"
android:layout_marginTop="13dp"
android:elevation="10dp"
android:padding="10dp"
android:background="#drawable/campus"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:stateListAnimator="#drawable/lift_on_touch">
<RelativeLayout
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_gravity="center">
<TextView
android:id="#+id/COLLEGES"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="serif-monospace"
android:text="COLLEGES"
android:textColor="#000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/Content"
android:layout_width="102dp"
android:layout_height="107dp"
android:layout_below="#+id/COLLEGES"
android:layout_marginStart="1dp"
android:layout_marginTop="14dp"
android:text="Take Admission in Top Colleges in your Location"
android:textColor="#200094"
android:textSize="15sp" />
<ImageView
android:id="#+id/CAMPUSIMAGE"
android:layout_width="65dp"
android:layout_height="73dp"
android:layout_below="#+id/COLLEGES"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/Content"
android:layout_marginTop="2dp"
tools:srcCompat="#drawable/campus" />
<ImageView
android:layout_width="54dp"
android:layout_height="38dp"
android:layout_below="#id/CAMPUSIMAGE"
android:layout_alignParentEnd="true"
android:layout_toEndOf="#+id/Content"
android:layout_marginStart="7dp"
android:layout_marginTop="13dp"
android:layout_marginEnd="14dp"
tools:srcCompat="#drawable/ic_arrow_forward_black_24dp"
android:scaleType="centerCrop"/>
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>

Change RecyclerView CardView background to transparent

Problem Short Version:
I want to make my CardView and RecyclerView background transparent, so
the fragment/activity background should become visible.
Explained:
I have an activity A with background image and fragment B is replaced on its Framelayout , in Fragment B i have recyclerView which with CardView now problem is i want to make every background transparent so only CardView will be visible with actual background of activity
RecyclerView look like this(These white background should be transparent) :
Code
Activity(A)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"/>
Fragment(B) RecyclerView
<android.support.design.widget.CoordinatorLayout 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"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
tools:listitem="#layout/layout_video_item"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/tv_not_found"
android:text="No Media Found Yet"
android:layout_gravity="center"
android:gravity="center"
android:visibility="gone"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
CardView / Item layout
<?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"
android:layout_marginEnd="3dp"
android:layout_marginStart="3dp"
android:layout_marginTop="3dp"
android:background="#android:color/transparent">
<android.support.v7.widget.CardView
style="#style/CardView.Light"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"
app:cardCornerRadius="5dp"
android:padding="0dp"
app:cardElevation="0dp"
tools:ignore="ContentDescription">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/media_image"
android:layout_width="100dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/darker_gray" />
<ImageButton
android:id="#+id/ib_delete"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_delete_white_24dp" />
<ImageButton
android:id="#+id/share_button"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/ib_delete"
app:srcCompat="#drawable/ic_share_white_24dp" />
<TextView
android:id="#+id/tv_video_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Title Test"
android:textAppearance="#style/TextAppearance.AppCompat.Large.Inverse"
android:textColor="#color/colorPrimaryText"
app:layout_constraintEnd_toStartOf="#+id/tv_ribbon"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_ribbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:ellipsize="marquee"
android:fontFamily="monospace"
android:padding="3dp"
android:singleLine="true"
android:text="New"
android:textColor="#color/colorIcons"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_path"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="subtitle test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_video_name" />
<ImageView
android:id="#+id/iv_is_audio"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_duration"
app:srcCompat="#drawable/ic_settings_voice_black_24dp" />
<ImageView
android:id="#+id/iv_is_video"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_audio"
app:layout_constraintStart_toEndOf="#+id/iv_is_audio"
app:layout_constraintTop_toTopOf="#+id/iv_is_audio"
app:srcCompat="#drawable/ic_theaters" />
<ImageView
android:id="#+id/iv_is_gif"
android:layout_width="35dp"
android:layout_height="30dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_video"
app:layout_constraintStart_toEndOf="#+id/iv_is_video"
app:layout_constraintTop_toTopOf="#+id/iv_is_video"
app:srcCompat="#drawable/ic_gif" />
<TextView
android:id="#+id/tv_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:text="0:00"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_path" />
<TextView
android:id="#+id/tv_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="0 MB"
app:layout_constraintBottom_toBottomOf="#+id/tv_duration"
app:layout_constraintStart_toEndOf="#+id/tv_duration"
app:layout_constraintTop_toTopOf="#+id/tv_duration" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Reason for asking question:
I know there are lots of SO question out there to get this same task done but my requirements are little different and reason for asking this question is nothing is working for me.
Expectation

Set CardView Background to app:cardBackgroundColor="#00ffffff"

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.