Develop Reference

ImageView does not adopt to the size of the Relativelayout -> wrap_content

I am trying to get a layout like this:
my layout
the red colour beckground is just for better visualisation.
and i want that if the text in the edittext exeeds the given space of the edittext, that it expands only below and wraps the text. The Relativelayout and the constraintlayout including the edittext do the behavior i need but the imageview for the background won't expand to the now larger content of edittext.
problem
I tried this:
<?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"
android:background="#color/red">
<RelativeLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:minHeight="60dp"
android:maxHeight="300dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout2"
android:layout_width="315dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<EditText
android:id="#+id/editText"
android:layout_width="315dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif-medium"
android:maxHeight="290dp"
android:text="#string/test"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="18dp"
app:layout_constrainedHeight="true"
app:layout_constraintStart_toStartOf="#+id/layout2"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.4"
android:background="#drawable/add_skill_design"
android:maxHeight="300dp"
android:minHeight="60dp" />
<ImageView
android:id="#+id/add_skill_upload_circle"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/circle_skill"
android:layout_marginTop="20dp"
android:layout_marginStart="10dp" />
<ImageView
android:id="#+id/add_skill_upload_remove"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/remove"
android:layout_marginTop="15dp"
android:layout_marginEnd="10dp"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
What am i doing wrong? I need this for a project.

You can set the vertical alignment of the ImageView with the background drawable to depend on the boundaries of the ConstraintLayout:
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.4"
android:background="#drawable/add_skill_design"
android:maxHeight="300dp"
android:minHeight="60dp"
android:layout_alignTop="#+id/layout2"
android:layout_alignBottom="#+id/layout2" />

How to add recylerview in 1/3rd part of activity

I have on activity in which i need to add one horizontal list for showing the formats of image which should be appear in the lower part of the activity. Here is my xml file.
<?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"
android:background="#color/white"
android:fitsSystemWindows="true"
tools:context=".view.quickaction.QuickActionVideoActivity">
<RelativeLayout
android:id="#+id/quick_action_video_header_contatiner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/quick_action_video_close"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginTop="20dp"
android:text="#string/button_cancel"
android:textColor="#color/express_purple"
android:textSize="18dp" />
<TextView
android:id="#+id/quick_action_video_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/quick_action_video_close"
android:layout_marginTop="30dp"
android:fontFamily="#font/adobe_clean_bold"
android:text="#string/quick_action_resize_video_header"
android:textColor="#color/black_alpha_85"
android:textSize="32dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/quick_action_video_title"
android:text="#string/powered_by_magicX"
android:textColor="#color/black_alpha_85"
android:textSize="14dp" />
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/zoom_surface"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="15dp"
android:background="#drawable/rounded_rectangle_rect"
android:visibility="visible"
app:layout_constraintDimensionRatio="H,5:4"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/quick_action_video_header_contatiner">
<com.otaliastudios.zoom.ZoomSurfaceView
android:id="#+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:layout_marginBottom="25dp"
app:horizontalPanEnabled="true"
app:verticalPanEnabled="true"
app:zoomEnabled="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/zoom_surface"
app:layout_constraintBottom_toTopOf="#id/relativeLayout2"
tools:ignore="MissingConstraints">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal"
app:layout_constrainedHeight="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/quick_action_video_save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="12dp"
android:layout_marginBottom="12dp"
android:layout_weight="1"
android:background="#drawable/button_bg_rounded_corners"
android:fontFamily="#font/adobe_clean_bold"
android:text="#string/save_share_option"
android:textColor="#color/white_alpha_80" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
It should look like this:
But this recyler-view while loading taking the whole space of the activity and one header also. Can you tell me what is wrong in this? Can recyler-view won't be able to host inside this view.

The issue is that you don't have a top to bottom of constraint and have set the height as match constraints.. However for layouts like this i have a few tips..
do the layouts first with constant heights like 200 dp or so and change them later
follow a top to bottom or a bottom to top approach that is one view at the top and everything else is done taking that as anchor
use constraint layouts throughout. You don't need any other layout type if you're using constraint layout
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/zoom_surface"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="15dp"
android:background="#drawable/rounded_rectangle_rect"
android:visibility="visible"
app:layout_constraintDimensionRatio="H,5:4"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/quick_action_video_header_contatiner"
app:layout_constraintBottom_toTopOf=" ">add the suitable id
<com.otaliastudios.zoom.ZoomSurfaceView
android:id="#+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:layout_marginBottom="25dp"
app:horizontalPanEnabled="true"
app:verticalPanEnabled="true"
app:zoomEnabled="true" />
</androidx.constraintlayout.widget.ConstraintLayout>

