I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/create_workout_fab_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#drawable/fab"
android:stateListAnimator="#anim/fab_elevation"
android:clickable="true"
>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/create_workout_fab_anim_helper"
android:layout_width="#dimen/fab_size"
android:layout_height="#dimen/fab_size"
card_view:cardBackgroundColor="#color/primary_dark"
card_view:cardCornerRadius="#dimen/fab_radius"
android:visibility="invisible"
/>
<TextView
android:id="#+id/create_workout_fab_label"
android:layout_width="#dimen/fab_size"
android:layout_height="#dimen/fab_size"
android:background="#drawable/fab_ripple_selector"
android:textAppearance="?android:textAppearanceLarge"
android:text="+"
android:textColor="#color/fab_label_color"
android:duplicateParentState="true"
android:gravity="center"
tools:text="+"
tools:textColor="#color/fab_label_color"
/>
</FrameLayout>
The CardView is only there to use it for an smooth animation from a cirle button to a rectangle view by animation a radius change.
But the problem is, wheneever the CardView becomes visible it stays above the TextView. Why is that and how do I get it to lay under the TextView
FrameLayout draws children in order, first to last. Therefore you need to swap the CardView with the TextView.
UPDATE:
Also if you are running on android L+ you need to set a higher elevation on the CardView than the TextView
Related
discover.xml :
<?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="wrap_content"
android:orientation="vertical"
app:behavior_peekHeight="#dimen/peek_height">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/discover_displays"
android:layout_width="match_parent"
android:layout_height="#dimen/peek_height"
android:background="#drawable/round_corners"
android:orientation="vertical">
<TextView
android:id="#+id/to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="#dimen/pad_17"
android:paddingBottom="#dimen/pad_16"
android:text="#string/to"
android:textAlignment="center"
android:textColor="#color/light_gray"
android:textSize="#dimen/pad_12"
android:visibility="gone"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/disp"
android:layout_width="match_parent"
android:layout_height="#dimen/disp_height"
tools:listitem="#layout/disp_item" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/small"
android:layout_width="#dimen/progress_bar"
android:layout_height="#dimen/progress_bar"
android:layout_gravity="center"
android:layout_marginTop="#dimen/text_width"
android:indeterminate="true"
android:progressBackgroundTint="#color/progressbar_background"
android:progressTint="#color/progressbar_color" />
<TextView
android:id="#+id/discovery_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/pad_26"
android:gravity="center"
android:paddingStart="#dimen/element_margin"
android:paddingEnd="#dimen/element_margin"
android:text="#string/discovery_message"
android:textColor="#color/text_color"
android:textSize="#dimen/text_size"
android:visibility="visible" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/error_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/pad_12"
android:background="#color/discovery_error_item"
android:padding="#dimen/discovery_error"
android:textColor="#color/white"
tools:text="#string/bluetooth_label" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
Current Layout :
Expected layout : The Recyclerview in the above pick should have a height as below, while the 3 views progressbar, discover state message, error action should be aligned in the middle as in order (one below the other). How to accomplish the same ?
The view with id : "to" is optional, since its being used in two fragments, 1 fragment uses it and other dont, hence the visibility is hidden and made visible whenever required. I am using the coordinator layout, since a bottomsheet view is being used.
The recyclerview height needs to be adjusted, keeping the progress bar, discovery state message, error actions being aligned to center when its visible one after the other (either recyclerview is visible at a time, or the 2 views are visible at a time (progress bar, discover error state or the button) or only the error button is visible at a time aligned to the center) . Please help in aligning the view items to the center when the visibility of one view is not present. currently the view aligns to the top if there is no visibility. Thanks.
I believe you can nest ConstraintLayout within the CoordinatorLayout and implement your screen in the Constraint Layout by adding the constraints you wish.
Should be easy enough.
You have to use a combine of linear layout and relative layout with the relative as parent , and recycler and the linear as childs of it , its look like this :
<RelativeLayout>
<RecyclerView android:layout_width="match_parent" android:layout_height="match_parent"\><LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android: orientation="vertical" ... android:gravity="center"></LinearLayout>
</RelativeLayout>
I created the ListView item as Constraint Layout. It has one ImageView which is constrained to the parent(top and start) and one LinearLayout which is constrained to this ImageView(top to top, start to end, bottom to bottom). In the Java part, I do some logic that in some cases ImageView is GONE and other cases it will be Visible. There isn't any problem with this part. The layout is like that:
And code like that:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="#dimen/activity_horizontal_margin"
android:paddingVertical="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/image"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="#string/list_image_cd"
android:src="#drawable/app_logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/texts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:orientation="vertical"
app:layout_constraintStart_toEndOf="#id/image"
app:layout_constraintTop_toTopOf="#id/image"
app:layout_constraintBottom_toBottomOf="#id/image">
<TextView
android:id="#+id/miwok_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="miwok" />
<TextView
android:id="#+id/english_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="english" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I can fix the problem by changing the layout to LinearLayout. But in Constraint Layout when ImageView is GONE one of textview is gone, the other remains. I have read similar to this ConstraintLayout, when constraint dependent view is gone, the layout view behave weirdly . But in my situation why one of the textviews is still remains if this is the child view of linear layout (why all linear layout isn't gone?).
Layout in the app (I change english text into phrases, but miwok isn't seen):
Because the LinearLayout has its top and bottom constraints set to the ImageView, it will be centered vertically on the ImageView. See the documentation that addresses this. "Vertically centered" means that the vertical center of the LinearLayout and the ImageView will be at the same y position.
Now, when the ImageView is set to GONE, the ImageView is reduced to a virtual point. Since it is constrained to the start and top of the parent, the "gone" view will now be a point at the screen's origin (0,0). The LinearLayout remains constrained to the top and bottom of the ImageView as before, so it is still centered on the ImageView. But, since the ImageView is now a point at the origin, and its centered has shifted, the LinearLayout must shift up to keep centered on the ImageView. As a result, the top TextView leaves the top of the screen and can no longer be seen.
How you would fix this depends on what you are trying to do.
As your LinearLayout top and bottom constraint is given to imageview and when it's gone it's height become less and because of that top textview is not visible.
#Cheticamp give more information in his answer.
You can change your constraint like below and it will work as you want. Change Imageview top and bottom constraint to LinearLayout top and bottom.
<?xml version="1.0" encoding="utf-8"?><?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"
android:padding="10dp">
<ImageView
android:id="#+id/image"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/texts"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/texts" />
<LinearLayout
android:id="#+id/texts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:orientation="vertical"
app:layout_constraintStart_toEndOf="#+id/image"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/miwok_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="miwok" />
<TextView
android:id="#+id/english_word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="english" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to make a trimmerbar to my video player
trimmer_bar.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/thumbsBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
tools:background="#color/trimmerBarSelected">
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription=""
android:scaleType="fitStart"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:contentDescription=""
android:scaleType="fitEnd"
android:src="#drawable/ic_right_thumb" />
</RelativeLayout>
<ImageView
android:id="#+id/progressIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="60dp"
android:layout_marginTop="3dp"
android:contentDescription=""
android:scaleType="centerCrop"
android:src="#android:drawable/btn_star_big_on" />
</FrameLayout>
activity_video_viewer:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#a8c71c"
tools:context=".activities.VideoTrimmerActivity">
<com.tomatedigital.instagram.longstories.ui.TrimmerBar
android:id="#+id/trimmerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/trimmerBarSelected"
/>
</FrameLayout>
it's logic is working great: when the user touches, i detect if it was on the any of the thumbs and case on the left thumb I adjust the left margin of the thumbsBar, case on the right I adjust the right margin...
As the two imageview are aligned to the edges this behavior makes them to move... but what is actually moving is the whole RelativeLayout
The problem is even adjuting the margins and moving the imageviews the relative layout is still showing the background in the margin area
ignoring the whole calculation i set the margins using:
this.thumbsBar= (RelativeLayout) findViewById(R.id.thumbsBar);
this.thumbsBarLayout = (LayoutParams) this.thumbsBar.getLayoutParams();
this.thumbsBarLayout.leftMargin = this.leftMargin;
this.thumbsBarLayout.rightMargin = this.rightMargin;
this.thumbsBar.setLayoutParams(this.thumbsBarLayout);
===============================================================
UPDATE:
to make it easier to understand
I've this:
I should have:
com.tomatedigital.instagram.longstories.ui.TrimmerBar has the same background as your RelativeLayout and has a width of match_parent. You don't really specify how your layout is being loaded and I assume it is in your custom view.
For a test, change the color of the background of the custom view to see if the background you are seeing in the margins is coming from the RelativeLayout or the custom view. My guess is that it's coming from the custom view and changing the background color in the custom view will solve your problem.
I have an ImageView and a CheckBox inside a FrameLayout. Although the CheckBox is placed above the ImageView, its ripple feedback is drawn below the ImageView. Is there any way to draw the ripple on top? Tried adding elevation values but nothing changed.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:layout_height="285dp"
android:layout_width="300dp"
android:src="#drawable/rectangle"
android:layout_gravity="center_horizontal|top" />
<CheckBox
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New CheckBox" />
</FrameLayout>
Seems that the ripples are drawn on top of their container's background. So I put the CheckBox in another container, set the container's background to transparent and the ripple showed up correctly.
I would like to draw a line behind an ImageView in a list item which fills the entire height of the list item. The image in the following link shows my desired result. The blue line is the one I want.
https://www.dropbox.com/s/fbdsuvcyxaz1pnj/listViewDesired.png?dl=0
I have a ListView with a custom adapter and layout for each row. The row is comprised of a relative layout with a few elements: an image with a specific size anchored to the left, a text view with a specific size anchored to the right, and a text view which fills the rest of the space in between.
I want to show a thin line coming out of the top and bottom of the ImageView and fill the rest of the space for that list item. The List item's size can become larger than the image size if there is a lot of text in the middle. How can I achieve this?
I have tried multiple approaches with a framelayout with a view that matches/fills the parent and the ImageView, and a linearlayout with 3 views (top line, imageView, bottom line that fills the parent), and the image looks correct in the IDE render, but the lines do not extend all the way or even show up when the app is actually running.
This is my layout without a line behind the imageview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<ImageView
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_marginTop="#dimen/margin"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toRightOf="#id/tabIcon"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
You just need to create separate layout for Image as well as Vertical Line and to draw Vertical Line you need to add a View with width of 1dp or the thickness you want.
Try with the following Code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered -->
<RelativeLayout
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tabText" >
<View
android:id="#+id/verticleLine"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#0000ff" />
<ImageView
android:id="#+id/tabIcon"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"
android:layout_centerInParent="true"
android:layout_marginTop="#dimen/margin"
android:src="#drawable/face" />
</RelativeLayout>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/margin" />
<TextView
android:id="#+id/tabText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_toRightOf="#id/image"
android:text="#string/long_string" />
</RelativeLayout>
So I managed to solve the issue by using an enclosing LinearLayout instead. I have changed some of the margin stuff but I get my desired effect. :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:paddingLeft="#dimen/marginTop"
android:paddingRight="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<LinearLayout
android:orientation="vertical"
android:clipChildren="false"
android:id="#+id/frameTabIcon"
android:layout_marginRight="#dimen/margin"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<View
android:id="#+id/tabTopLine"
android:layout_width="#dimen/lineThickNess"
android:layout_height="#dimen/marginTop"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"/>
<ImageView
android:onClick="deletePersonOnClick"
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<View
android:id="#+id/tabBottomLine"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"
android:minHeight="#dimen/marginTop"
android:layout_width="#dimen/lineThickNess"
android:layout_height="match_parent"/>
</LinearLayout>
<RelativeLayout
android:layout_marginTop="#dimen/marginTop"
android:layout_marginBottom="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>