All geek questions in one place

ConstraintLayout: Overlay ImageView on toolbar and set image height based on GuideLine width

I want to reach these points (first image):

  • Height

  • Toolbar should be 35% of the screen height

  • The center ImageViewshould be placed at the bottom Toolbar(shown in the image)

  • Width ImageViewshould be 33% of the screen width
  • The ratio ImageViewshould be 1: 1 (size depends on screen size)

enter image description here

My code is:

    <?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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="io.inov.nepalwaterapp.UserProfileActivity">

        <android.support.constraint.Guideline
            android:id="@+id/guidelineToolbarHeight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent=".35" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.MyApp.ActionBar"
            app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        </android.support.v7.widget.Toolbar>

<android.support.constraint.Guideline
            android:id="@+id/guidelineImageStart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".33" />

        <android.support.constraint.Guideline
            android:id="@+id/guidelineImageEnd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".66" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:src="@drawable/avatar_diver"
            app:layout_constraintDimensionRatio="h,1:1"
            app:layout_constraintBottom_toBottomOf="@id/toolbar"
            app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
            app:layout_constraintRight_toRightOf="@id/guidelineImageEnd"
            app:layout_constraintTop_toBottomOf="@id/toolbar" />

    </android.support.constraint.ConstraintLayout>

The result of the code above:

enter image description here

Please help me find the problem.

Thank.

+4
source share
4 answers

, , , , , 0dp, bar . , , .

70% (. guidelineToolbarHeight2 XML ) ( ) . . , .

[ , , - , 100000dp. , .]

enter image description here

enter image description here

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

    <android.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".35" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".70" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </android.support.v7.widget.Toolbar>

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".33" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".66" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/avatar_diver"
        app:layout_constraintBottom_toTopOf="@id/guidelineToolbarHeight2"
        app:layout_constraintDimensionRatio="W,1:1"
        app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
        app:layout_constraintRight_toRightOf="@id/guidelineImageEnd"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

, :

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHeight_percent="0.35"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/avatar_diver"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/toolbar"
        app:layout_constraintWidth_percent="0.33" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.70" />

</android.support.constraint.ConstraintLayout>
+1

, , . .

Xiaomi Mi A1 1080: 1920. , 16: 9. .

- ImageView, guidelineToolbarHeight, 35% . , (guidelineImageTop) ImageView, , . , guidelineImageTop.

ImageView , .

width = 33% of 1080 = 356.4
height = width = 356.4
halfHeight = height/2 = 178.2

guidelineImageTop halfHeight guidelineToolbarHeight.

guidelineToolbarHeights position in pixel = 35% of 1920 = 672
guidelineImageTops position in pixel = 672 - 178.2 = 493.8
Imagine, x% of 1920 = 493.8
x = 25.7

, guidelineImageTop 25% . , :

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="me.mazid.test.MainActivity">

<android.support.constraint.Guideline
    android:id="@+id/guidelineToolbarHeight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".35" />

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.MyApp.ActionBar"
    app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</android.support.v7.widget.Toolbar>

<android.support.constraint.Guideline
    android:id="@+id/guidelineImageStart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".33" />

<android.support.constraint.Guideline
    android:id="@+id/guidelineImageEnd"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".66" />

<android.support.constraint.Guideline
    android:id="@+id/guidelineImageTop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".25" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:src="@drawable/avatar_diver"
    app:layout_constraintDimensionRatio="h,1:1"
    app:layout_constraintBottom_toBottomOf="@id/toolbar"
    app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
    app:layout_constraintRight_toRightOf="@id/guidelineImageEnd"
    app:layout_constraintTop_toTopOf="@id/guidelineImageTop" />

:

  • , . .
  • , , guidelineImageTop.
0

, , ConstraintLayout. Java Code. :

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".35" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".35" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </android.support.v7.widget.Toolbar>

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".33" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".66" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="false"
        android:cropToPadding="false"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintBottom_toBottomOf="@id/toolbar"
        app:layout_constraintTop_toBottomOf="@id/guidelineToolbarHeight2"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
        app:layout_constraintRight_toRightOf="@id/guidelineImageEnd" />

</android.support.constraint.ConstraintLayout>

Java Code :

import android.os.Bundle;
import android.support.constraint.ConstraintLayout;
import android.support.constraint.Guideline;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.ViewTreeObserver;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    private ImageView iv;
    private int imageHeight, screenHeight;
    private Guideline guideLine;
    private ConstraintLayout.LayoutParams params;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv = findViewById(R.id.imageView);

        guideLine = findViewById(R.id.guidelineToolbarHeight2);
        params = (ConstraintLayout.LayoutParams) guideLine.getLayoutParams();

        //Get Display Height
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        screenHeight = displayMetrics.heightPixels;

        //Get ImageView Current Height
        ViewTreeObserver vto = iv.getViewTreeObserver();
        vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            public boolean onPreDraw() {
                iv.getViewTreeObserver().removeOnPreDrawListener(this);
                imageHeight = iv.getMeasuredHeight();

                //getting screen height where guideline will be placed
                float predictedGuidelinePlacementHeight = ((screenHeight * 35) / 100) - (imageHeight/2); // 35 is your guideline percentage for toolbar

                //change guideline constraint percentage
                params.guidePercent = ((predictedGuidelinePlacementHeight * 100) / screenHeight) / 100;
                guideLine.setLayoutParams(params);

                return true;
            }
        });




    }
}
0

ConstraintLayout "1.1.0-beta3" .

layout_constraintHeight_default "percent" ( ) , "layout_constraintHeight_percent". ( )

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent=".35"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@+id/space"
        app:layout_constraintTop_toTopOf="@+id/space"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".33" />

</android.support.constraint.ConstraintLayout>

As you can see, I had to add the widget Spaceand set its height to 200dp, because now the percentage sizes are reset in the center with the other edge of the widget.

0
source

Source: https://habr.com/ru/post/1690562/

More articles:


All Articles