Adjustable user interface

Question

I have a custom view consisting of 3 elements. I want the view to be responsive to the size available to it. I want it to look like .

But in order to make it look like this, I had to add strict size limits, which makes it not adaptive.

Here's what it looks like using match_constraint for all image representations (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 to make it responsive and still look like the first image?

Answer 1

With ConstraintLayout, you can create a custom responsive view. Note 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> 

enter image description here

enter image description here

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> 

enter image description here

Answer 2

You can use Linearlayout for this problem, and you can set the weight for each image so that it aligns correctly and it will fill 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" 

Answer 3

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 4

I have a way to make this work. Enable android.support.constraint.Guideline

Now you can place all three elements in the center of the screen and one below the other, as shown in the figure.

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

To align the top and center 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 center to the screen

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

The 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 , Link 2 and Link 3