Recyclerview items are overlapping when I increase font size in settings.
in the first image recycler view items are normal but in the second image items are overlapping after increasing font size in settings.
this is code
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_margin="5dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:padding="10dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/itemImage"
style="#style/RecyclerviewArrowcolor"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:riv_oval="true"
/>
<View
android:id="#+id/viewSupporter2"
android:layout_width="1dp"
android:layout_height="1dp"
app:layout_constraintBottom_toBottomOf="#id/itemImage"
app:layout_constraintEnd_toEndOf="#id/itemImage"
app:layout_constraintStart_toStartOf="#id/itemImage"
app:layout_constraintTop_toTopOf="#id/itemImage" />
<TextView
android:id="#+id/diseasename"
style="#style/Recyclerviewdiseasecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease name"
android:textAppearance="?android:attr/textAppearanceMedium"
app:layout_constraintBottom_toTopOf="#id/viewSupporter2"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/diseasenickname"
style="#style/Recyclerviewnicknamecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease nickname"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toBottomOf="#id/viewSupporter2"
tools:ignore="NotSibling" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Because your itemImage is only vertically constrained to the top and has a fixed height of 40 dp, the top TextView only has 20 dp of height to fit within (the space between the top of the card and your "view supporter"). When it wraps to two lines, it stays centered in that 20 dp space and spills out to cover things above/below it.
You should rethink how you are setting up these constraints so they will be flexible with respect to font size changes causing more lines of text. For example, you could make the image be centered vertically in the row by constraining it to both the top and bottom like this, and get rid of the "ViewSupporter" entirely
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_margin="5dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:padding="10dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/itemImage"
style="#style/RecyclerviewArrowcolor"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:riv_oval="true"/>
<TextView
android:id="#+id/diseasename"
style="#style/Recyclerviewdiseasecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease name"
android:textAppearance="?android:attr/textAppearanceMedium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/diseasenickname"
style="#style/Recyclerviewnicknamecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease nickname"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toBottomOf="#id/diseasename"
tools:ignore="NotSibling" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
If you wanted to keep the image centered on the line between the two TextViews, you could do that too by adjusting the image top and bottom constraints
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/itemImage"
style="#style/RecyclerviewArrowcolor"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/diseasename"
app:layout_constraintBottom_toTopOf="#id/diseasenickname"
app:riv_oval="true"/>
Related
How to create a recyclerview with items having variable height as per the length of content text like the below image. Recyclerview also supports swipeable items.
Expected
Actual
My layout
<?xml version="1.0" encoding="utf-8"?>
<com.voiro.phoenix.custom.swipe_layout.SwipeRevealLayout 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/swipe_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:dragFromEdge="right">
<RelativeLayout
android:id="#+id/rl_mark_read"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#color/green"
android:clickable="true"
android:focusable="true"
android:visibility="visible">
<TextView
android:id="#+id/tv_mark_read"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:drawablePadding="2dp"
android:fontFamily="#font/roboto_medium"
android:gravity="center"
android:text="#string/mark_as_read"
android:textColor="#color/white"
android:textSize="12sp"
app:drawableTopCompat="#drawable/ic_double_check" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<androidx.cardview.widget.CardView
android:id="#+id/view_foreground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="90dp"
android:padding="16dp">
<ImageView
android:id="#+id/iv_notification_thumbnail"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="#drawable/ic_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/tv_notification_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto"
android:text="#string/value_place_holder"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#id/tv_notification_time"
app:layout_constraintStart_toEndOf="#id/iv_notification_thumbnail"
app:layout_constraintTop_toTopOf="#id/iv_notification_thumbnail" />
<TextView
android:id="#+id/tv_notification_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto"
android:text="#string/value_place_holder"
android:textColor="#color/text_desc"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_notification_title" />
<TextView
android:id="#+id/tv_notification_desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/value_place_holder"
android:textColor="#color/text_desc"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/tv_notification_title"
app:layout_constraintStart_toStartOf="#id/tv_notification_title"
app:layout_constraintTop_toBottomOf="#id/tv_notification_title"
tools:ignore="SmallSp" />
<ImageButton
android:id="#+id/ib_unread_dot"
android:layout_width="8dp"
android:layout_height="8dp"
android:background="#drawable/shape_circle_orange"
android:clickable="false"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</FrameLayout>
</com.voiro.phoenix.custom.swipe_layout.SwipeRevealLayout>
If you can see in the actual image the subtext is getting cropped whenever I try to set longer text on title text.
My Actual requirement is I want a layout something like notification tray of android where depending on the size of context list item height adjusts to accommodate the content also the height of swipe layout behind the list item adjusts accordingly.
I don't want to set height of item programmatically or manually. It should be auto adjusted as per the content length.
I searched through all over the internet but could not able to find the solution.
I'm trying to create the following layout:
Where after a certain device width, the container will only be a certain width and will not increase in size anymore, here it is set at 400dp. If the device is less than 400dp, then it will get the width of the device instead. The imageviews inside, should be half the width of the container. The container should also be centered after 400dp.
My current code doesn't center the container and it chops off the second image and the text on the right. How can I fix 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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
android:maxWidth="400dp">
<androidx.cardview.widget.CardView
android:id="#+id/postCard"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/postContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/postAuthorAvatar"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/landscape"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/postAuthorUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="\#username"
app:layout_constraintBottom_toBottomOf="#id/postAuthorAvatar"
app:layout_constraintLeft_toRightOf="#id/postAuthorAvatar"
app:layout_constraintTop_toTopOf="#id/postAuthorAvatar" />
<TextView
android:id="#+id/postDateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="21 Sept 2021"
app:layout_constraintBottom_toBottomOf="#id/postAuthorAvatar"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/postAuthorAvatar" />
<TextView
android:id="#+id/postTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/postAuthorAvatar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/postTitle">
<ImageView
android:id="#+id/postImgA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingRight="2.5dp"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/landscape"/>
<ImageView
android:id="#+id/postImgB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="2.5dp"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/landscape"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Use a Guideline in the project which runs through the middle of the layout
Code Snippet
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:id="#+id/postImgA"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
android:layoutMargin ="16dp"
app:layout_constraintStart_toStartOf="#id/guideline"
android:scaleType="centerInside"
android:src="#drawable/landscape"/>
<ImageView
android:id="#+id/postImgB"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="#id/guideline"
android:layoutMargin ="16dp"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/landscape"/>
then attach the images to the guideline and then to the parent give a margin to each. Use "0dp" or match constraints for it to mimic the image.
I am creating a home page for my android application in Android Studios. In the layouts folder I have my home page activity XML file. The home page will contain 3 clickable "boxes" which are CardViews. They are functioning correctly but I am working to change the CardViews sizes without hard-coding XML width and height (or other objects in the future). So that the sizes change properly according to different screen sizes.
In this specific case I want to increase the height of the CardViews.
Capture Receipt and Create Invoice CardViews I want to modify size of.
I am using a Linear Layout inside a Constraint Layout. The CardViews layout_width and layout_height are selected to match parent. I have modified the layout_weight, but this does not get the result I am looking for. I want to increase the heights without increasing the width.
Is this something to be done in XML or the Java part of the code?
Here is my home page activity XML code (without the Bottom Nav bar and Add Item part):
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomePageActivity">
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/lightComplimentGrey"
android:gravity="center|top"
android:orientation="vertical"
tools:context=".MainActivity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="290dp"
android:background="#drawable/curved_top"
android:orientation="horizontal"
android:paddingBottom="-50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="#+id/ll">
<TextView
android:id="#+id/currentUserTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="188dp"
android:layout_marginBottom="8dp"
android:gravity="left"
android:text="Current User"
android:textColor="#99E8F3"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.922"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.352" />
<TextView
android:id="#+id/userNameEntryTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="left"
android:hint="Not Signed In"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/currentUser"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/changeUserSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:backgroundTint="#FFFFFF"
app:layout_constraintBottom_toBottomOf="#+id/
app:layout_constraintStart_toEndOf="#+id/userNameEntry"
app:layout_constraintTop_toTopOf="#+id/currentUserTextView"
app:layout_constraintVertical_bias="0.558" />
<ImageButton
android:id="#+id/menuButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="4"
android:background="#drawable/ic_menu_light_blue_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.048" />
<ImageButton
android:id="#+id/notificationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="
android:background="#drawable/ic_tooLongToPost"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-70dp"
android:clipToPadding="false"
android:gravity="center"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/capture_receipt"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_margin="#dimen/view_margin_normal_screen"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:background="#drawable/circle_background_green"
android:padding="10dp"
android:src="#drawable/ic_photo_camera_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Capture Receipt"
android:textStyle="bold" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#color/lightComplimentGrey" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:text="Scan receipt to recognize items"
android:textColor="#android:color/darker_gray" />
</LinearLayout>
</android.support.v7.widget.CardView>
How is it possible to modify the heights and widths (just like you would when hard coding the XML) without hard-coding?
i have two text views. It has fixed margin on both sides. The text should be left aligned but on large devices with width > max width mentioned, the textview should be centered than left aligned. I am not able to get this centering on large devices.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#{title}"
android:textColor="?colorShade1"
android:textSize="60dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toTopOf="#id/subTitle"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="1280dp"
app:layout_constraintHorizontal_bias="0.0"
tools:text="Title" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/subTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginBottom="8dp"
android:text="#{subTitle}"
android:textColor="?colorShade1"
android:textSize="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guidelineEnd"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/title"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintWidth_max="640dp"
tools:text="SubTitleView" />
<android.support.constraint.Guideline
android:id="#+id/guidelineStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="64dp" />
<android.support.constraint.Guideline
android:id="#+id/guidelineEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="64dp" />
</android.support.constraint.ConstraintLayout>
Use app:layout_constraintWidth_max
This will center the LinearLayout in the constraint layout, keeping a 40dp horizontal margin until it hits 414dp width:
<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">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
app:layout_constraintWidth_max="414dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You need a copy of your layout in the res/layout-large folder with the second layout that will be specific for large screens.
See more in: https://developer.android.com/training/multiscreen/screensizes.html
In Aliases
I am trying to create a ConstraintLayout containing a complex layout but for some reason, it won't appear in the way that is expected. Does anyone know what must be done in order to fix the constraints and achieve the expected outcome?
XML layout code
<?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="wrap_content"
android:orientation="vertical"
android:background="#color/lightgrey"
android:weightSum="100">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mymap"
android:name="com.google.android.gms.maps.SupportMapFragment"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="41dp"
android:layout_height="0dp"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp" />
<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.9"/>
<ImageView
android:id="#+id/imageViewSun"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_sun_black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="guideline"
app:layout_constraintRight_toLeftOf="#+id/switch_stationstopmap_lighttheme"
app:layout_constraintHorizontal_bias="0.5"
android:layout_marginEnd="8dp"
android:layout_marginBottom="0dp" />
<Switch
android:id="#+id/switch_stationstopmap_lighttheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.5"
android:background="#android:color/transparent"
android:theme="#android:style/Theme.Material.Light" />
<ImageView
android:id="#+id/imageViewMoon"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_moon_black"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintLeft_toRightOf="#+id/switch_stationstopmap_lighttheme"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
android:layout_marginBottom="5dp" />
</android.support.constraint.ConstraintLayout>
Expected result
Current result
Desired requirements
The MapView height needs to be 90% of the layout's height
The height underneath for the 3 items needs to be 10% of the layout's height
The Switch needs to be exactly in the horizontal centre of the screen
The 3 items (both image views and Switch) need to be exactly in the vertical centre of the 10% height for point 2
The ImageView of the sun needs to be exactly halfway horizontally between the left hand side of the screen and the switch
The ImageView of the moon needs to be exactly halfway horizontally between the switch and the right hand side of the screen
5dp margin is required for both the top and bottom of the 10% height at the bottom of the layout (for the 3 items)
All of the above should result in the expected result image, which is what I want.
You can try this. I changed your root layout height to android:layout_height="match_parent" and then most of the issues are solved.
<?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="#color/colorAccent">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mymap"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f00"
app:layout_constraintBottom_toBottomOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/imageViewSun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/switch_stationstopmap_lighttheme"
app:layout_constraintTop_toBottomOf="#+id/guideline"
/>
<Switch
android:id="#+id/switch_stationstopmap_lighttheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#android:color/transparent"
android:theme="#android:style/Theme.Material.Light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageViewSun"
app:layout_constraintRight_toLeftOf="#+id/imageViewMoon"
app:layout_constraintTop_toBottomOf="#+id/guideline"/>
<ImageView
android:id="#+id/imageViewMoon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/switch_stationstopmap_lighttheme"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9"/>
</android.support.constraint.ConstraintLayout>