RelativeLayout works, whereas ConstraintLayout Fails - android

Here is the code from RelativeLayout,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:gravity="center">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:minWidth="200dp"
android:minHeight="200dp"
android:src="#drawable/ic_baseline_description_24px"
android:tint="#color/grey" />
</RelativeLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txtInputLayoutCaption"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="#dimen/dp8"
android:layout_toStartOf="#+id/imgSend"
android:hint="#string/caption">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextCaption"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/trebuchet" />
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:id="#+id/imgSend"
android:layout_width="#dimen/dp36"
android:layout_height="#dimen/dp36"
android:layout_alignTop="#+id/txtInputLayoutCaption"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_baseline_send_24px"
android:tint="?attr/colorPrimary" />
</RelativeLayout>
RelativeLayout Output
And here is the constraint layout code,
<?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">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:minWidth="200dp"
android:minHeight="200dp"
android:src="#drawable/ic_baseline_description_24px"
android:tint="#color/grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txtInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/dp8"
android:hint="#string/caption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imgSend"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:id="#+id/imgSend"
android:layout_width="#dimen/dp36"
android:layout_height="#dimen/dp36"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_baseline_send_24px"
android:tint="?attr/colorPrimary"
app:layout_constraintBottom_toBottomOf="#+id/txtInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/txtInputLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the output for constraint layout code.
Note: I'm using androidx.constraintlayout:constraintlayout:2.0.0-beta2

Intention of ConstraintLayout is to optimize and flatten the view hierarchy of your layouts by applying some rules to each view to avoid nesting.
Rules remind you of RelativeLayout, for example setting the left to the bottom of some other view.
app:layout_constraintBottom_toBottomOf="#+id/view1"
Unlike RelativeLayout, ConstraintLayout offers bias value that is used to position a view in terms of 0% and 100% horizontal and vertical offset relative to the handles (marked with circle). These percentages (and fractions) offer seamless positioning of the view across different screen densities and sizes.
app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

Give send button start constraint to txtInputLayoutCaption
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:minWidth="200dp"
android:minHeight="200dp"
android:src="#drawable/ic_share_active"
android:tint="#color/gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txtInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:hint="caption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imgSend"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:id="#+id/imgSend"
android:layout_width="36dp"
android:layout_height="36dp"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_send"
app:layout_constraintBottom_toBottomOf="#+id/txtInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/txtInputLayout"
app:layout_constraintTop_toTopOf="#+id/txtInputLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

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>

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

Layout in fragment not centering

