I have views as follows :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/global_legal_gap"
android:clipToPadding="true"
android:clipChildren="true"
android:baselineAligned="false"
android:background="#drawable/post_sound_bg"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="#dimen/post_sound_card_height"
android:layout_height="#dimen/post_sound_card_height">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/album_art"
android:layout_width="#dimen/post_sound_card_height"
android:layout_height="#dimen/post_sound_card_height"
fresco:backgroundImage="#drawable/music_placeholder" />
<RelativeLayout
android:id="#+id/play_icon_control"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:visibility="gone">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_margin="3dp" />
</RelativeLayout>
</RelativeLayout>
<LinearLayout>
As shown in the parent RelativeLayout, I'm using android:clipToPadding="true" and
android:clipChildren="true", yet the children of this parent view are still protruding outside it.
Or I'm I doing this right? How do I achieve something like CSS's overflow:hidden?
Consider changing layouts. What you want can be done with ConstraintLayout.
Just set the the dimensions of the layout and don't set the constraint on the part you want to overflow/hide.
The following code shows a View that adjusts it dimensions to its constraint and another that overflows.
Create a new android project and paste this as activity_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"
tools:context=".MainActivity"
android:layout_margin="55dp">
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/sym_def_app_icon"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="84dp"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="300dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
app:srcCompat="#mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>
Your parent view has
android:layout_width="match_parent"
android:layout_height="wrap_content"
which means that the view takes all available width and up to all available height if child views are large enough. With this setup you can't seethe overflow:hidden behaviour because the parent will resize itself to contain children up to the whole screen size.
Actually, default view behaviour in android is similar to overflow:hidden.
What you need to do to see it is set fixed dimentions on the parent.
Just try to use something like:
<LinearLayout
android:layout_width="20dp"
android:layout_height="20dp"
and you'll get the idea.
On a different note, you don't need to have a LinearLayout just to host a RelayiveLayout - use the RelativeLayout directly. Also, using android:orientation="horizontal" makes it behave similarly to flexbox direction row, not sure if that's something you want here.
In native Android, overflow: hidden is android:clipToOutline="true".
Related
Here is the code I am using at the layout file. I am using Material components as theme style. Here I used both material component button and button, but I think they are both converted to material button due to my theming style:
<?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">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="238dp"
android:layout_height="wrap_content"
android:layout_marginStart="86dp"
android:layout_marginTop="35dp"
android:layout_marginEnd="87dp"
android:layout_marginBottom="318dp"
android:text="#string/create_account"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/signInBtn" />
<Button
android:id="#+id/signInBtn"
android:layout_width="237dp"
android:layout_height="wrap_content"
android:layout_marginStart="89dp"
android:layout_marginTop="282dp"
android:layout_marginEnd="85dp"
android:layout_marginBottom="14dp"
android:text="#string/common_signin_button_text"
app:layout_constraintBottom_toTopOf="#+id/createAccountBtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The emmulator model and the model for which you designed the app might be different !
Please check that and revert back .
Apparently I need to use match_parent and wrap_content properties for layout_width and layout_height. One can see this documentation for its use with ConstraintLayout here: https://developer.android.com/training/multiscreen/screensizes
But I would suggest using LinearLayout as ConstraintLayout in my case behaved still badly because I had to define margin properties in exact dps which may not align with a certain screen size. I am adding the LinearLayout solution below which worked as I expected in portrait and landscape mode as well:
<?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"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/createAccountBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/create_account" />
<Button
android:id="#+id/signInBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/common_signin_button_text"/>
</LinearLayout>
I'm trying to create an android application but I'm a beginner, especially with the XML. I don't know why, if I put Relative layout and move the widgets they remain anchored at the top left. does anyone know why?
ps I would like to work on the window design not on the code. Anyway I leave you the code in case there is something wrong
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".Tentativo">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</RelativeLayout>
You are facing this problem because you are using the wrong attributes. The attributes you are using are meant for Constraint Layout and not Relative layout.
For Example: in case of TextView instead of using app:layout_constraintRight_toRightOf="parent" try using android:layout_alignParentRight="true"
Also, I would like to recommend you to use Constraint Layout instead of Relative as is much better and easier to use. example: To center a view in a RelativeLayout you would write centerInParent=true. Constraint Layout instead allows centering in-between views and the parent.
relative layout works great with nested sibling Containers, just add a container, and add the Widgets inside the container, my favorite one to use when Relative Layout is the parent is the Linear Layout, it makes the UI much cleaner and uses weights which is great for supporting different screen ratios. Here is a sample Example for your case (also you can remove all the constraints in the widget since their parent is no longer the relative layout) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="2"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:layout_weight="1"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</LinearLayout>
</RelativeLayout>
How can i group views in a constraint layout without nesting viewgroups?
<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:orientation="vertical"
android:background="#color/color1">
<ImageView
android:id="#+id/mAlbumArtLarge"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/image1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<android.support.constraint.ConstraintLayout
android:id="#+id/mBottomSheet"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#20000000"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/mAlbumIvBottom"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
This is what i'm doing now to create a container mBottomSheet where i can group views and set a background, but i'm using another viewgroup constraintlayout for this which is not recommended because the point of constraintlayout is too have a flat view hierarchy.
So how can i achieve the same thing, but without using another viewgroup as a container?
EDIT
example:
You can use Gudeliens to achieve something similar.
For example, you can take some view (let's call it x) and place on your layout and just put all your wanted views above x.
As for the Gudeliens, with them, you can place your x in any way that you would want to use using app:layout_constraintGuide_percent attribute.
Take this layout for example:
<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="#color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="#+id/mAlbumIvBottom"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/ic_launcher_background"
android:scaleType="fitXY"
android:elevation="6dp"
android:layout_margin="6dp"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="I am view x"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".15" />
<android.support.constraint.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".3" />
</android.support.constraint.ConstraintLayout>
This layout will look like this without any nesting views: (I am adding preview image to you could better understand guidelines)
The layout above is an example of how you could achieve this without using nested view groups.
This solution will work for you but I also agree with user1506104.
It's ok to have a very small level of nesting, if you don't overdo it your layout performance could stay the same
You can either go with my solution or have some nesting views (again, don't overdo it)
I prefer to use my solution so I can avoid nesting.
Just remember that my solution may be a bit longer than just having some lever of nesting when creating your layout.
You can try:
androidx.constraintlayout.widget.Group
or
You can group your Views together by assigning Constraints with respect to each others position but you won't be able to apply a background on all of the widgets as they are still the child of the parent ViewGroup. There are many other options to avoid using nested ConstraintLayout.
You can use another ViewGroup like LinearLayout or RelativeLayout inside ConstraintLayout.
You can create a seperate layout for BottomSheet and include it, for clean code
I want to separate the 4 icon with equal space like pic1.
And the XML code for pic1 is:
However, at the first time, I set the Blank View height as wrap_content, then the result showed like this:
.
The code for pic2 is:
.
The only difference is highlight by red rectangle.
In the case of this layout, you will get more from a ConstraintLayout.
Specifically, setting your icons within a ConstraintLayout would look like this to get the balanced look you're going for:
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/image_2"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
<ImageView
android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_1"
app:layout_constraintEnd_toStartOf="#id/image_3"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_2"
app:layout_constraintEnd_toStartOf="#id/image_4"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The takeaways from this snippet that get your look are:
horizontal Orientation for the ConstraintLayout
Constraints for each ImageView that attach them to the one before and after
First view is constraint to the parent, specially, as is the last view
app:layout_constraintHorizontal_chainStyle="spread_inside", says to spread them out evenly within the available space.
If you don't want them touching the sides, add padding to the left/right of the parent ConstraintLayout.
Use this code in place of that linearlayout containing all the icons:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your first icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your second icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your third icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your fourth icon code here-->
</LinearLayout>
</LinearLayout>
I have implemented persistent bottom sheet with FAB anchored to the top of it.
When I try to do the same with modal bottom sheet (extends BottomSheetDialogFragment) it says
java.lang.IllegalStateException: Could not find CoordinatorLayout descendant view to anchor view android.support.design.widget.FloatingActionButton
Is it possible to do the same layout with modal bottom sheet or maybe make a shadow and unclickable area above persistent one?
I was trying to do the same "FAB on top" thing in ModalBottomSheet, but there's no direct method/way to do that.
For such cases, we therefore use FrameLayout. Inside the definition, it says that -
Child views are drawn in a stack, with the most recently added child on top.
So we can create a layout for the ModalBottomSheet (extends BottomSheetDialogFragment), which would look something like this in your case -
<FrameLayout
android:id="#+id/parent_frame_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".ModalBottomSheetFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:orientation="vertical">
<!-- Whatever layout you want to give here. This is going to be the body
of the ModalBottomSheet. Also you might not wanna use the current Linear
Layout too.-->
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/icon_sheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_gravity="center|top"
android:src="#drawable/ic_music"
android:elevation="20dp"/>
</FrameLayout>
Notice that -
FAB is made after LinearLayout (body for the BottomSheet), as it would be stacked over the LinearLayout.
We gave a marginTop=25dp for LinearLayout but we gave marginTop=0dp for the FAB. This is how you create the half-out, half-in effect. And also gave elevation on FAB for better float look.
Finally we can inflate it's view inside the onCreateDialog overridden method and perform all necessary actions thereafter.
Hope I was able to answer your question. Do comment for any further doubts/updates.
Adding to #Krishn Agarwal answer we need to make sure the bottom sheet dialog has a transparent theme then only the same look and feel will be achieved. We can even have a Constraint Layout instead of a Linear Layout. We can use BottomSheetDialog/BottomSheetDialogFragment
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parent_frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_success_dialog"
style="#style/AppModalStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/margin_60"
android:paddingStart="#dimen/dimen_25"
android:paddingEnd="#dimen/dimen_25"
android:paddingBottom="#dimen/dimen_25">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_title_text"
style="#style/style_bottomsheet_header_22sp"
android:gravity="center"
android:layout_marginTop="80dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#string/mf_mandate_creationsuccessful" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_description"
style="#style/open_sans_semi_bold_15sp_gray"
android:layout_marginTop="#dimen/dimen_7"
android:layout_marginBottom="#dimen/margin_25"
app:layout_constraintBottom_toTopOf="#+id/go_to_dashboard_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_title_text"
tools:text="Description" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/go_to_dashboard_btn"
style="#style/mf_style_blue_button"
android:layout_width="0dp"
android:elevation="#dimen/margin_5"
android:text="#string/mf_go_to_dashboard"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_description"
tools:targetApi="lollipop" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_tick_icon"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_gravity="center|top"
android:layout_marginTop="0dp"
android:importantForAccessibility="no"
android:visibility="visible"
app:backgroundTint="#color/very_light_green"
app:elevation="#dimen/margin_20"
app:fabCustomSize="128dp"
app:maxImageSize="128dp"
app:srcCompat="#drawable/ic_success_tick"
app:tint="#null" />
</FrameLayout>