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.
Related
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.
I created a ViewPager and put it inside of ConstraintLayout:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green">
<ViewPager
android:id="#+id/teaser_view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:background="#color/blue"
android:currentPage="#={viewModel.currentItem}"
bind:adapter="#{viewModel.adapter}"
bind:withAnimation="#{viewModel.changeWithAnimation}"
bind:layout_constraintStart_toStartOf="parent"
bind:layout_constraintTop_toTopOf="parent"
bind:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
and the layout of item inside of ViewPager is:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:background="#color/black"
bind:imageUrl="#{viewModel.imagePath}"
bind:layout_constraintDimensionRatio="3:1"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
as you see, every view or it's parent has different background. And if I run the app, I see:
the background is red, it means, the ConstraintLayout in ViewPager item is stretched to the whole height of screen despite wrap_content.
Anybody knows, how to shrink the item to the size of the image inside?
P.S.: I use ConstraintLayout here, because I need to keep the image size in aspect ratio "3:1"
Set all constraints to parent
then use 0dp in height or width instead of `wrap_content'
Background
I'm developing a custom notification layout by injecting an OS-generated notification view into my own layout. My layout must be as short as possible, which is 50dp in Android 10.
Problem
The view that I'm injecting into my view has margins that cause it to stretch my layout from 50dp to 66dp.
Code
The following layout is a simplification of what's going on to demonstrate the problem:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="#+id/activity_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/full_height_view"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_bright"
/>
<TextView
android:id="#+id/bad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="46dp"
android:layout_marginBottom="20dp"
android:background="#android:color/holo_red_light"
>
</TextView>
</LinearLayout>
</FrameLayout>
Note that container has minHeight of 50dp, which I don't want to be exceeded. The problem is the margins from bad_view sum up to 66dp and stretch the parent to 66dp.
Question
How can I prevent the margins on bad_view from stretching the parent beyond its minimum height? I cannot set a fixed height on the parent because the exact height is OS-dependent. And I cannot modify bad_view because it's generated by the OS.
I ended up solving this by setting the visibility of bad_view to gone.
I found another solution: use GridLayout vertical weights to override the problematic view's height. This gave me the flexibility of a weighted horizontal LinearLayout but with the addition of vertical weights.
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>
I have this LinearLayout that is going to be placed on the bottom of an activity layout. I want this LinearLayout to have a 4dp elevation, just like the top toolbar should have, however, since android:elevation places the shadow below the ui component and this specific component (linearLayout) is going to be on the bottom of the screen, I won't see any elevation at all..
This is my LinearLayout code, and an image of it with the default elevation implemented:
<?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="wrap_content"
android:weightSum="3"
android:background="#android:color/transparent"
android:orientation="horizontal"
android:elevation="4dp"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/playButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_play"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/stopButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_stop"
style="?android:attr/borderlessButtonStyle" />
<ImageButton
android:id="#+id/bookmarkButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:clickable="true"
android:background="#drawable/bottom_toolbar_menu_selector"
android:src="#drawable/ic_bookmark"
style="?android:attr/borderlessButtonStyle" />
</LinearLayout>
Is there a way, using elevation to place a shadow on top of the ui component?
Thanks in advance!
You can't theoretically do it with android:elevation, in the sense that you can't choose the direction where the shadow is going to be cast.
There are two solutions.
1. Drawables
You could, for instance, put an ImageView right above your layout and set android:src="#drawable/shadow". This should be a vertical GradientDrawable defined in XML, as explained here.
2. Workaround
While most of the shadow is actually below the view, a subtle shadow is also above. A workaround might be using a very high value for elevation, like 40dp: the bottom part is going to be hidden due to your layout, while the top is going to be expanded and look like a common shadow.
In either case, you do not have control over the elevation value in dp, in the sense that you can't be sure your shadow is equivalent to the one cast by android:elevation=4dp.
use like as;
<LinearLayout
android:layout_width="match_parent"
android:layout_height="205dp"
android:background="#color/white"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="-5dp"
android:background="#color/white"
android:elevation="3dp"
android:paddingTop="5dp">
// CHILD VIEWS
</RelativeLayout>
</LinearLayout>
Add this code above of view in which you want top elevation or add android:layout_marginTop="-4dp" and add below of above view
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0.01dp"
android:layout_below="#+id/scrollbar"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="#dimen/dp_4" />
Try this i am unable to set background through xml then i tried the programmatic way to solve that and i work perfectly refer this if facing problem on show shadow in Linear Layout
lprofile.setBackgroundResource(R.drawable.background_with_shadow);
lprofile is my ref of Linear layout and background_with_shadow is xml for applying shadow i hope i will for ur requirmement...thank u..