I am having a Guideline in a Constraint Layout that I use to anchor a LinearLayout to keep to its left as follows:
So, you can see the Guideline a bit right to middle and between LinearLayout on the left and the ImageView to the right.
Now, when I run the App and set the text of Skill Set or Tutor Types or Location considerably large, it crosses the GuideLine to being behind the ImageView as follows:
(Note: This is NOT a real person's data but mock data)
If you see the XML, you will find that the LinearLayout is indeed meant to be anchored to_left_of the Guideline but that doesn't happen.
So, what is the problem here? Is there a bug in Constraint Layout or am I missing something?
Layout for reference:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="#color/lightGrey"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:elevation="2dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="#+id/linearLayout"
tools:layout_editor_absoluteY="16dp">
<TextView
android:text="#string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tutor_name"/>
<TextView
android:text="#string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/skill_set"/>
<TextView
android:text="#string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/tutor_types" />
<TextView
android:text="#string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:srcCompat="#android:color/holo_blue_light"
android:id="#+id/display_pic"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tutor_rating"
android:layout_below="#+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="#color/blue"
app:srb_fillColor="#color/blue"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/display_pic"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<TextView
android:id="#+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Requested time"
android:textStyle="italic"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/tutor_rating"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="#+id/linearLayout"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875" />
</android.support.constraint.ConstraintLayout>
Change the android:layout_width="wrap_content" property of the LinearLayout to android:layout_width="0dp".
This will work because setting the layout_width to 0dp means that the width for the LinearLayout will be computed based on the constraints placed on it. Whereas if the width is set to wrap_content the width will be computed based on the size of it's child views.
Related
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 2 imageviews in a linear layout inside a constraint layout. There should be no gap between them, but when I run it, on some large devices it shows the gap even though I didnt give any margin or padding between them. The imageviews are with ids onboarding_image and image_line. I linear layout must be between the two guidelines showing images one upon the other without any space should take up whatever the space is left between the guideline in all devices.
<?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:id="#+id/swipe_layer"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/blue1"
>
<ImageView
android:id="#+id/app_tour_group"
android:layout_width="70dp"
android:layout_height="9dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/group_1" />
<RelativeLayout
android:id="#+id/next_layout"
android:layout_width="277dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/app_tour_group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline1">
<View
android:id="#+id/app_tour_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:background="#drawable/rectangle_2" />
<TextView
android:id="#+id/next_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:gravity="center"
android:text="NEXT"
android:textColor="#ffffff"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="#+id/onboarding_title"
android:layout_width="375dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="TextView"
android:textColor="#ffffff"
android:textSize="29sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/onboarding_description"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="TextView"
android:textColor="#50287d"
android:textSize="17sp"
android:layout_marginBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/onboarding_title"
app:layout_constraintBottom_toTopOf="#id/guideline2"/>
<LinearLayout
android:layout_width="315dp"
android:layout_height="0dp"
android:id="#+id/image_layout"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/guideline1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintVertical_weight="1"
android:weightSum="417"
>
<ImageView
android:id="#+id/onboarding_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginBottom="-8dip"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:layout_weight="414"
/>
<ImageView
android:id="#+id/image_line"
android:layout_width="wrap_content"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginTop="-8dip"
app:srcCompat="#drawable/line"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
</LinearLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.88"
app:layout_constraintBottom_toTopOf="#+id/next_layout"
app:layout_constraintTop_toBottomOf="#+id/image_layout"/>
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.245"
app:layout_constraintBottom_toTopOf="#+id/image_layout"
app:layout_constraintTop_toBottomOf="#+id/onboarding_description"
/>
</android.support.constraint.ConstraintLayout>
You say: I didn't give any margin or padding between them.
However, I can see android:layout_marginBottom="-8dip". I know you are setting also android:layout_marginTop="-8dip" to the other image. It's a little weird.
If you want to make your Images fill all the contents, use:
android:scaleType="fitxy"
or
android:scaleType="centerCrop"
in both images
This is how the design looked in Preview tab
But when I run it on emulator or real device, valid until date not appearing.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
card_view:cardCornerRadius="#dimen/sell_item_radius">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/validUntil"
android:textColor="#color/colorPrimaryDark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/date"
android:text="date"
android:textColor="#color/colorPrimaryDark" />
</RelativeLayout>
<ImageView
android:id="#+id/itemImage"
android:layout_width="match_parent"
android:layout_height="#dimen/sell_item_image_height"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/ic_camera" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/itemImage"
android:layout_alignParentRight="true"
android:src="#drawable/ic_favourite" />
<TextView
android:id="#+id/imageCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:text="#string/imageCount"
android:textColor="#color/blue" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/itemImage"
android:layout_marginTop="-3dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingTop="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/title"
android:textColor="#color/blue"
android:textSize="#dimen/sell_item_title" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginRight="10dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/price" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Thanks
The reason that you don't see some of your views is that all of your views width and height are wrap_content - so you created a layout that your views can expand according to the content of them (if you will add 200 dp on 600 dp image and set width and height to wrap_content this will be your view size) and you can see that even on your preview - your views are overlapping one another.
So you can either use fixed size on your views, but by doing so you are entering the danger zone - your layout won't be responsive to all screen sizes, that's because different phones got different screen size and what may look good on one phone won't look good on another phone.
Sure, you can fix this by creating a single layout for every screen size but that's a lot of work.
You can also define your relative layout with android:weightSum and layout_weight
But there is an even better option:
You can use ConstraintLayout to achieve a single layout that is responsive to all screen sizes, all of its view hierarchy is flat (no nested view groups) and is it really simple to use.
Here is an example for a layout that looks just like you want 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/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView13"
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/textView10"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="heart"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView8" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/textView14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8"
tools:src="#tools:sample/avatars[11]" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is how it looks in portrait :
And landscape:
Finally I solved it ! I just move the imageView with id itemImage, place it after first RelativeLayout.
I have a simple layout.
<?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="wrap_content"
android:background="#color/colorDarkGray">
<RelativeLayout
android:id="#+id/container3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:alpha="0.7"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Another text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Some text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
In design view, it looks so
As you can see there is no left and right margins. Top and bottom margins work well. If I remove left or right margin my relative layout moves beyond the screen a bit.
Guess I can do it without a relative layout at all, BUT I'm interested why that happened.
You should avoid using nested views inside ConstraintLayout. The reasons are:
ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups) as it's stated in Build a Responsive UI with ConstraintLayout
Traditional nested layout hierarchy negatively impacts on performance as it's stated in Understanding the performance benefits of ConstraintLayout
The result layout source should look like:
<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="wrap_content"
android:background="#color/colorDarkGray">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:alpha="0.7"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Another text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal"
android:id="#+id/textView"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="end"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Some text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal"
android:id="#+id/textView2"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/textView"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
You can learn how to build layouts with ConstraintLayouts by following steps in Google's Codelab.
Try this change your RelativeLayout width to android:layout_width="0dp"
<?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="wrap_content"
android:background="#color/colorDarkGray">
<RelativeLayout
android:id="#+id/container3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:alpha="0.7"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Another text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:fontFamily="sans-serif"
android:letterSpacing="0.03"
android:text="Some text"
android:textColor="#color/colorWhite"
android:textSize="11sp"
android:textStyle="normal" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Yes, of course there're no left and right margins in your layout when you're defining your RelativeLayout as below:
<RelativeLayout
android:id="#+id/container3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
That means RelativeLayout has wrap_content width and height and it's in the center of Parent (with our constraintTop,Bot....).
How to solve it? Just set the width of your relative layout to 0dp. According to constraints, that means your RelativeLayout will be as wide as parent.
I'm completely new to Android development, and so I'm still a little confused as to which layouts to use in certain situations.
I need to recreate this:
Where you have 2 lines of text (one above, one below) aligned next to an image. This is all within a card.
Bold Text and Text should be centered with each other vertically. Subtext should be 10dp below the first line. The space between the lines of text and the image is 16dp.
First I used only a RelativeLayout with an ImageView and 3 TextView in it, but that felt wrong and unorganized.
So then I tried this:
http://i.imgur.com/eph6Em8.png
But I'm still not sure if this is the most correct way to do this.
What should I change?
Try this:
Set your "Parent Layout" as "RelativeLayout".
Inside this relative layout, take an ImageView and set "alignParentLeft" property to true and also "centreInparent" to true.
Now, inside this RelativeLayout, take a LinearLayout with orientation set to Veritical and "toRightOf=#id/ImageView". Inside this LinearLayout, take RelativeLayout (RelativeLayout2) as first child and inside it Take two "TextViews".
One with "alignParentLeft=true" and "width = matchparent". While the second one "alignParenRight=true" and "width = wrap_content". Now, what you need to is, in the first "TextView" set "toLeftOf=#id/secondTextView".
Now about the last "TextView". Just create a "TextView" inside the LinearLayout (that you created above with vertical orientation) and place it as second child.
This will create a perfect layout. It is also an easy way to create one.
You can use Constraint Layout to achieve your desired UI. Below is the xml code to implement your UI.
<?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">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:src="#drawable/def_doc"
android:id="#+id/rvMsg_img"
android:maxHeight="80dp"
android:maxWidth="80dp"
android:minHeight="80dp"
android:minWidth="80dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/viewLine" />
<TextView
android:text="Kevin De Bruyne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_name"
android:textColor="#color/textBlack"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.0"
android:textSize="16sp"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time" />
<TextView
android:text="Hello developer. please check this message for long length. max length to 50 characters."
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_last"
android:maxLines="2"
android:ellipsize="end"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/rvMsg_name"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
<TextView
android:text="09:50 AM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_time"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="1.0" />
<View
android:id="#+id/viewLine"
android:layout_height="2dp"
android:layout_width="0dp"
android:background="#EAEAEA"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it will help you.
Try this layout structure
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="centar"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BOLD TEXT"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sub Text" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Text" />
tru this code to achive gole.