CODEWITHSUNDEEP
androidxmlandroid-imagebutton
Neeraj Athalye
Neeraj Athalye

Reputation: 547

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.

enter image description here

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>

Upvotes: 1

Views: 2040

Answers (1)

Deb
Deb

Reputation: 2451

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.

Upvotes: 1

Related Questions