How do I create a card like this in Android Studio - android

I'm trying to create a card like this in Android Studio, but I'm still new to Frontend Development. Do you have any suggestions for Layouts I could use to realize this?
Thank you for any suggestions!

You should use constraint layout with CardView.
I started it for you. You can continue it. There is the simpliest way.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primary">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardBackgroundColor="#7AFFFFFF"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="Expenses"
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#id/rightDecorView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/titleDivider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/durationTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Duration"
android:textColor="#color/white"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="#id/titleDivider"
app:layout_constraintStart_toStartOf="#id/titleDivider"
app:layout_constraintTop_toBottomOf="#id/titleDivider" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/durationView"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_car_placeholder"
app:layout_constraintStart_toStartOf="#id/durationTitle"
app:layout_constraintTop_toBottomOf="#id/durationTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/durationDiff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:src="#drawable/ic_car_placeholder"
android:text="+ 10 min"
android:textColor="#color/white"
app:layout_constraintStart_toEndOf="#id/durationView"
app:layout_constraintTop_toBottomOf="#id/durationTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/durationTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_car_placeholder"
android:text="= 2h 15 km"
android:textColor="#color/white"
app:layout_constraintStart_toStartOf="#id/durationDiff"
app:layout_constraintTop_toBottomOf="#id/durationDiff" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/rightDecorView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="#drawable/ic_car_placeholder"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
To simplify layout, you can separate a repeating view to another custom view. And just reuse it in your code.
Look how to do it here https://blogs.oregonstate.edu/workla/2021/11/04/creating-a-custom-view-in-android/

Related

Create layout using only constraint layout and text view

I am new to android and constraint layout, can you please help me create this layout using only Constraint Layout and Text Views? Don't bother with text/color, just the layout itself.
This is what I have so far, layout seems ok but not quite like in the picture. I don't know if just the different resolution or aspect ratio.
<?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">
<TextView
android:id="#+id/textView45"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/blackk"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView49"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView47"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/teal_200"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView46"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/darker_gray"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView50" />
<TextView
android:id="#+id/textView48"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/Accent"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
</androidx.constraintlayout.widget.ConstraintLayout>
Did some modifications in the margins of these two. Now, the layout is looking similar to the one in the image you showed:
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
You can further increase the margins but that's upto you.
Edit: I would suggest you playing with layout_constraintHeight_percent attribute to solve those height irregularities.

Problem placing TextView on ImageView using ConstraintLayout

I am using Constraintlayout and I want to place my Textview on my Imageview, it is supposed to look like this after I'm done: https://i.stack.imgur.com/mYAws.png but each time I add constraints to the texts(Vertically and horizontally), the texts disorganizes and goes totally from how I want it to be,
Sometimes even shifting my images. I have tried severally to adjust it well to no avail
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="358dp"
android:layout_height="337dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/orange_panel" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginStart="45dp"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/green_panel" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/pink_panel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="89dp"
tools:layout_editor_absoluteY="415dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
The answer is pretty straightforward. First you should delete this lines from both text views.
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp"
Then all you need to do is add constraints like this. Below are constraints for your image
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
And the constraints for your text view would be like this.
app:layout_constraintEnd_toEndOf="#+id/image_view"
app:layout_constraintStart_toStartOf="#+id/image_view"
app:layout_constraintTop_toTopOf="#+id/image_view"
Of course you can add different constraints for the image because i do not know how do you want to position the image view in the app. But if you want a text view to be inside the image like in the link you sent then the constraints for the text view will be always like this.
It's all about tools:layout_editor_absoluteX and tools:layout_editor_absoluteY for yours textView3 and textView4. Also i think you do not know for what namespace tools exist.
Check the example below; it shows you what constraints can be used to get in the direction of your layout goals.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="16dp"
android:background="#00FF00"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#0000FF"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
See how this example looks: screenshot.

Why my layout look like this ? Here is my XML file

Here Is my
and XML code first i use a Linear Layout then card View and other views so why my view overwrite where is the problem please watch the AVD picture and tell me where is the error.Sorry for bad english.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/item_linerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintStart_toEndOf="#+id/item_id"
app:layout_constraintTop_toTopOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Author"
app:layout_constraintStart_toStartOf="#+id/item_title"
app:layout_constraintTop_toBottomOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Try to use android:fitsSystemWindows="true" in your root layout(In your case LinearLayout). I recommend you to read this article to understand system overlapping. I hope it helps)
I have removed redundant LinearLayout parent and made CardView parent. Also your TextView with id item_pages is not overlapping.
<androidx.cardview.widget.CardView
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:layout_margin="5dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/item_AuthorName"
app:layout_constraintStart_toEndOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Author"
app:layout_constraintBottom_toBottomOf="#id/item_id"
app:layout_constraintStart_toStartOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