Using wrap_content without content going of the screen and without using layout_weight

So I have something like this:
LinearLayout:
LinearLayout - wrap_content, background black:
TextView - wrap_content
LinearLayout:
Image - 20dp
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:gravity="center|start"
android:padding="5dp"
android:layout_margin="2dp">
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="klgjdkljgilfdjgidfhjiogjdio;jhgiju;fgjdhjgu;hdfuighdfuk;ghduk;fhgukldhfgujkdfhyufhglfdhguldfhguklhfdulghldfughyulfhdulghdfulghul"
android:textColor="#D5D5D5" />
<LinearLayout
android:layout_width="15dp"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginBottom="2dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="bottom|center"
android:src="#drawable/edit" />
</LinearLayout>
</LinearLayout>
This works perfectly but when the TextView contains text larger than the screen size, the image gets out of the screen. I don't want that to happen.
Here's the example:
Does anyone know how to fix this so it doesn't go outside the screen?
Thanks!

Try this with ConstraintLayout
<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">
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="klgjdkljgilfdjgidfhjiogjdio;jhgiju;fgjdhjgu;hdfuighdfuk;ghduk;fhgukldhfgujkdfhyufhglfdhguldfhguklhfdulghldfughyulfhdulghdfulghul"
android:textColor="#D5D5D5"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/image"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/image"
android:layout_width="20dp"
android:layout_height="10dp"
android:layout_gravity="bottom|center"
android:src="#drawable/edit"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/message"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Android: create space-around (equal space) between elements and borders

I have two imageView widgets and I would like to place them so that there is equal space between the left border and the left image, the left image and the right image, and the right image and the right border. (I wrote in the title of the question space-around because it's similar to the spacing used in CSS...)
Is it possible to achieve without manual adaptation (such as calculating margins)? And is it possible to achieve solely in the design mode without writing xml code?
Screen shot:
My XML:
<?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"
android:background="#drawable/newbackground"
tools:context=".MainActivity">
<Button
android:id="#+id/btnRoll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#3498db"
android:text="#string/btnRoll"
android:textColor="#ffffff"
tools:layout_editor_absoluteX="167dp"
tools:layout_editor_absoluteY="621dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:srcCompat="#drawable/dice1"
tools:layout_editor_absoluteX="59dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/dice2"
tools:layout_editor_absoluteX="267dp"
tools:layout_editor_absoluteY="406dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try This
<?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"
android:background="#drawable/newbackground"
tools:context=".MainActivity">
<Button
android:id="#+id/btnRoll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#3498db"
android:text="btnRoll"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/btnRoll"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/blue_heart" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
app:layout_constraintBottom_toTopOf="#id/btnRoll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:srcCompat="#drawable/blue_heart" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here is a proposition with a LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView ...
</LinearLayout>
With the layout_weight attribute, the "spacer" views will take the maximum of free space, equally

Responsive image sizing constraintlayout

I got a constraintlayout with five images in a row inside of it. My problem is that I want to have the size of these images responsive, so that now matter how small the width of a screen is, all of the images are shown.
This is my 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"
android:background="#android:color/transparent">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="55dp"
android:padding="10dp"
android:gravity="center"
android:layout_marginBottom="55dp"
android:text="This ist the title"
app:layout_constraintBottom_toTopOf="#id/smartphone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textAppearance="#style/introductionTitle"/>
<ImageView
android:id="#+id/smartphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/ic_smartphone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<ImageView
android:id="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/ic_next_dark"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/smartphone"/>
<ImageView
android:id="#+id/shop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/ic_store"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/next"/>
<ImageView
android:id="#+id/next2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/ic_next_dark"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/shop"/>
<ImageView
android:id="#+id/coffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/ic_coffee"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/next2"/>
</android.support.constraint.ConstraintLayout>
At the moment, this is what it looks like on differen screens:
preferably the images would be centered horizontally together. To achieve this I put them in a LinearLayout and this did work but I couldn't fix the responsiveness problem.

You can set:
android:layout_width = "0dp";
android:layout_weight = 1;
In all 5 Views, so they will cover your parent_layout_width with relative weights, in this case they all be equal width.