Develop Reference

Which element is better for build dynamic part of layout?

I'd like to make a layout like this:
sample layout image
This is gonna be a list of descriptions for items. Each big blue rectangle - single item which I get from database, or json, nevermind.
The main issue is these little black rectangles with red and green rectangle inside. The rest parts like big pink square and wide dark blue rectangles are static - each item has a picture, title and cost. But black rectangles are various features, and each item has various amount of them. Some has only 2 features, and some other - 7 or even more. So these part of layout is dynamic and I don't know what is better for it. But for sure it should not be single line.
I can show you what I've made:
as image
As xml (all items features are hardcoded for now, cause I don't have data yet and this is just a sample):
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="3dp"
android:background="#color/item_preview_background">
<ImageView
android:id="#+id/item_pic"
android:src="#drawable/example_img"
android:layout_width="#dimen/item_pic_w"
android:layout_height="#dimen/item_pic_h"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/info_bar"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/item_pic"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/info_bar_top"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SAMPLE TEXT"
android:textStyle="bold"
android:textColor="#color/item_name"
android:textSize="#dimen/item_preview_name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<ImageView
android:id="#+id/item_cost_pic"
android:src="#drawable/img_cost"
android:layout_width="30dp"
android:layout_height="30dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#id/item_cost_value"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/item_cost_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="4100 (1300)"
android:textStyle="bold"
android:textColor="#color/item_cost"
android:textSize="#dimen/item_preview_cost"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<GridLayout
android:id="#+id/item_features"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="4"
app:layout_constraintTop_toBottomOf="#id/info_bar_top"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<LinearLayout
android:id="#+id/item_prop1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/item_prop1_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop1_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/item_prop2_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop2_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop3_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop3_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop4_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop4_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop5_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop5_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop6_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop6_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/item_prop7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/item_prop7_pic"
android:layout_width="#dimen/item_preview_props_pic_size"
android:layout_height="#dimen/item_preview_props_pic_size"
android:src="#drawable/feature_img_sample" />
<TextView
android:id="#+id/item_prop7_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
So could you tell me, is my layout fine (if so, is there any way to make nice margin for columns and rows?), or tell me how to make such layout properly?

Android view, starts element from bottom overlap with header on small screens

I have a sample view, where on the top is logo + header divider + some description, and from the bottom starts: Button + some checkboxes, please see image below:
It looks good on current devices, but on old phones, when screen is small (5 inches for example) - elements overlap:
View looks like below:
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- TOP -->
<ImageView
android:id="#+id/logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/loremipsum"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.12"
app:layout_constraintWidth_percent="0.50"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="15dp"
android:scaleType="fitXY"
android:src="#drawable/header_divider"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text"
android:lines="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider"
android:textStyle="bold" />
<!-- BOTTOM -->
<LinearLayout
android:id="#+id/linearLayoutMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toTopOf="#+id/validIDLinearLayout"
android:orientation="vertical"
android:gravity="bottom"
android:visibility="visible">
<LinearLayout
android:id="#+id/linearLayoutMobilePhonePicker"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:visibility="visible">
<com.hbb20.CountryCodePicker
android:id="#+id/countryCodePickerId"
...
/>
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/mobileEditText"
android:layout_width="fill_parent"
android:hint="elo elo elo"
android:inputType="phone" />
</LinearLayout>
<TextView
android:id="#+id/mobileText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_terms_and_condition_send_sms" />
</LinearLayout>
<LinearLayout
android:id="#+id/validIDLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toTopOf="#+id/consentLinearLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textViewValidIdBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/errorRed"
android:text="text" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/consentLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/privacyPolicyLinearLayout"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
android:background="#color/errorRed"
app:layout_constraintEnd_toEndOf="parent" >
<TextView
android:id="#+id/textViewConsent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/fragment_terms_and_condition_consent_VI" />
</LinearLayout>
<LinearLayout
android:id="#+id/privacyPolicyLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toTopOf="#id/button_continue"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/errorRed"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewPrivacyPolicy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:linksClickable="true"
android:textColor="text"
android:text="#string/fragment_terms_and_condition_privacy_policy" />
</LinearLayout>
<TextView
android:id="#+id/button_continue"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:enabled="false"
android:background="#color/errorRed"
android:gravity="center"
android:text="ELO"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
android:layout_marginBottom="80dp"
android:layout_marginTop="25dp"
app:layout_constraintWidth_percent="0.7" />
</androidx.constraintlayout.widget.ConstraintLayout>
How should I set constraint between this two parts of the view, so they wont overlap on small screen? Add marginTop to the bottom section?

I found an answer, will post below, maybe it helps someone in the future:
I copied all elements from Bottom section inside ScrollView:
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/header"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp" >
<!-- all LinearLayout's from bottom section -->
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Scale Imagebuttons to fit width

I have a Scrollview with a ConstraintLayout and I want to add some Imagebuttons. They should be scaled to fit the half width so I can put 2 Buttons in a row.
The whole thing must me scrollable because I want to add about 10 rows of buttons.
I tried many options like seen here ConstraintLayout: how to have a view be half the screen width and centered?
My layout.xml:
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
tools:ignore="SpeakableTextPresentCheck">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:adSize="BANNER"
app:adUnitId="ca-app-pub-xxxxxx"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/ibDog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/dog"
app:layout_constraintEnd_toStartOf="#+id/ibHorse"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/dog" />
<ImageButton
android:id="#+id/ibHorse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/horse"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/ibDog"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/horse" />
<ImageButton
android:id="#+id/ibCat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/cat"
app:layout_constraintEnd_toStartOf="#+id/ibFrog"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ibHorse"
app:srcCompat="#drawable/cat" />
<ImageButton
android:id="#+id/ibFrog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/frog"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/ibCat"
app:layout_constraintTop_toBottomOf="#id/ibHorse"
app:srcCompat="#drawable/frog" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Thanks!

Try the following. I have changed the width of the ScrollView to match_parent and changed the width of the ImageViews to 0dp which will stretch out the images according to chain logic.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
tools:ignore="SpeakableTextPresentCheck">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/adView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:adSize="BANNER"
app:adUnitId="ca-app-pub-xxxxxx"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/ibDog"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/ibHorse"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageButton
android:id="#+id/ibHorse"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ibDog"
app:layout_constraintTop_toBottomOf="#+id/adView"
app:srcCompat="#drawable/ic_launcher_foreground" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageButton
android:id="#+id/ibHorse"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="#string/dog"
android:layout_height="wrap_content"
app:srcCompat="#drawable/horse" />
<ImageButton
android:id="#+id/ibCat"
android:layout_width="0dp"
android:layout_weight="1"
android:contentDescription="#string/cat"
android:layout_height="wrap_content"
app:srcCompat="#drawable/cat" />
</LinearLayout>

Gap between imageviews in Linear Layout that is inside the Constraint layout

I have 2 imageviews in a linear layout inside a constraint layout. There should be no gap between them, but when I run it, on some large devices it shows the gap even though I didnt give any margin or padding between them. The imageviews are with ids onboarding_image and image_line. I linear layout must be between the two guidelines showing images one upon the other without any space should take up whatever the space is left between the guideline in all devices.
<?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"
android:id="#+id/swipe_layer"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/blue1"
>
<ImageView
android:id="#+id/app_tour_group"
android:layout_width="70dp"
android:layout_height="9dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/group_1" />
<RelativeLayout
android:id="#+id/next_layout"
android:layout_width="277dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/app_tour_group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline1">
<View
android:id="#+id/app_tour_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:background="#drawable/rectangle_2" />
<TextView
android:id="#+id/next_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:gravity="center"
android:text="NEXT"
android:textColor="#ffffff"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="#+id/onboarding_title"
android:layout_width="375dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="TextView"
android:textColor="#ffffff"
android:textSize="29sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/onboarding_description"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="TextView"
android:textColor="#50287d"
android:textSize="17sp"
android:layout_marginBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/onboarding_title"
app:layout_constraintBottom_toTopOf="#id/guideline2"/>
<LinearLayout
android:layout_width="315dp"
android:layout_height="0dp"
android:id="#+id/image_layout"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/guideline1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintVertical_weight="1"
android:weightSum="417"
>
<ImageView
android:id="#+id/onboarding_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginBottom="-8dip"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:layout_weight="414"
/>
<ImageView
android:id="#+id/image_line"
android:layout_width="wrap_content"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginTop="-8dip"
app:srcCompat="#drawable/line"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
</LinearLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.88"
app:layout_constraintBottom_toTopOf="#+id/next_layout"
app:layout_constraintTop_toBottomOf="#+id/image_layout"/>
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.245"
app:layout_constraintBottom_toTopOf="#+id/image_layout"
app:layout_constraintTop_toBottomOf="#+id/onboarding_description"
/>
</android.support.constraint.ConstraintLayout>

You say: I didn't give any margin or padding between them.
However, I can see android:layout_marginBottom="-8dip". I know you are setting also android:layout_marginTop="-8dip" to the other image. It's a little weird.
If you want to make your Images fill all the contents, use:
android:scaleType="fitxy"
or
android:scaleType="centerCrop"
in both images

Layout Problems - Not able to create layout properly in android

I am creating a layout in android but the problem is layout is not created as same in design.
I want to create layout like below image i.e.
but the problem is my design distort in some devices like
enter image description here
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lay1"
android:layout_margin="#dimen/dp20"
>
<ImageView android:id="#+id/kk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/move_stock_bar"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
/>
<ImageButton android:id="#+id/ibPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_marginLeft="-100dp"
android:layout_marginTop="#dimen/dp10"
/>
<ImageButton android:id="#+id/ibMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_below="#id/ibPlus"
android:layout_marginLeft="-100dp"
android:layout_marginTop="-40dp"
/>
</RelativeLayout>

#mishti I have just used this concept to make the design appear to like what you gave. Try this with ImageView using the weight. It displays the same to all screens if we use weight.
<LinearLayout
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="10">
<Button
android:layout_width="0dp"
android:layout_height="120dp"
android:layout_weight="6"
android:text="Image View"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="4"
android:layout_gravity="start"
android:gravity="start">
<ImageView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
<ImageView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
</LinearLayout>
</LinearLayout>

Use ConstraintLayout for complex layout, it provides you more flexiblity. I did the same layout as in the image attached with question. I am using Guidelines, so i can use this same layout on different screen size and it will work fine.
I am using "app:srcCompat" attribute for setting the image because i am using Vector image here.
<?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"
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#color/color_black">
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_top"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".01" />
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".99" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_start"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_mid"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".8" />
<android.support.constraint.ConstraintLayout
android:id="#+id/main_text_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_red"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical_mid"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<ImageView
android:id="#+id/logo_iv"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<TextView
android:id="#+id/title_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="MOVE STOCK"
android:textColor="#color/color_white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_vertical"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/button_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline_vertical_mid"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<ImageButton
android:id="#+id/button1"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<ImageButton
android:id="#+id/button2"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button1"
app:srcCompat="#drawable/ic_image_placeholder" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>