How to handle the following case for ConstraintLayout, when one of the targets of layout_constraint visibility changed to View.GONE

I want to avoid nested layout, to improve my app performance.
Hence, I tried the following
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="30dp"
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">
<TextView
android:id="#+id/title_text_view"
android:background="#ffd600"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Title\nTitle"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pin_text_view"
android:background="#ff0000"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Pin" />
<TextView
android:id="#+id/body_text_view"
android:background="#304ffe"
android:textColor="#ffffff"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/title_text_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="Body" />
</android.support.constraint.ConstraintLayout>
The output is as follow.
During runtime, I might change the visibility of title_text_view (yellow) to View.GONE.
But, it will looks like the follow. I don't wish pin_text_view (red) to be covered up by body_text_view (blue)
What I wish to have is
One of the way to overcome, is after changing the visibility of title_text_view (yellow) to View.GONE, I need use Java code to manual update app:layout_constraintTop_toBottomOf of body_text_view (blue) - Android : How to programatically set layout_constraintRight_toRightOf "parent"
From
<TextView
android:id="#+id/body_text_view"
...
app:layout_constraintTop_toBottomOf="#+id/title_text_view"
to
<TextView
android:id="#+id/body_text_view"
...
app:layout_constraintTop_toBottomOf="#+id/pin_text_view"
But, this will make my code more difficult to be maintained.
Is there any easier way, without involving Java code, and without nested layout?
You can use a barrier, which is available in ConstraintLayout since version 1.1
So if you are using an older version of ConstraintLayout, change the dependency for ConstraintLayout in your build.gradle to
implementation 'com.android.support.constraint:constraint-layout:1.1.0'
or a later version.
Then add the barrier to your layout like following:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="30dp"
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">
<TextView
android:id="#+id/title_text_view"
android:background="#ffd600"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Title\nTitle"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pin_text_view"
android:background="#ff0000"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Pin" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="title_text_view,pin_text_view" />
<TextView
android:id="#+id/body_text_view"
android:background="#304ffe"
android:textColor="#ffffff"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/barrier"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="Body" />
</android.support.constraint.ConstraintLayout>
For further information see this link
you can get closest to your requirement using below code without adding any extra code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="30dp"
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">
<TextView
android:id="#+id/title_text_view"
android:background="#ffd600"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Title\nTitle"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pin_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#ff0000"
android:text="Pin"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="#+id/body_text_view" />
<TextView
android:id="#+id/body_text_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:background="#304ffe"
android:text="Body"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pin_text_view" />
OR if you want to do some extra xml code you can do something like this using guidelines feature in constraintLayout:
<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:layout_margin="30dp">
<TextView
android:id="#+id/title_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#ffd600"
android:padding="5dp"
android:text="Title\nTitle"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toStartOf="#+id/pin_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<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.09" />
<TextView
android:id="#+id/pin_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#ff0000"
android:text="Pin"
android:textColor="#ffffff"
app:layout_constraintEnd_toEndOf="#+id/body_text_view" />
<TextView
android:id="#+id/body_text_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:background="#304ffe"
android:text="Body"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>

Unable to make a ScrollView that contains other layouts and widgets

I am simply trying to make a scrollable layout with no luck...
I have no idea why it isn't working, it seems to be exactly as I read online.
The problem here is that the bottom of the included layout is cut of to fit exactly the screen size.
this is my layout xml:
<ScrollView 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=""
tools:layout_editor_absoluteY="81dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="opening game"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="14dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/GameTitleET"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/GameTitleET"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="153dp"
android:ems="10"
android:hint="Game's name"
android:inputType="textPersonName"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/GameContentET"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="מהלך המשחק"
android:inputType="textMultiLine"
android:maxLines="8"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/DeleteAndMakeYOurOwnButton" />
<Button
android:id="#+id/DeleteAndMakeYOurOwnButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="Write your own game"
app:layout_constraintStart_toStartOf="#+id/GameContentET"
app:layout_constraintTop_toBottomOf="#+id/numberPicker2" />
<Switch
android:id="#+id/SendToReviewSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:layout_marginStart="16dp"
android:text="הגש משחק להגשה"
app:layout_constraintBottom_toTopOf="#+id/DeleteAndMakeYOurOwnButton"
app:layout_constraintStart_toStartOf="parent" />
<include
android:id="#+id/include5"
layout="#layout/activity_create_post_methods"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/GameContentET" />
</android.support.constraint.ConstraintLayout></ScrollView>
Do you have any suggestion of what should i do? I also plan to add many more layouts to this main layout and I need it to scroll and show everything flawlessly.
Thank you a lot!

Categories

Resources