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>
Related
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" />
I created a component for my app which I use like a card. It has some textviews and an end image, but the image always appears with some withe border liek in the image bellow:
I tried everything to fix it but I can figure out how and it's important because the component it's used in almost all the app and in all of them the all the images appear with some withe border.
Component code:
<androidx.cardview.widget.CardView 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="106dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/image_card_end"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/txt_card_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dp"
app:textType="semibold"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/second_description_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="gone"
tools:visibility="visible">
<TextView
android:id="#+id/txt_card_second_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:textSize="14dp"
app:textType="regular"
/>
</LinearLayout>
</LinearLayout>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_card_end"
android:layout_width="98dp"
android:layout_height="106dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/card_appointment_image" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
And this is how I use it:
<com.univer.components.card.BasicCard
android:id="#+id/home_card_auto_evaluation_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardCornerRadius="8dp"
app:cardDescription="#string/home_card_selfdiagnosis_description"
app:cardEndImage="#string/image_home_card_symptomchecker"
app:cardHeader="#string/home_card_selfdiagnosis_header" />
Set a background which is easily visible(eg: red) to your cardview and run the app.
If the red section gets visible it means the inner constraint layout isn't wrapping the cardview completely . If that is the case I would suggest experimenting with scale type as so
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_card_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center-crop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/card_appointment_image" />
I am having an issue with the following 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"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp">
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#419E9E9E"
android:orientation="horizontal"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/block"></LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TextView
android:id="#+id/holderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="12sp"
android:gravity="center_vertical"
android:maxLines="4"
android:text="Hello World"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/holder" />
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Vertically, the layout does what I want: it puts the last layout and fills the screen.
However, when the device is flipped horizontally, the bottom portion (the nested constraintlayout) disappears due to the constraint on itself of app:layout_constraintBottom_toBottomOf="parent"
"How do I fill the screen with a second layout while still having it scroll horizontally ?"
I have attached pics and a demo repository to isolate the problem.
Link: https://github.com/taesookim0412/StackOverflow_Question_Android_NestedConstraintLayouts_ScrollView
I've found a solution. Instead of minHeight, you can use
app:layout_constraintHeight_min="100dp"
I've been trying out for a long time now but I just don't understand why "layout3" extends to the edge of the root element and not just to the right edge of "layout2" as I wanted it to.
Here is the XML 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"
android:orientation="vertical"
android:layout_marginBottom="50dp"
android:id="#+id/layout1">
<TextView
android:layout_width="224dp"
android:layout_height="159dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="184dp"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
android:id="#+id/textview1"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/textview1"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#id/layout1"
app:layout_constraintEnd_toEndOf="#id/layout1"
android:layout_marginEnd="500dp"
android:id="#+id/layout2">
<TextView
android:layout_width="224dp"
android:layout_height="159dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginStart="20dp"
android:id="#+id/textview2"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toBottomOf="#+id/textview1"
android:layout_marginTop="20dp"
app:layout_constraintStart_toEndOf="#id/layout2"
app:layout_constraintEnd_toEndOf="#id/layout1"
android:id="#+id/layout3">
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is a picture from the editor:
In layout3, instead of
android:layout_width="match_parent"
write:
android:layout_width="0dp"
and it will be placed right next to the top of layout2.
In case you wonder how it has a wide range even with width=0dp, it is because of these 2 constraints:
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/layout2"
They pull LinearLayout to 2 opposite sides, and as a result it unwraps.
I tried on both emulator and physical device ,with different layouts, but app shows only about sixty percent of layout,like its exceeding the visible screen and some component goes under.
I tried to use a scroll view,but no success.
<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="#242323"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="395dp"
android:layout_height="715dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="blah blah"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="press"
android:layout_centerHorizontal="true"
android:layout_below="#id/edittext"
/>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
In your code,try to change this:
from
<RelativeLayout
android:layout_width="395dp"
android:layout_height="715dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
to
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
When using constraint layout you need to link your views to some other view/boundry. In your case your RelativeLayout was not linked to parent, and you were using an extra Layout so remove the Constraint layout and use just Relative layout.
That will work.
Try the following xml
<RelativeLayout 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="#242323"
tools:context=".MainActivity">
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="blah blah"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="press"
android:layout_centerHorizontal="true"
android:layout_below="#id/edittext"
/>
</RelativeLayout>
Remove the relative layout and just use constraint layout only. Note that your button and edittext have to be constrained to the parent view. Learn more about Constraint Layout at https://developer.android.com/reference/android/support/constraint/ConstraintLayout
Try the following xml
<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="#242323"
tools:context=".MainActivity">
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:hint="blah blah"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/edittext"
android:layout_centerHorizontal="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="press"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/edittext" />
</androidx.constraintlayout.widget.ConstraintLayout>