I have a ConstraintLayout in Android studio, I want this to have the height be 60% of the screen size for whatever device it is running on, I am wondering how I can do this in xml?
Currently I have:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/recycler_view_container"
android:layout_width="match_parent"
android:layout_height="372dp" // BAD!! HARDCODED
android:background="#color/white">
</androidx.constraintlayout.widget.ConstraintLayout>
How could I do this? As you see, the layout_height is hardcoded right now.
Here is my answer. I think it should clear your requirements.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/colorRed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHeight_percent="0.50">
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
You can change height percentage according to your needs. Thanks.
You can't do that directly, however you can put a guideline within your ConstraintLayout fixed at a percentage of the height. Children views can then use that constraint to set their height.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guide"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rcv"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintBottom_toTopOf="#id/guide"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm guessing your ConstraintLayout is meant to contain a RecyclerView?
You're going to want to use an unequal LayoutWeight.
LinearLayout supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. Set the child view layout_height to 0 and assign the screen proportion as desired to each child view.
This is how I would set up the XML for your specifications, notes included in the code.
<?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"> // Note: set orientation to vertical
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp" // Note: Set the layout_height to 0
android:layout_weight="6" // Note: Set weight to 6
android:background="#color/colorAccent"/>
// Framelayout need to fill remain space
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp" // Set the layout_height to 0
android:layout_weight="4"/> // set the weight to 4
</LinearLayout>
The constraint layout has a weight of 6 and FrameLayout has a weight of 4, the LinearLayout has a total weight of 10. 6/10 is 60%, the constraint layout will fill 60% of the screen.
The question has changed after I posted this answer, you can also equal distribution, which is the same as unequal assign the same weight value to each child view, and the screen will be split equally among the child views.
<?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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
ConstraintLayout has a weight of 1 and FrameLayout has a weight of 1, total layout weight is 2. 1/2 is 50%, the ConstraintLayout will take up 50 of the screen.
Related
I have a constraint layout and inside a linear layout that looks like a bar that is constrained to the bottom. Besides I have an item (called SwipeFlingAdapterView) that I would like to take the remaining space, meaning to start from the top, and to go all the way down until the top of the linear layout bar:
<?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=".fragments.SwipeFragment">
<LinearLayout
android:id="#+id/likeDislikeBar"
android:layout_width="match_parent"
android:layout_height="#dimen/like_dislike_height"
android:gravity="bottom"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<ImageButton
android:id="#+id/dislikeButton"
android:layout_width="0dp"
android:layout_height="#dimen/like_dislike_button_height"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/dislike"
android:layout_gravity="center_vertical"
android:scaleType="centerInside"/>
<ImageButton
android:id="#+id/likeButton"
android:layout_width="0dp"
android:layout_height="#dimen/like_dislike_button_height"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/like"
android:layout_gravity="center_vertical"
android:scaleType="centerInside"/>
</LinearLayout>
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/likeDislikeBar"
app:rotation_degrees="15.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The views are constrained correctly, so theoretically if I remove the height="match_parent" from the SwipeFlingAdapterView, it will take the available space. Setting its height to "match_parent" will cause it to overlay the likeDislikeBar.
Is there a simple way to achieve this? Can I do it with a constraint layout?
It is not recommended to use match_parent for any child of the ConstraintLayout as stated in the official docs and tutorial. This applies to both vertical and horizontal dimensions.
In order to make the SwipeFlingAdapterView use all available height between the constraints you need to set its android:layout_height to 0dp (to match constraints).
You need to remove
app:layout_constraintEnd_toEndOf="parent"
Also ConstraintLayout seems like an overkill for such a simple layout.
RelativeLayout is pretty sufficient here. You can set likeDislikeBar to have layout_alignParentBottom and SwipeFlingAdapterView to have layout_alignParentTop and android:layout_above="#id/likeDislikeBar" in this case.
I am in the process of writing my first full Android app, and I want to center a linear layout so that the layout itself is centered, not just the content inside of the layout. I have seen through old posts that android:layout_gravity is used to do this, but as I enter that into my activity's XML, there are no suggestions, and nothing happens when fully entered.
Am I not supposed to use a linear layout to achieve this? Am I supposed to make its size match_parent and just constrain the sizes of all of its children? My idea for the layout was to constrain the size of the linear layout, center it, and have all of its children's horizontal size match_parent.
Here is my activity's XML 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.frc5113.combustiblescouting.MainActivity">
<LinearLayout
android:layout_width="140dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
Your root layout is a ConstraintLayout. I don't think that supports the attribute layout_gravity. You should either use LinearLayout or use constraints relative to your root view as described here.
Try this, it makes your containt horizontal & vertical center simultaneously:
<?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.frc5113.combustiblescouting.MainActivity"
android:orientation="vertical"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
using android:gravity="center" on the LinearLayout will center it's childs not itself.
There would be the android:layout_gravity attribute which is telling the parent how this child wants to be layed out. But this needs to be supported by the Containers' LayoutParams (which is true for e.g. FrameLayout, LinearLayout...)
But Constraintlayout does not support this kind of child gravity.
Here you need to set Constraints on the child (in your case the LinearLayout) in order to place it properly.
Therefore if you want to center the LinearLayout (which would somehow be obsolete as you could center it's childs directly in the ConstraintLayout)
you can achieve this like the following:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="140dp"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!-- content -->
</LinearLayout>
</android.support.constraint.ConstraintLayout>
It had always been a bit of trouble getting one element in the layout to occupy all the remaining available space. Last I remember, match_parent and layout_weight attributes were required. But today I did this, and it works, i. e. the first item is wrapped and the second spans across all the remaining space:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
<TextView
android:id="#+id/view"
android:background="#FF80FF00"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
The question is whether it's guaranteed (by design), or if it's a mere coincidence that it worked the way I want it to in this particular case (i. e. cannot be relied upon).
The guaranteed way to let one View to occupy the remaining space in the LinearLayout is by setting the layout_weight value to 1 while leaving other child views' weight attribute empty.
In the following xml example, the second child View will occupy all the remaining space between the top View and the bottom View.
<?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">
<View
android:layout_width="match_parent"
android:layout_height="50dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<View
android:layout_width="match_parent"
android:layout_height="50dp"
/>
</LinearLayout>
I have 3 views.
1. View A has a fixed height and aligned to the top of the screen.
2. View B has a fixed height and aligned to the bottom of the screen.
3. View C has to fill a vertical space between views A and B but has to be minimum X height. If the vertical space between A and B is less than Xdp, the vertical scroll bar has to appear (and view B has to scroll, not to be sticked to bottom).
What I have so far (a bit simplified), it may be completely wrong:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/layout_banner_top"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="#dimen/statistics_probanner_height">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" <!-- UPD here as McAdam331 suggested -->
android:minHeight="#dimen/statistics_circular_progress_container_height"
android:layout_below="#+id/layout_banner_top"
android:layout_above="#+id/layout_banner_bottom">
<!-- here is some content -->
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_bottom_bar_height"
android:id="#+id/layout_banner_bottom"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
</ScrollView>
How it looks:
Picture 1
Picture 2
Currently minHeight of the view in between (view C) is set to 600dp, but as you see on Picture 2 view C is filling an available space between top and bottom views, height is too small and scroll not appearing.
Is it possible to implement? How can I achieve that behaviour?
The issue is that you've set both height and minheight to the same value:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_circular_progress_container_height"
android:minHeight="#dimen/statistics_circular_progress_container_height"
android:layout_below="#+id/layout_banner_top"
android:layout_above="#+id/layout_banner_bottom">
In other words, the view won't exceed the hight you've given it already. What I would do is set the layout_height to wrap_content, and keep the min_height attribute as it is.
this way, if the space is larger than the dimension given, it wil just bind above and below the banners. Otherwise, it will hold that minimum value.
Resolved.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_probanner_height"
android:gravity="top">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:minHeight="#dimen/statistics_circular_progress_container_height">
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_bottom_bar_height"
android:layout_gravity="bottom">
</LinearLayout>
</LinearLayout>
</ScrollView>
In my app, I have 2 linear layouts: one at the top, one at the bottom.
I'd like that whatever is inside these layout, the layout of the top occupies 60% of the height of the screen and the layout of the bottom 40%.
Here is my XML code:
<?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"
android:layout_weight="1.0" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical"
android:id="#+id/layout_top">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.4"
android:id="#+id/layout_bottom">
</LinearLayout>
</LinearLayout>
When these layouts are empty, no problem, they have the good proportion.
The problem is that if I put a small listview in the top layout for e.g. then the layout will take the size of the listview and won't preserve the 60/40% proportion.
I'd like that even if my listview is small (only 3 item for eg), the layout preserve it's 60% and so put some empty space under my listview.
I've tried to change android:layout_height to match_parent but it doesn't change anything.
Try using this Layout it works for me
<?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"
android:layout_weight="1.0" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="6"
android:orientation="vertical"
android:id="#+id/layout_top"
android:background="#FF0000">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="vertical"
android:layout_weight="4"
android:id="#+id/layout_bottom"
android:background="#FF00FF">
</LinearLayout>
</LinearLayout>
The trick is to set up a layout_height="0dip" instead of wrap_content in portrait mode and layout_with="0dip" instead of wrap_content in Landscape mode you can use layout-land folder for that.
layout_weight specify extra space in the layoutfot the view. you should try measuring your screen first like:
Display display = ((WindowManager)
getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getHeight();
and then doing some calculation like width*0.6 and 0.4 , this way your layout will always have 60 40 ratio.
Hope This Helps
try layout_height = 0dp in both the children LinearLayouts. Its happening because you have wrap_content which is probably overriding the layout_weight effect.
Simply in your parent layout, replace android:layout_weight="1.0" with android:weightSum="1.0"
This works by setting the weight sum of the parent layout and the weights of the children layouts. The weight of the children should be equal to the weight sum of the parent. Take a look at this http://blog.stylingandroid.com/archives/312