Adjustable custom UI

Question

I have a custom view made up of 3 elements. I want the view to be adaptive to the size available to it. I want it to look like .

But to get it to look like this I had to add hard coded size constraints thus making it none adaptive.

This is how it looks using match_constraint on all image views (not the way I want it to look like ):

And here is the xml layout.

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  <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"
    tools:context="in.avimarine.boatangels.activities.InspectionResultActivity"
    tools:visibility="visible">

    <ImageView
      android:id="@+id/moored_boat_bowlines"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:contentDescription="@string/boat_drawing_content_description"
      app:layout_constraintBottom_toTopOf="@+id/moored_boat_body"
      app:layout_constraintEnd_toEndOf="@+id/moored_boat_body"
      app:layout_constraintStart_toStartOf="@+id/moored_boat_body"
      app:layout_constraintTop_toTopOf="parent"
      app:srcCompat="@drawable/ic_monohull_mooring_bow"
      tools:visibility="visible"/>
    <ImageView
      android:id="@+id/moored_boat_body"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:contentDescription="@string/boat_drawing_content_description"
      app:layout_constraintBottom_toTopOf="@+id/moored_boat_sternlines"
      app:layout_constraintDimensionRatio="h,1:1"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/moored_boat_bowlines"
      app:layout_constraintVertical_chainStyle="spread_inside"
      app:srcCompat="@drawable/ic_top_mv"
      tools:visibility="visible"/>
    <ImageView
      android:id="@+id/moored_boat_sternlines"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_marginBottom="8dp"
      android:contentDescription="@string/boat_drawing_content_description"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="@+id/moored_boat_body"
      app:layout_constraintStart_toStartOf="@+id/moored_boat_body"
      app:layout_constraintTop_toBottomOf="@+id/moored_boat_body"
      app:srcCompat="@drawable/ic_monohull_dock_aft"
      tools:visibility="visible"/>

  </android.support.constraint.ConstraintLayout>
</merge>

How do I make this adaptive and still look like the first image?

Answer 1

You can make a custom adaptive view using ConstraintLayout. Please notice the layout_constraintVertical_weight attribute.

boat.xml:

<?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="match_parent">

    <ImageView
        android:id="@+id/moored_boat_bowlines"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/bowlines"
        app:layout_constraintBottom_toTopOf="@+id/moored_boat_body"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="1" />

    <ImageView
        android:id="@+id/moored_boat_body"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/body"
        app:layout_constraintBottom_toTopOf="@+id/moored_boat_sternlines"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/moored_boat_bowlines"
        app:layout_constraintVertical_weight="10" />

    <ImageView
        android:id="@+id/moored_boat_sternlines"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/sternlines"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/moored_boat_body"
        app:layout_constraintVertical_weight="1" />

</android.support.constraint.ConstraintLayout>

Then you can use it in any other layout.

activity_one.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#8493"
        android:gravity="center"
        android:text="Filled!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <include layout="@layout/boat" />

</LinearLayout>

activity_two.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/boat_view"
        layout="@layout/boat"
        android:layout_width="100dp"
        android:layout_height="100dp" />

</android.support.constraint.ConstraintLayout>

Answer 2

Instead of ConstraintLayout you can use RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/first" />

    <ImageView
        android:id="@+id/sec"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/first"
        android:layout_centerHorizontal="true"
        android:src="@drawable/sec" />

    <ImageView
        android:id="@+id/third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/sec"
        android:layout_centerHorizontal="true"
        android:src="@drawable/third" />
</RelativeLayout>

Answer 3

I got a way to make this work. Include android.support.constraint.Guideline

Now you can arrange all the three elements center in screen and one below the other as shown.

As the images I used are small, it looks small and attached to top of screen. But in your case this will look as expected. All the images are using both height and width as wrap_content

To align top and center of screen

Below is the xml for the same

<android.support.constraint.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.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/left_guideline"
        app:layout_constraintGuide_percent=".02"
        android:orientation="vertical"
        />
    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/right_guideline"
        app:layout_constraintGuide_percent=".98"
        android:orientation="vertical"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profile"
        android:id="@+id/iconOne"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toRightOf="@+id/right_guideline"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconTwo"
        android:src="@drawable/contactus"
        app:layout_constraintTop_toBottomOf="@id/iconOne"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toRightOf="@+id/right_guideline"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconThree"
        android:src="@drawable/pricelist"
        app:layout_constraintTop_toBottomOf="@id/iconTwo"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toRightOf="@+id/right_guideline"
        />
</android.support.constraint.ConstraintLayout>

To align center to the screen

Now if you want these three images to center of screen , then below approach will be good.

Corresponding xml will be

<android.support.constraint.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.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/left_guideline"
        app:layout_constraintGuide_percent=".02"
        android:orientation="vertical"
        />
    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/right_guideline"
        app:layout_constraintGuide_percent=".98"
        android:orientation="vertical"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profile"
        android:id="@+id/iconOne"
        app:layout_constraintBottom_toTopOf="@id/iconTwo"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toRightOf="@+id/right_guideline"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconTwo"
        android:src="@drawable/contactus"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconThree"
        android:src="@drawable/pricelist"
        app:layout_constraintTop_toBottomOf="@id/iconTwo"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toRightOf="@+id/right_guideline"
        />
</android.support.constraint.ConstraintLayout>

These samples will give us a good start for ConstraintLayout

Reference One , Reference Two and Reference Three

Answer 4

You could use Linearlayout for this issue and you could set weight for each image so that it aligns properly and it will fill fit all screen sizes

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:padding="10dp"
        android:src="@drawable/top_image"
        android:layout_weight="1"/>

     <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
         android:padding="10dp"
         android:layout_marginTop="-100dp"
         android:src="@drawable/middle_image"
        android:layout_weight="1"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:padding="10dp"
        android:layout_marginTop="-100dp"
        android:src="@drawable/bottom_image"
        android:layout_weight="1" />


</LinearLayout>

feel free to edit

android:padding="10dp"
android:layout_marginTop="-100dp"
android:src="@drawable/bottom_image"
android:layout_weight="1"