Aligning horizontal recycler view below imageview using constraint layout

constraint layout view on top of another
constraint layout barrier
constraint layout in android tutorials point
constraint layout overlapping
constraint layout guideline
android constraint layout responsive design
constraint layout align bottom
constraint layout chain

I am using below xml code for placing a horizontal RecyclerView below ImageView But My Recycler is not displaying and ImageView occupies entire space. In Big size mobile design looks fine. But not able to acheive that for small mobile phones.

Horizontal RecyclerView consists of multiple images..it should be bottom of the screen...On clicking the image, I want to display it above horizontal RecyclerView.

I am using barrier for that issue but that does't solve my question. Anybody please help me to find the solution.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/constriantLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="RtlSymmetry">

    <ImageView
        android:id="@+id/view_current_photo"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/no_photo_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/top_guideline"
        app:layout_constraintStart_toStartOf="@id/left_guideline"
        />

    <androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:id="@+id/left_guideline"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.3"/>

    <androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/top_guideline"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/photo_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/barrier3"
        app:layout_constraintEnd_toEndOf="parent"
        tools:layout_editor_absoluteX="39dp" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="view_current_photo"
        app:barrierDirection="bottom" />


</androidx.constraintlayout.widget.ConstraintLayout>

Thank u all for ur answers, I got a solution, here it is,

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:ignore="RtlSymmetry">

    <ImageView
        android:id="@+id/view_current_photo"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintBottom_toTopOf="@id/image_view_guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:contentDescription="@string/view_current_photo" />
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image_view_guideline"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.7"/>
    <TextView
        android:id="@+id/no_photo_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/top_guideline"
        app:layout_constraintStart_toStartOf="@id/left_guideline"
        />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:id="@+id/left_guideline"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3"/>

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/top_guideline"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/photo_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="10dp"
        app:layout_constraintTop_toBottomOf="@id/image_view_guideline"
        app:layout_constraintBottom_toBottomOf="parent"
        />



</androidx.constraintlayout.widget.ConstraintLayout>

Guide to ConstraintLayout. The other day I used the latest and…, Instead I will guide you on how to use ConstraintLayout in First thing first, if you have a min SDK lower than 17, you can now shift to using only start and to align the same side of two views to each other, in ConstraintLayout you The first one is their orientation, horizontal or vertical, and the second one� Project on how to Create Horizontal Scrolling RecyclerView in Android. Go ahead and create a new android project from File > New Project. Fill in all the necessary details, when prompted to select an activity, select Basic Activity and proceed. First create items.xml layout from layout > new > Layout Resources File. This file will represent a

I have try to modify your layout hope it help you, do not fix your image size.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/constriantLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="RtlSymmetry">

    <ImageView
        android:id="@+id/view_current_photo"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/top_guideline"/>

    <TextView
        android:id="@+id/no_photo_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/top_guideline"
        app:layout_constraintStart_toStartOf="@id/left_guideline" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:id="@+id/left_guideline"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/top_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/photo_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/top_guideline"
        app:layout_constraintEnd_toEndOf="parent" />



</androidx.constraintlayout.widget.ConstraintLayout>

Exploring the new Android ConstraintLayout, It allows us to lay out child views using 'constraints' to define position layout_constraintTop_toTopOf — Align the top of the desired view to the top We can set this using the slider in the layout editor (seen below) or using the attribute in This allows us to position a view along the horizontal axis using a� A basic user interface for displaying service results in a recycler view is shown below: . inflate (R. layout. item_photo, parent, false it is used to populate the item's image view

I am not sure about my answer but this is my code if i understand correctly your problem. RecyclerView scroll horizontall with each item is an image, when i click item, image will display, replace for image above

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="vn.prdcv.dlreader.InputPasswordActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

    <ImageView
        android:id="@+id/ivBackground"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:src="@drawable/panasonic"
        android:scaleType="fitXY"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginBottom="16dp"/>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@color/red"
        />
</android.support.constraint.ConstraintLayout>

Android ConstraintLayout Example Tutorial, Android ImageView � 53. To use android ConstraintLayout, make sure you're using the latest Android with the root class set to ConstraintLayout as shown in the image below. toLeftOf signifies aligning the view to the left of the assigned view which is Notice the horizontal and vertical sliders in the properties pane. A ConstraintLayout is a android.view.ViewGroup which allows you to position and size widgets in a flexible way.. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).

Constraint Layout Android Example - Part 2, Constraint Layout Android Example Tutorial, ConstraintLayout in Android, constraint layout chaining, setting constraints using toolbar, alignment, spread. Android ImageView � 53. Android Android RecyclerView with Dividers � 66. An example for aligning two views, centre horizontally or centre vertically is given below. 4:3 view. You can also use it when both sides of your view are set to match_constraint, but then you must specify which side will be computed as a ratio of the other one by adding W or H before

Use ConstraintLayout to design your Android views, In this codelab, you'll learn how to use the Android Studio Layout Editor with A constraint represents a connection or alignment to another view, the parent layout, Studio to be able to build a complex layout such as the one shown below. Since the ImageView is positioned with both horizontal and vertical opposing� You can offset the alignment by dragging the view inward from the constraint. For example, figure 10 shows B with a 24dp offset alignment. The offset is defined by the constrained view's margin. You can also select all the views you want to align, and then click Align in the toolbar to select the alignment type.

Feature spotlight: Building a horizontal carousel on Android , Dynamic height cards in a horizontal carousel is a problem that engineers Android's RecyclerView and ConstraintLayout to present cards with peek of 96dp, for better alignment, with a space of 12dp between items. With a combination of Space and Barrier tools in ConstraintLayout, we <ImageView. To align the ImageView to the top, select the ImageView, hover over the bottom constraint handle until the tooltip appears, and then Command (in MacOS) or Control (Ctrl in Windows) click the bottom

Comments
  • can you show an image what you want and image what you get, plz. I think may be problem because of width and height or some constranint not correct.
  • @Hoàng Vũ Anh..not able to add image..sry...but I will explain in detail..I will edit my question
  • If it does't help you then post an image of your problem with at at least 2 different screensize.