how to include constraint layout in main layout appropriately?

Question

I have a main layout in which I am adding constraint layout as include tag. Here is my main layout.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/text1"
        android:textAlignment="center"
        android:textColor="@color/app_theme_primary"
        android:textSize="@dimen/large_header_text_size" />

    <TextView
        android:id="@+id/version_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/version_number"
        android:textAlignment="center"
        android:textColor="@color/common_main_background"
        android:textSize="@dimen/secondary_text_size"/>

    <TextView
        android:id="@+id/develop_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/padding_10dp"
        android:gravity="center"
        android:text="@string/developed_text"
        android:textColor="@color/common_main_background"
        android:textStyle="bold" />

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

    <TextView
        android:id="@+id/trademarks"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="@string/trademarks"
        android:textAlignment="center"
        android:paddingTop="@dimen/multi_screen_small_padding"
        android:textColor="@color/common_main_background"
        android:textSize="@dimen/secondary_text_size" />
    </LinearLayout>

My constraint layout which consists of Two imageViews as below

<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/logo1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        android:paddingTop="@dimen/multi_screen_medium_padding"
        android:paddingStart="@dimen/multi_screen_medium_padding"
        android:paddingEnd="@dimen/multi_screen_medium_padding"
        android:src="@drawable/logo1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="16dp"/>

    <ImageView
        android:id="@+id/logo2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:src="@drawable/logo2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo1"
        android:layout_marginTop="8dp"
        app:layout_constraintDimensionRatio="w,1:1"/>

</android.support.constraint.ConstraintLayout>

My requirement are
1.Constraint layout should be fitted properly in main layout but here I facing problem is last textview (id:trademarks) not showing on screen since constraint layout occupied the screen till bottom of the screen.
2. Second image (logo2) should adjust appropriately as per screen size (small screen small bigger screens some what bigger).

Please help me how to do it? Thanks in advance.

You need to use different resolutions of the same image. Read [this](https://stackoverflow.com/questions/37207443/how-to-put-single-image-for-different-screen-size). — gbruscatto, Nov 06 '17 at 15:09
You should use Ctrl+K or Cmd+K to properly format your source code chunks. — Eugene Brusov, Nov 07 '17 at 12:21
This seams Complicated. So Best Solution would be to do what gbruscatto or to do it by percentage as: https://stackoverflow.com/questions/37318228/how-to-make-constraintlayout-work-with-percentage-values — Mohammad Tabbara, Nov 07 '17 at 17:24

score 0 · Answer 1 · edited Nov 07 '17 at 13:24

The Title doesn't fit the question well, but here some tips and a solution:

1- You are missing the constraint to the bottom of the parent view on the logo2

2- Also wrapping content and giving 1,1 is not good idea

Solution: constraint the view to bottom then place 0dp for the height.

<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/logo1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        android:paddingTop="@dimen/multi_screen_medium_padding"
        android:paddingStart="@dimen/multi_screen_medium_padding"
        android:paddingEnd="@dimen/multi_screen_medium_padding"
        android:src="@drawable/logo1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="16dp" />

    <ImageView
        android:id="@+id/logo2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@null"
        android:src="@drawable/logo1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo1" />

</android.support.constraint.ConstraintLayout>

Thanks for quick response, but if I do like this logo2 become too large. — kodali, Nov 06 '17 at 18:06
Hi Mohammad, I edited my question and code as well, please check and can you give any suggestion ? Please let me know if you need any clarification. — kodali, Nov 07 '17 at 10:30
You should use Ctrl+K or Cmd+K to properly format your source code chunks. — Eugene Brusov, Nov 07 '17 at 12:23

score 0 · Answer 2 · answered Nov 06 '17 at 16:18

0

Try using the ScaleType property of ImageView. It has all this properties:

CENTER – Center the image but doesn’t scale the image.

CENTER_CROP – Scale the image uniformly.

CENTER_INSIDE – Center the image inside the container, rather than making the edge match exactly.

FIT_CENTER – Scale the image from center.

FIT_END – Scale the image from the end of the container.

FIT_START – Scale the image from start of the container.

FIT_XY – Fill the image from x and y coordinates of the container.

MATRIX – Scale using the image matrix when drawing. example:

android:scaleType="center"

Check out this documentation Click here

answered Nov 06 '17 at 16:18

Ron Daulagupu

423
6
18

If I use scaleType, aspect ratio will lose, am I right ? – kodali Nov 06 '17 at 18:01
yes and no. u see there are several values for scaleType like u see in case of center it will display the entire image whatever resolution u have got, but it will take a huge space if your image is big. But if u use center_crop, then u can scale the image too. U will lose some aspect ratio but it will try to adjust it uniformly. anyhow it works. I use center_crop for my image all the time. Try to experiment with different values. See which one fits your requirement – Ron Daulagupu Nov 07 '17 at 03:09

score 0 · Accepted Answer · answered Nov 15 '17 at 10:47

After several hours hardwork, myself got perfect answer for my question. Please Check below
My main_layout.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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <TextView
        android:id="@+id/app_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:textAlignment="center"
        android:textColor="@color/theme_primary"
        android:textSize="@dimen/large_header_text_size"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/version_number"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/version_number"
        android:textAlignment="center"
        android:textColor="@color/common_main_background"
        android:textSize="@dimen/secondary_text_size"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/app_name"/>

    <TextView
        android:id="@+id/develop_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingTop="@dimen/padding_10dp"
        android:text="@string/developed_by"
        android:textColor="@color/common_main_background"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/version_number"/>

    <include
        android:id="@+id/common_layout"
        layout="@layout/common_layout"
        android:layout_width="0dp"
        android:layout_height="324dp"
        android:layout_marginTop="@dimen/multi_screen_medium_padding"
        app:layout_constraintBottom_toTopOf="@+id/trademarks"
        app:layout_constraintDimensionRatio="1:0.90"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/develop_text"/>

    <TextView
        android:id="@+id/trademarks"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/multi_screen_medium_padding"
        android:text="@string/trademarks"
        android:textAlignment="center"
        android:textColor="@color/common_main_background"
        android:textSize="@dimen/secondary_text_size"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/common_layout"/>

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

My include xml (secondary_layout.xml)

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/logos"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@null"
    android:src="@drawable/logos"
    app:layout_constraintBottom_toTopOf="@+id/alliance"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginLeft="@dimen/multi_screen_medium_padding"
    android:layout_marginRight="@dimen/multi_screen_medium_padding"
    android:layout_marginTop="@dimen/multi_screen_medium_padding"
    android:layout_marginBottom="@dimen/multi_screen_medium_padding"/>

<ImageView
    android:id="@+id/alliance"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="@dimen/multi_screen_medium_padding"
    android:contentDescription="@null"
    android:src="@drawable/alliance"
    app:layout_constraintBottom_toBottomOf="@+id/main_layout"
    app:layout_constraintDimensionRatio="3:1"
    app:layout_constraintHorizontal_bias="0.50"
    app:layout_constraintLeft_toLeftOf="@+id/logos"
    app:layout_constraintRight_toRightOf="@+id/logos"
    app:layout_constraintTop_toBottomOf="@+id/logos"
    app:layout_constraintVertical_bias="0.50"/>
</android.support.constraint.ConstraintLayout>

Thanks for suggestions.

how to include constraint layout in main layout appropriately?

3 Answers3