Which element is better for build dynamic part of layout? - android

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?

Related

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>

Constraint layout in Custom Dialog problem

I have such XML file for custom Dialog:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/cl_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/cl_header"
android:text="RESET FILTERS"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_distance"
app:layout_constraintTop_toBottomOf="#id/cl_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_title"
app:layout_constraintLeft_toRightOf="#id/tv_distance_title"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
app:layout_constraintTop_toBottomOf="#id/tv_distance_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_distance"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tv_location_title"
android:hint="#string/filter_location_et_hint" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="CANCEL"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio renders it in this way:
And this is what I want to have in my Dialog.
BUT:
On physical device and on emulator it looks different than in Android Studio:
My question is: how to place "Filter" title on the left, and make the location EditText matching the parent (in the working app)?

What everybody else said is correct, keeping your layout flat is good for both performance and for these situations where you want to quickly figure out why isn't the layout being laid out the way you wanted it ;)
Try this :
<androidx.constraintlayout.widget.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="match_parent"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Filter"
app:layout_constraintBottom_toBottomOf="#id/bt_reset"
app:layout_constraintEnd_toStartOf="#id/bt_reset"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bt_reset" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RESET FILTERS"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_distance_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_result"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#ddd"
android:gravity="center"
android:paddingHorizontal="18dp"
android:paddingVertical="3dp"
android:text="0 km - 500km"
android:textColor="#333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bt_reset" />
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1.0"
app:labelBehavior="gone"
app:layout_constraintTop_toBottomOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_location_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Location"
app:layout_constraintTop_toBottomOf="#id/slider_distance" />
<EditText
android:id="#+id/et_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="test"
app:layout_constraintTop_toBottomOf="#id/tv_location_title" />
<Button
android:id="#+id/bt_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:backgroundTint="#ccc"
android:text="CANCEL"
android:textColor="#color/colorBlack"
app:layout_constraintEnd_toStartOf="#id/bt_save"
app:layout_constraintTop_toBottomOf="#id/et_location" />
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:text="save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_location" />
</androidx.constraintlayout.widget.ConstraintLayout>

I changed inner ConstraintLayouts into LinearLayouts and used weights. I also used this trick to fill space between e.g. "Filter" title and "reset filters" button.
There was also an issue with ll_location LinearLayout - it didn't match the parent.
I replaced:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
into:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
And then it worked.
The reason why I don't want to use flat layout (why I use nested layouts) is that IMHO the flat layout makes the code more difficult to maintain.
When you have Views splited into groups you can easily replace them, no matter how many View there are in a group.
My solution:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="reset filters"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_distance_ext"
app:layout_constraintTop_toBottomOf="#id/ll_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
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">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
</LinearLayout>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:hint="#string/filter_location_et_hint" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="cancel"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Aligning icons to the top of a Seekbar

I have a Seekbar with a LinearLayout of icons above it. I'm using LinearLayout weightsum and weight to align each one, however they are still not quite aligned.
Is there a way to align them?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
android:background="#color/colorWhite"
android:orientation="vertical">
<LinearLayout
android:id="#+id/test_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5"
app:layout_constraintEnd_toEndOf="#+id/seekbar"
app:layout_constraintStart_toStartOf="#+id/seekbar"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
</LinearLayout>
<SeekBar
android:id="#+id/seekbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:max="4"
android:theme="#style/Widget.AppCompat.SeekBar.Discrete"
android:thumb="#drawable/ic_black_navigation_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/test_layout"
app:layout_constraintWidth_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit:
I am aware that you can use
android:paddingStart="-16dp"
android:paddingEnd="-16dp"
to align them but I rather not prefer to use a set padding, because this causes readjusting the padding when you add another item.
e.g changing icons to 6, need to change weightsum to 6, and also need to set padding to -14dp.

It's hard maintain this with LinearLayout, so I used ConstraintLayout instead, and using the Guidelines to divide the width into 4 equal portions, then you can align the images to these guidelines.. This will be maintainable accross different device widths and screen orientation
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
android:background="#color/colorWhite"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/test_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#+id/seekbar"
app:layout_constraintStart_toStartOf="#+id/seekbar"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/iv0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="4dp"
android:paddingLeft="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<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.25" />
<ImageView
android:layout_width="wrap_content"
android:paddingStart="16dp"
android:paddingLeft="16dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline1"
app:layout_constraintEnd_toEndOf="#id/guideline1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="#id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<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.75" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="16dp"
android:paddingRight="16dp"
app:layout_constraintEnd_toEndOf="#id/guideline3"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="4dp"
android:paddingRight="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_black_trashcan_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<SeekBar
android:id="#+id/seekbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:max="4"
android:theme="#style/Widget.AppCompat.SeekBar.Discrete"
android:thumb="#drawable/ic_black_navigation_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/test_layout"
app:layout_constraintWidth_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
Result:
Portrait:
Landscape

Padding or margins is only on left and right side but not on top and bottom

When I am trying to make a border (frame) around my ImageView by using padding or margin in FrameLayout (in code it has id: main_frame), it's only shown on left and right sides but not on top and bottom.
But as I wrote I need it around because it should look like frame.
There is a code:
<?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="#color/colorPrimaryDark"
tools:context=".WallActivity">
<RelativeLayout
android:id="#+id/wall_frame"
android:layout_width="592dp"
android:layout_height="315dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="#+id/wall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/room"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.621"
android:layout_margin="40dp">
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/black"
android:visibility="visible"
android:padding="20dp">
<FrameLayout
android:id="#+id/mat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/white"
android:visibility="visible"
android:padding="10dp">
<RelativeLayout
android:id="#+id/imageholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/nature"
android:visibility="visible"
android:layout_centerInParent="true"/>
</RelativeLayout>
</FrameLayout>
</FrameLayout>
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="586dp"
android:layout_height="36dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:orientation="horizontal"
android:weightSum="35.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/hideBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Hide"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/clearBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Clear"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/lockBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Lock"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/exportBTN"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Export"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/wallBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Wall"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/pictureBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Picture"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
And here is the screenshot.
Do you have any idea how to solve it? I tried searching but couldn't find anything similar. Or is there a better way to make frames?
Thank you!
//Edited:
I added full xml code, added some padding to FrameLayouts with id: mat, frame. It looks perfect but main_frame is still broken. main_frame should be invisible (with transparent color) so you may think it's not necessarily to solve it, but I find out when I let it be like that it brokes image when I change it. It adds some white borders (only just on left and right side) to the image...
There is another picture to show you that frames look good but as I said main_frame is broken...

Add this: android:padding="2dp" to the FrameLayout with id frame. You can change 2dp to what you like.

You might consider having a simple layout using one RelativeLayout and an ImageView. The RelativeLayout might have a background whereas the ImageView will have some padding along with a background as well. So the layout will be something like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/room">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/black"
android:padding="16dp"
android:scaleType="fitCenter"
android:src="#drawable/nature" />
</RelativeLayout>
Hope that helps!

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.

Categories

Resources