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).
Related
java.lang.IllegalStateException: ScrollView can host only one direct child
Getting this error; but my ScrollView does only have one child (a ConstraintView). I even added another View on top of that just to be sure.
I've searched around and found some older questions mentioning bugs, but they are from 3 years ago; surely they have been solved by now?
Any help is appreciated, thank you for your time!
Below is my 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="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context=".FriendsFragment"
android:fillViewport="true">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/greyed"
android:orientation="vertical">
<!-- First Friend -->
<ImageView
android:id="#+id/user_icon_1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/person_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/user_name_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_user_name"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_icon_1"
app:layout_constraintStart_toEndOf="#id/user_icon_1"
app:layout_constraintTop_toTopOf="#id/user_icon_1" />
<TextView
android:id="#+id/last_touch_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_last_touch"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_name_1"
app:layout_constraintStart_toEndOf="#id/user_name_1"
app:layout_constraintTop_toTopOf="#id/user_name_1" />
<ImageView
android:id="#+id/options_1"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#id/last_touch_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/last_touch_1"
app:layout_constraintTop_toTopOf="#id/last_touch_1"
app:srcCompat="#drawable/options_icon" />
<!-- Second Friend -->
<ImageView
android:id="#+id/user_icon_2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/person_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_icon_1"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/user_name_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_user_name"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_icon_2"
app:layout_constraintStart_toEndOf="#id/user_icon_2"
app:layout_constraintTop_toTopOf="#id/user_icon_2" />
<TextView
android:id="#+id/last_touch_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_last_touch"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_name_2"
app:layout_constraintStart_toEndOf="#id/user_name_2"
app:layout_constraintTop_toTopOf="#id/user_name_2" />
<ImageView
android:id="#+id/options_2"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#id/last_touch_2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/last_touch_2"
app:layout_constraintTop_toTopOf="#id/last_touch_2"
app:srcCompat="#drawable/options_icon" />
<!-- Third Friend -->
<ImageView
android:id="#+id/user_icon_3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/person_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_icon_2"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/user_name_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_user_name"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_icon_3"
app:layout_constraintStart_toEndOf="#id/user_icon_3"
app:layout_constraintTop_toTopOf="#id/user_icon_3" />
<TextView
android:id="#+id/last_touch_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_last_touch"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_name_3"
app:layout_constraintStart_toEndOf="#id/user_name_3"
app:layout_constraintTop_toTopOf="#id/user_name_3" />
<ImageView
android:id="#+id/options_3"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#id/last_touch_3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/last_touch_3"
app:layout_constraintTop_toTopOf="#id/last_touch_3"
app:srcCompat="#drawable/options_icon" />
<!-- Fourth Friend -->
<ImageView
android:id="#+id/user_icon_4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/person_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_icon_3"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/user_name_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_user_name"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_icon_4"
app:layout_constraintStart_toEndOf="#id/user_icon_4"
app:layout_constraintTop_toTopOf="#id/user_icon_4" />
<TextView
android:id="#+id/last_touch_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_last_touch"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_name_4"
app:layout_constraintStart_toEndOf="#id/user_name_4"
app:layout_constraintTop_toTopOf="#id/user_name_4" />
<ImageView
android:id="#+id/options_4"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#id/last_touch_4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/last_touch_4"
app:layout_constraintTop_toTopOf="#id/last_touch_4"
app:srcCompat="#drawable/options_icon" />
<!-- Fifth Friend -->
<ImageView
android:id="#+id/user_icon_5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/person_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/user_icon_4"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/user_name_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_user_name"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_icon_5"
app:layout_constraintStart_toEndOf="#id/user_icon_5"
app:layout_constraintTop_toTopOf="#id/user_icon_5" />
<TextView
android:id="#+id/last_touch_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="#string/default_last_touch"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/user_name_5"
app:layout_constraintStart_toEndOf="#id/user_name_5"
app:layout_constraintTop_toTopOf="#id/user_name_5" />
<ImageView
android:id="#+id/options_5"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#id/last_touch_5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/last_touch_5"
app:layout_constraintTop_toTopOf="#id/last_touch_5"
app:srcCompat="#drawable/options_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
</ScrollView>
Note: This is a prototype, so I've hard-coded a lot of views inside the ConstraintView; I know it's messy.
I am getting TransactionTooLargeException exception when sending a notification with a custom layout.
java.lang.RuntimeException: android.os.TransactionTooLargeException: data parcel size 588636 bytes
at android.app.NotificationManager.notifyAsUser(NotificationManager.java:380)
at android.app.NotificationManager.notify(NotificationManager.java:286)
at android.app.NotificationManager.notify(NotificationManager.java:270)
It's probably because of the bitmaps in the layout, but it's not happening on all of the devices, so I don't want to reduce or remove those bitmaps, is there anything else I can do?
This is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<ImageView
android:layout_margin="0dp"
android:id="#+id/userImage"
android:layout_width="64dp"
android:layout_height="64dp"
tools:src="#tools:sample/avatars" />
<LinearLayout
android:layout_marginStart="5dp"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:maxLines="1"
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold"
tools:text="#tools:sample/full_names" />
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:textColor="#color/yellow"
android:textStyle="bold"
tools:text="0:25" />
</LinearLayout>
<ImageView
android:id="#+id/muteButton"
android:padding="1dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:background="#drawable/circle2"
android:src="#drawable/mute_icon"
android:tint="#color/black" />
<ImageView
android:id="#+id/micButton"
android:padding="1dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:background="#drawable/circle2"
android:src="#drawable/speaker"
android:tint="#color/black" />
<ImageView
android:id="#+id/endCallButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:background="#drawable/circle2"
android:src="#mipmap/call_end_icon" />
<ImageView
android:visibility="gone"
android:id="#+id/answerButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:background="#drawable/circle2"
android:src="#mipmap/call_icon" />
<FrameLayout
android:layout_width="8dp"
android:layout_height="0dp"/>
</LinearLayout>
The only bitmap that I upload dynamically is userImage, I am using Glide to load it and I provide a fixed size of 64x64 DP converted to device pixels.
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>
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.
I'm using ConstraintLayout to build my UI it works great on my phone but on other phone the button is place at the corner and not in place, I configure everything in the SDK tools, like its mention in Android developers but with no suc.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_background"
tools:context="com.example.amit.who.MainActivity">
<!-- Play button-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="151dp"
android:layout_height="153dp"
android:onClick="startGame"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/radioGroup"
app:layout_constraintRight_toLeftOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.49"
app:srcCompat="#drawable/button_play" />
<!-- Open information button-->
<ImageView
android:id="#+id/imageView3"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
android:onClick="openInstructions"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/instruction_icon" />
<!-- Sound\Mute button-->
<ImageView
android:id="#+id/imageView4"
android:layout_width="56dp"
android:layout_height="54dp"
android:layout_marginBottom="50dp"
android:onClick="toggleMute"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.75"
app:layout_constraintLeft_toLeftOf="#+id/imageView3"
app:layout_constraintRight_toRightOf="#+id/imageView3"
app:srcCompat="#drawable/unmute" />
<!-- Choosing character-->
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="178dp"
android:layout_height="307dp"
android:layout_marginLeft="25dp"
android:layout_marginStart="25dp"
android:gravity="center"
android:scaleX="2"
android:scaleY="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<!-- Fiction-->
<RadioButton
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:buttonTint="#color/colorWhite"
android:checked="true"
android:drawableRight="#mipmap/fiction"
android:paddingLeft="7dp"
android:scaleX="0.85"
android:scaleY="0.85" />
<!-- Nonfiction-->
<RadioButton
android:id="#+id/radio01"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:buttonTint="#color/colorWhite"
android:drawableRight="#mipmap/non_fiction" />
<!-- Mixed-->
<RadioButton
android:id="#+id/radio02"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:buttonTint="#color/colorWhite"
android:drawableRight="#mipmap/mixed" />
</RadioGroup>
</android.support.constraint.ConstraintLayout>