I'm building my first proper application for Android. I wish to use the Navigation Drawer Activity to switch between screens and options. So far so good. All working great. But my layouts that load in the content are not aligned properly. See pictures
I have tried to change the layout_width and layout_height to fill_parent, match_parent and wrap_content in all combinations. Also tried adding the gravity center and vertical gravity but so far i have failed.
content layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main_menu"
tools:context=".MainMenu">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
the content im trying to put in the content layout:
<?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:layout_editor_absoluteY="81dp">
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/fragment_client_add_address"
android:id="#+id/imageView10"
app:layout_constraintEnd_toStartOf="#+id/editText10"
android:layout_marginEnd="12dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText10"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Kontakt broj"
android:ems="10"
android:id="#+id/editText9"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText11"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Adresa"
android:ems="10"
android:id="#+id/editText10"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText9"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Naziv klijenta"
android:ems="10"
android:id="#+id/editText11" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="64dp" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.518"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="E-Mail"
android:ems="10"
android:id="#+id/editText12"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText10"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/round_person_black_48"
android:id="#+id/imageView11"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText11" app:layout_constraintEnd_toStartOf="#+id/editText11"
android:layout_marginEnd="12dp"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/round_call_black_48"
android:id="#+id/imageView12"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText9" app:layout_constraintEnd_toStartOf="#+id/editText9"
android:layout_marginEnd="12dp"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/fragment_client_add_email"
android:id="#+id/imageView13"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText12" app:layout_constraintEnd_toStartOf="#+id/editText12"
android:layout_marginEnd="12dp"/>
<Spinner
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/editText12" app:layout_constraintStart_toStartOf="#+id/editText12"
app:layout_constraintEnd_toEndOf="#+id/editText12" android:entries="#array/clientType"
/>
<Spinner
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/spinner2" app:layout_constraintStart_toStartOf="#+id/spinner"
app:layout_constraintEnd_toEndOf="#+id/spinner" android:entries="#array/clientContract"
app:layout_constraintTop_toBottomOf="#+id/spinner" android:layout_marginTop="32dp"/>
<Button
android:text="#string/button_genericConfirm"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/button" android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="128dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="128dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/spinner2" app:layout_constraintVertical_bias="1.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what i expect it to look like:
But in reality this is what it looks like:
The issue in your RelativeLayout inside your content layout
You need to chnage the width of your RelativeLayout to android:layout_width="match_parent" in your content layout
Try this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main_menu"
tools:context=".MainMenu">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is not with your fragment layout implementation, I just tried in an activity and it is worked properly.
I would say to change the content layout to FrameLayout, which is often used to hold the fragments, more information can be found here :Why is a FrameLayout used for fragments?
The frame layout instead of relative layout should be
<FrameLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Just left the id as relativeLayout, but feel free to change it.
Also, if you have such a problem, you can always use the layout inspector, it is in the tools menu, give it a try. Or you can just play with background colors, to check the layout sizes, just like back in time, before layout inspector.
It is always good to use drawablestart instead of imageview in all edit text
Please find below xml may it will be helpful
<?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">
<EditText
android:id="#+id/editText11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:layout_marginEnd="8dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Naziv klijenta"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.518"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Kontakt broj"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText11" />
<EditText
android:id="#+id/editText10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Adresa"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText9" />
<EditText
android:id="#+id/editText12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="E-Mail"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText10" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:entries="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="#+id/editText12"
app:layout_constraintStart_toStartOf="#+id/editText12"
app:layout_constraintTop_toBottomOf="#+id/editText12" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:entries="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="#+id/spinner"
app:layout_constraintStart_toStartOf="#+id/spinner"
app:layout_constraintTop_toBottomOf="#+id/spinner" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="128dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="128dp"
android:layout_marginBottom="32dp"
android:text="xxxx"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner2"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
In case you want specific size for your imageview in left use below code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:drawable="#drawable/icon"
android:width="#dimen/icon_size"
android:height="#dimen/icon_size"
/>
</layer-list >
Use FrameLayout instead of relative layout and finally remove the line from parent constraint layout..
tools:layout_editor_absoluteY="81dp"
try to use like below
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
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_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="34dp"
android:layout_height="34dp"
app:srcCompat="#drawable/fragment_client_add_address"
android:id="#+id/imageView10"
android:layout_marginEnd="12dp"
android:layout_marginTop="8dp"/>
</androidx.appcompat.widget.LinearLayoutCompat>
And for content main
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.appcompat.widget.LinearLayoutCompat>
You can use the property app:layout_constraintVertical_bias so that it is biased equally to parent. This can also be achieved in layout editor by constraining all 4 sides of the layout to parent.

Put ImageButton between two view groups

I have a LinearLayout with a Toolbar inside it and an EditText and a Button. I'm using images to express what i want, it is simple:
This is what I have right now: (the ImageButton with the logo is in the Toolbar)
And this is what I want to achieve: (The ImageButton with the logo is between the Toolbar and the LinearLayout)
This is my XML code for the layout file:
<?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"
xmlns:fab="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/secondColor"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/mainColor"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:paddingLeft="-10dp">
<ImageButton
android:id="#+id/btnMenu"
style="#android:style/Widget.DeviceDefault.ImageButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/menu_principal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_weight="5"
android:fontFamily="#font/roboto_medium"
android:text="#string/app_name"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="24sp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="false"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/spotify_logo" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:hint="#string/editReminderTitleHint"
/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
You can achieve this by changing your LinearLayout top-level view into a ConstraintLayout:
<?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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<EditText
android:id="#+id/edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:hint="Reminder title"/>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/edit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="BUTTON"/>
<ImageButton
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/toolbar"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
The important part here is that you constrain both the top and bottom of the ImageButton to the bottom of the Toolbar. This will center it on the bottom edge of the toolbar.
Note that I didn't set a special background for my example ImageButton, but you can make it a circle and it will work just fine.

Categories

Resources