despite addressing other similar questions I don't quite understand why these buttons won't appear in my layout screen, could someone please explain why?
The textview shows up fine
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lab1.ac01220.com1032_lab.MainActivityFragment"
tools:showIn="#layout/activity_main"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_string"/>
</LinearLayout>
</LinearLayout>
Your TextView is taking up all of the space do to the height and width being match_parent. And since LinearLayouts are laid out in sequential order there's no space for anything that comes after it.
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Change that to wrap_content, use layout_weight, or a specific dimension (whatever suits your needs).
This is a simple fix. Turn the device "horizontal" and you can see the button.
you can still set the TextView to match_parent. But remember to set a margin and layout weight.
Take a look at my snippet below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
android:layout_margin="10dp"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:layout_gravity="center"
android:text="Hello World!"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:text="Submit"/>
</LinearLayout>
Related
I have two linear layout inside constrainLayout,
The bottom linear layout includes buttons and its height is wrap_content and must be wrap, because sometimes I keep only 1 button and sometimes 2 buttons.
I would like to set height of the top linearLayout to max but without covering the 2nd layout.
So I decided to set match_parent to the first, but after that it covers the 2nd layout.
I can't use weight/weightsum
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"
android:visibility="gone" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="11"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="9"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:padding="16dp"
android:weightSum="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"
" />
</LinearLayout>
try this added weight sum and weight to make layout in prportion
Since you are using ConstraintLayout, you can set the height of the first LinearLayout to 0dp. The ConstraintLayout interprets it as "match constraints".
The next step would be to properly define the constraints of the first LinearLayout (which you did).
You can read more about ConstraintLayout here.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"
android:visibility="gone" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
To do this you have to use a combination of linearlayout as parent and attribute layoutWeight ,If you use a constant value for layoutWeight for both top layout and button's container , then this will lead to some problem on different screen height devices , instead this solution make you able to set your buttons height as big as enough by setting its container's height to wrapContent and give all top area for the layout content .
You can also make the top linearLayout scrollable to get the best experience possible :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/this_layout_will_fil_all_space_except_the_bottom_layout_space"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#000000"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:id="#+id/button_layout_at_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="10dp">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:layout_marginEnd="50dp"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
For Buttons , you can set its width to wrapContent and add gravity attribute to its parent as above , in this way even if one buttons was gone , the other will fit perfectly in the center of the container .
Enjoy !
The main advantage of using ConstraintLayout is to avoid using any other nested ViewGroups, The more you add more hierarchy in layout, the less performance you'll have. You can check documentation for more.
So for performance wise it's better to add widgets/views directly within the ConstraintLayout.
So, here I removed the bottom LinearLayout, and kept only the buttons directly within the ConstraintLayout, you can do the same for the top LinearLayout, you can just add any underlying views directly to the ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Button1"
app:layout_constraintBottom_toTopOf="#id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:text="Button2"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have two views (com.github.mikephil.charting.charts.BarChart and LinearLayout), the content inside one view is approx 600 dp high, the other once has 500 dp. Width of both views is fill_parent.
I would like to position them both into the center of the screen (so they overlaps).
Unfortunately, Android's layout alignment is very unintuitive and hit or miss for me and I'm not able to achieve that.
Can you please help?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#11FFFFFF">
<com.github.mikephil.charting.charts.BarChart
android:id="#+id/chart"
android:layout_width="match_parent"
android:layout_height="500dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="150dp"
android:includeFontPadding="false"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="HITS"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="150dp"
android:includeFontPadding="false"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="MISSED"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I want to position both Views inside this RelativeLayout in the center of the screen, overlapping
Put in the 2 views you wanna to place in center inside a RelativeLayout, then add android:layout_centerInParent="true" into the 2 views.
For example it look like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.BarChart
....all other stuff
android:layout_centerInParent="true" > //..add this
<LinearLayout
..... all other stuff
android:layout_centerInParent="true" > //..add this
</LinearLayout>
</RelativeLayout>
Define your main layout as ConstraintLayout and then constraint all sides of both elements to their parent.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="600dp"
android:layout_height="600dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<com.github.mikephil.charting.charts.BarChart
android:layout_width="500dp"
android:layout_height="500dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.github.mikephil.charting.charts.BarChart>
</android.support.constraint.ConstraintLayout>
With this code your BarChart is above your LinearLayout.
In my experience it's most of the times best practice to use the lightest container possible, which in this case is probably a FrameLayout, so I would use that instead of RelativeLayout and use android:layout_gravity="center" in the subviews like this for example:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.BarChart
android:layout_gravity="center" >
<LinearLayout
android:layout_gravity="center" >
</LinearLayout>
</FrameLayout>
I have seen a different post related to this topic already before posting this question so I can definitely say that this question is not a duplicate. I have a different problem which I couldn't fix or find a solution to it.
Problem: I have created a Vertical Seekbar using new <SeekBar> </SeekBar> view. It does look fine when I see the preview in Android Studio but on the device, the SeekBar doesn't fill the height of the screen. I have rotated the SeekBar view with 90deg and try to set the height:match_parent and width:wrap_content but it isn't working at all as I expected. So I set the height to some hard-coded value and it looked fine. The only problem is, I will have to check the height of the view in which it is getting populated and set the height of the SeekBar problematically, which I want to avoid.
slider.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/roundcorner"
android:backgroundTint="#color/design_default_color_primary"
android:gravity="center"
android:layout_gravity="center"
android:elevation="5dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textColor="#fff"
android:text="#string/RangeValue"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
<FrameLayout
android:layout_weight="1"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:id="#+id/seeker"
android:layout_width="wrap_content" <!-- Set this to 400dp and it looks fine -->
android:layout_height="match_parent"
android:rotation="270"
android:layout_gravity="center"/>
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_round_done_24px"
android:layout_gravity="center"
android:padding="16dp" />
</LinearLayout>
Update
Thank you Reaz for your answer
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/maingrid"
android:background="#color/colorAccent"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:id="#+id/radarCanvas"
android:layout_width="300dp"
android:layout_height="300dp"
android:orientation="vertical">
</LinearLayout>
<include
android:layout_alignParentBottom="true"
layout="#layout/biosignals"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!--- this is where i am including slider layout -->
<include
android:layout_alignParentRight="true"
layout="#layout/slider"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="24dp" />
</RelativeLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
You are setting weight inside the Framelayout when the orientation is vertical and at the same time the height of FrameLayout is set to match_parent. If you are setting like this there will be no effect of the weight. Try setting the height to 0dp it will work for sure.
<FrameLayout
android:layout_weight="1"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="0dp">
<SeekBar
android:id="#+id/seeker"
android:layout_width="wrap_content" // set this to 400dp and it looks fine
android:layout_height="match_parent"
android:rotation="270"
android:layout_gravity="center"/>
</FrameLayout>
This is my result
You need to get rid of your FrameLayout which is limiting the width of the SeekBar. I tried to implement the layout like the following and I think it should fit in your case as well.
Another important thing you should notice that, because of your rotation, the width and height are interchanged in the view for your SeekBar. Hence I made the layout_width="match_parent". Hope that helps!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="5dp">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:padding="16dp"
android:text="100"
android:textAlignment="center" />
<SeekBar
android:id="#+id/seeker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:rotation="270" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:padding="16dp"
android:src="#android:drawable/star_on" />
</RelativeLayout>
Here is the result that I have got.
<RelativeLayout
android:layout_width="400dp"
android:layout_height="200dp"
android:layout_gravity="center">
<SeekBar
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:maxHeight="4dp"
android:minHeight="4dp"
android:progress="50"
android:progressDrawable="#drawable/custom_seek_bar"
android:rotation="270"
android:thumb="#drawable/seekbar_thumb" />
</RelativeLayout>
Use this code, you will get desired result
I am trying to add PieChart from MPAndroidChart and seekBar under it.
But still no luck, chart is visible, but other content is noT visible, despite it visible when I open design tab during xml configuration.
I already have tried to set a barrier and with groups with weights but still.
Could please anyone give any advice how to properly align chart to be able to see other widgets on view.
Here is my xml example:
<?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/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toTopOf="#+id/seekBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
ANSWER
The first and correct version of answer from Ashish Kudale is: Use LinearLayout with weight:
<LinearLayout
android:id="#+id/chartContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"/>
<android.support.v7.widget.AppCompatSeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Use LinearLayout Insted of ConstraintLayout.
Try this.
<?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/linearLayout3"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text" />
</LinearLayout>
</LinearLayout>
What it does is places all items in the screen and remaining place is occupied by item which has android:layout_weight="1"
I have an issue using a ScrollView inside ConstraintLayout (constraint-layout:1.0.0-beta3)
The content of my ScrollView isn't showed entirely.
Here is my layout:
<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/activity_test"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#212121">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Constraint Layout"
android:textSize="45sp"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/header"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BUTTON"
android:layout_marginTop="800dp"/>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
And here is the result
As you can see the button isn't visible and I reached the bottom of my ScrollView.
It seems to works well with LinearLayout with layout below
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#212121">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Linear Layout"
android:textSize="45sp"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BUTTON"
android:layout_marginTop="800dp"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
And result is
With LinearLayout end of ScrollView is reachable.
Is there a bug with ConstraintLayout or do I made something wrong?
The way I would have done it is:
<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/activity_test"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#212121"
android:text="Constraint Layout"
android:textSize="45sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="BUTTON"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
Which gives:
A few things to keep in mind:
you don't need a linearlayout for the header, you can just use the textview directly.
don't use match_parent, it might seem to work, but is undefined. Use 0dp instead with the correct constraints to stretch the view as you want.
clearly, don't use a 800dp margin. It might look ok on your particular screen, but won't give you what you want on different devices.
scrollview by default will wrap its content -- the fillViewport attribute is here to make it takes the indicated space
you can use nested ConstraintLayout when it makes sense. In the future, we might also take advantage of it to do some performance improvements
I changed the height of the ScrollView to match_parent and added a bottom constraint. This seemed to make it work correctly.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
Note: Having a height of wrap_content on a vertically scrolling view usually doesn't end well, in any layout.