Develop Reference

how to show full layout in BottomSheetDialog with min and max height 350dp in android

My layout_xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/_350sdp"
android:maxHeight="#dimen/_500sdp"
android:orientation="vertical"
android:id="#+id/commentProblemScreenLL">
<ListView
android:id="#+id/commentProblemLV"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/commentProblemNotFound"
android:visibility="gone"
android:id="#+id/commentProblemNotFoundTV"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#drawable/side_nav_bar"
android:orientation="horizontal"
android:padding="#dimen/m1dp"
android:weightSum="1"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/commentEditTextET"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:background="#null"
android:hint="#string/comment_EditText"
android:padding="5dip"
android:textColor="#color/white"
android:textColorHint="#color/hintcolor" />
<ImageButton
android:id="#+id/commentSendTextIB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:layout_alignParentEnd="true"
android:background="#drawable/side_nav_bar"
android:paddingBottom="#dimen/_4sdp"
android:src="#drawable/cm_chat_send"
android:layout_alignParentRight="true"
android:paddingRight="#dimen/_10sdp"
android:layout_marginTop="#dimen/_5sdp"/>
</RelativeLayout>
</RelativeLayout>
Java code:-
private void showCommentDailog()
{
Log.d(TAG,"showCommentDailog enter()");
commentDialog = new BottomSheetDialog(getContext());
View view = ((ProblemsDetailActivity) getActivity()).getLayoutInflater().inflate(R.layout.commentproblemscreen, null);
commentDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
commentProblemLV = (ListView)view.findViewById(R.id.commentProblemLV);
TextView commentProblemNotFoundTV = (TextView)view.findViewById(R.id.commentProblemNotFoundTV);
EditText commentEditTextET = (EditText) view.findViewById(R.id.commentEditTextET);
ImageButton commentSendTextIB = (ImageButton)view.findViewById(R.id.commentSendTextIB);
if(commentDialog.getWindow() != null) {
commentDialog.getWindow().setGravity(Gravity.BOTTOM);
}
//call the function to show list of previous work
commentDialog.setContentView(view);
commentDialog.setCanceledOnTouchOutside(true);
commentDialog.show();
final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from((View) view.getParent());
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
#Override
public void onStateChanged(#NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
commentDialog.dismiss();
}else{
if (newState != BottomSheetBehavior.STATE_EXPANDED) {
if(commentProblemLV != null && !listIsAtTop()){
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
}
}
}
#Override
public void onSlide(#NonNull View bottomSheet, float slideOffset) {
}
});
}
This code does not show the full layout in bottomsheetDailog. Please correct my code as it shows the full layout in bottomsheetDialog.
I want to open full layout in half screen with BottomSheetDialog.
here I should be given my java code also for bottomSheetDialog.
bottomsheetdailog will apear on clickof comment ImageView.

CoordinatorLayout: View disappears with custom behavior

I am a newbie to CoordinatorLayout and this is a really strange behavior I am getting in CoordinatorLayout.I have an ImageView(or more specifically a subclass of ImageView called CircleImageView(it houses the Profile pic in the center here)) as one of the children of the CoordinatorLayout. I have anchored this CircleImageView to the AppbarLayout(which is another child of the CoordinatorLayout). Here is the entire layout I have:
So far so good. I am currently able to scroll the AppbarLayout and the NestedScrollView moves along with it. But, I thought of animating the Profile pic to move to right as we scroll up and decided to rely on custom CoordinatorLayour.Behavior. I ended up with a custom behavior that tries translation of the CircleImageView. It's not complete yet but is supposed to translate the view roughly some amount except now, the CircleImageView has disappeared completely with the introduction of custom behavior.
What might be the reason for this?
Note: I have tried replacing the CircleImageView with an ImageView and the behavior remains the same.
Here is the layout for reference:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="false"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.AppCompatImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:layout_weight="1"
android:tint="#color/white"
app:srcCompat="#drawable/ic_settings_24px" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="4dp"
app:layout_behavior="com.learncity.learner.account.profile.ProfilePicBehavior"
android:src="#drawable/avatar_boy_2"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|center" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/user_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="64dp"
android:lineSpacingExtra="8dp"
android:padding="#dimen/activity_horizontal_margin"
android:text="#string/account_person_name_label"
android:textAlignment="center"
android:textSize="40sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/id_phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:tint="#color/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/user_name"
app:srcCompat="#drawable/ic_phone_black_24dp" />
<TextView
android:id="#+id/id_phone_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:text="Phone No"
app:layout_constraintBottom_toBottomOf="#+id/id_phone_icon"
app:layout_constraintLeft_toRightOf="#+id/id_phone_icon"
app:layout_constraintTop_toTopOf="#+id/id_phone_icon"
app:layout_constraintVertical_bias="0.571" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/id_email_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:tint="#color/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_phone_icon"
app:srcCompat="#drawable/ic_email_black_24dp" />
<TextView
android:id="#+id/id_email_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:text="Email Id"
app:layout_constraintBottom_toBottomOf="#+id/id_email_icon"
app:layout_constraintLeft_toRightOf="#+id/id_email_icon"
app:layout_constraintTop_toTopOf="#+id/id_email_icon" />
<View
style="#style/Divider"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/id_email_icon" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
And the custom behavior:(I know the calculations might not be sound but I am trying for an initial crude animation)
public class ProfilePicBehavior extends CoordinatorLayout.Behavior<CircleImageView>{
public ProfilePicBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
return dependency instanceof AppBarLayout;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
// Translate the CircleImageView to the right
// Calculate first, what fraction the AppBarLayout has shrunk by
float proportion = dependency.getHeight() / 200f;
// Translate the child by this proportion
float translationX = parent.getWidth() * proportion;
child.setTranslationX(translationX);
return true;
}
}

According to this answer: https://stackoverflow.com/a/40023161/6248491
It is stating that The contained CollapsingToolbarLayout fiddles with parent's elevation
Try giving elevation of the AppBarLayout to 0dp. Also, the CircleImageView should hold more (higher) elevation in order to not get "lifted" on top.
Hope this helps. Let me know if it works.

I got the same problem with you a few months ago. I solve it by a custom CoordinatorLayout.Behavior as below (I dont remember the link of same question):
public class CollapsingImageBehavior extends CoordinatorLayout.Behavior<View> {
private final static int X = 0;
private final static int Y = 1;
private final static int WIDTH = 2;
private final static int HEIGHT = 3;
private int mTargetId;
private int[] mView;
private int[] mTarget;
public CollapsingImageBehavior() {
}
public CollapsingImageBehavior(Context context, AttributeSet attrs) {
if (attrs != null) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CollapsingImageBehavior);
mTargetId = a.getResourceId(R.styleable.CollapsingImageBehavior_collapsedTarget, 0);
a.recycle();
}
if (mTargetId == 0) {
throw new IllegalStateException("collapsedTarget attribute not specified on view for behavior");
}
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
setup(parent, child);
AppBarLayout appBarLayout = (AppBarLayout) dependency;
int range = appBarLayout.getTotalScrollRange();
float factor = -appBarLayout.getY() / range;
int left = mView[X] + (int) (factor * (mTarget[X] - mView[X]));
int top = mView[Y] + (int) (factor * (mTarget[Y] - mView[Y]));
int width = mView[WIDTH] + (int) (factor * (mTarget[WIDTH] - mView[WIDTH]));
int height = mView[HEIGHT] + (int) (factor * (mTarget[HEIGHT] - mView[HEIGHT]));
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
lp.width = width;
lp.height = height;
child.setLayoutParams(lp);
child.setX(left);
child.setY(top);
return true;
}
private void setup(CoordinatorLayout parent, View child) {
if (mView != null) return;
mView = new int[4];
mTarget = new int[4];
mView[X] = (int) child.getX();
mView[Y] = (int) child.getY();
mView[WIDTH] = child.getWidth();
mView[HEIGHT] = child.getHeight();
View target = parent.findViewById(mTargetId);
if (target == null) {
throw new IllegalStateException("target view not found");
}
mTarget[WIDTH] += target.getWidth();
mTarget[HEIGHT] += target.getHeight();
View view = target;
while (view != parent) {
mTarget[X] += (int) view.getX();
mTarget[Y] += (int) view.getY();
view = (View) view.getParent();
}
}
}
You have to add a custom styleable attrs.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CollapsingImageBehavior">
<attr name="collapsedTarget" format="integer"></attr>
</declare-styleable>
</resources>
After that, you can define your xml as below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="false"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Space
android:id="#+id/circle_collapsed_target"
android:layout_width="40dp"
android:layout_height="40dp" />
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.AppCompatImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:layout_weight="1"
app:srcCompat="#drawable/ic_tab_angel" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/profile_pic"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="220dp"
android:elevation="4dp"
android:src="#mipmap/icon_app"
app:collapsedTarget="#id/circle_collapsed_target"
app:layout_behavior="com.kp_corp.angelalarm.activity.CollapsingImageBehavior" />
<!---->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/user_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="64dp"
android:lineSpacingExtra="8dp"
android:padding="#dimen/activity_horizontal_margin"
android:text="Test"
android:textAlignment="center"
android:textSize="40sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

Last year I had to do something similar.
The AvatarImageBehavior is based on the GitHub project by Saul Molinero (saulmm)
As you can notice, the CircleImageView is the last element of the layout. Maybe it is your issue?
Hope it helps.
fragment's layout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:custom="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:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="550dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/iv_product_background"
android:layout_width="match_parent"
android:layout_height="400dp"
android:scaleType="centerCrop"
android:tint="#11000000"
app:layout_collapseMode="parallax"/>
<FrameLayout
android:id="#+id/main_framelayout_title"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/white"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<LinearLayout
android:id="#+id/main_linearlayout_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tv_product_title_open"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="bottom|center"
tools:text="Title"
android:textColor="#android:color/white"
android:textSize="30sp"/>
<TextView
android:id="#+id/tv_product_tagline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4dp"
android:gravity="center"
android:paddingEnd="#dimen/standard_margin_space"
android:paddingStart="#dimen/standard_margin_space"
tools:text="Tagline"
android:textColor="#android:color/white"/>
</LinearLayout>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/products_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:layout_anchor="#id/main_framelayout_title"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<include layout="#layout/toolbar_buttons"/>
<TextView
android:id="#+id/tv_product_title_closed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="71dp"
android:gravity="center_vertical"
tools:text="Title"
android:textColor="#android:color/white"
android:textSize="26sp"/>
<!--</LinearLayout>-->
</android.support.v7.widget.Toolbar>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iv_product_avatar"
android:layout_width="#dimen/product_avatar_width"
android:layout_height="#dimen/product_avatar_width"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="235dp"
android:src="#drawable/img_products_total16_avatar"
app:border_color="#color/grey"
app:border_width="0dp"
app:layout_behavior="com.myname.AvatarImageBehavior"/>
</android.support.design.widget.CoordinatorLayout>
AvatarImageBehavior
public class AvatarImageBehavior extends CoordinatorLayout.Behavior<CircleImageView> {
private final static String TAG = AvatarImageBehavior.class.getSimpleName();
private final Context mContext;
private boolean isInitialized = false;
private float mStartX;
private float mMaxXMove;
private float mStartY;
private float mMaxYMove;
private float mMaxScroll;
private float mStartHeight;
private float mMaxHeightChange;
private float mFinalHeight;
private float mFinalX;
private float mFinalY;
public AvatarImageBehavior(Context context, AttributeSet attrs) {
mContext = context;
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
return dependency instanceof Toolbar;
}
private void initProperties(CircleImageView child, View dependency) {
mMaxScroll = dependency.getY();
mStartHeight = child.getHeight();
mFinalHeight = mContext.getResources().getDimensionPixelOffset(R.dimen.product_avatar_final_width);
mMaxHeightChange = mStartHeight - mFinalHeight;
mStartX = child.getX();
mFinalX = mContext.getResources().getDimensionPixelOffset(R.dimen.product_avatar_margin_left);
mMaxXMove = mStartX - mFinalX;
mStartY = child.getY();
mFinalY = (dependency.getHeight() - mFinalHeight) / 2f;
mMaxYMove = mStartY - mFinalY;
isInitialized = true;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
if (!isInitialized)
initProperties(child, dependency);
final float currScrollDist = dependency.getY();
if (currScrollDist == 0) {
setParams(child, (int) mFinalX, (int) mFinalY, (int) mFinalHeight);
} else if (currScrollDist == mMaxScroll) { // reset the values if the scroll is at the max
setParams(child, (int) mStartX, (int) mStartY, (int) mStartHeight);
} else {
float scrollFactor = currScrollDist / mMaxScroll;
float factor = 1f - scrollFactor;
float currX = mStartX - (mMaxXMove * factor);
float currY = mStartY - (mMaxYMove * factor);
float currHeight = mStartHeight - (mMaxHeightChange * factor);
setParams(child, (int) currX, (int) currY, (int) currHeight);
}
return true;
}
private void setParams(CircleImageView view, int xPos, int yPos, int height) {
view.setX(xPos);
view.setY(yPos);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) view.getLayoutParams();
lp.width = height;
lp.height = height;
view.setLayoutParams(lp);
}
}

I have figured it out finally. I narrowed down the problem to the custom behavior(obviously) and the problem was the anomalous values of the translation for the child view(CircleImageView).
Here is the custom behavior after fine tuning the values:
public class ProfilePicBehavior extends CoordinatorLayout.Behavior<CircleImageView>{
private int mDependencyHeight;
private int mProfilePicMargin;
private int mActionBarHeight;
public ProfilePicBehavior(Context context) {
init(context);
}
public ProfilePicBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
mDependencyHeight = (int)context.getResources()
.getDimension(R.dimen.appbarlayout_learner_home_height);
mProfilePicMargin = (int)ViewUtils.dpToPx(context, 8f);
mActionBarHeight = (int)ActivityUtils.getActionBarHeight(context);
}
#Override
public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
if(dependency instanceof AppBarLayout){
return true;
}
return false;
}
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
// Translate the CircleImageView to the right
// Calculate first, what fraction the AppBarLayout has shrunk by
int bottom = dependency.getBottom();
int top = dependency.getTop();
int viewHeight = bottom;
float proportion = Math.min(1, 1 - ((viewHeight - mActionBarHeight) / (float)(mDependencyHeight - mActionBarHeight)));
// Translate the child by this proportion
float translationX = (parent.getWidth()/2 - child.getWidth()/2 - mProfilePicMargin) * proportion;
float translationY = (child.getHeight()/2 - mProfilePicMargin) * proportion;
child.setTranslationX(translationX);
child.setTranslationY(translationY);
return true;
}
}
You can see that it is simpler than #Eselfar's answer which manipulates the properties through the LayoutParams.(I haven't tested his answer though because my animation was a bit different)
The logic is really simple: Translate the CircleImageView by the proportion that AppBarLayout has shrunk by.

android set the size of widget in viewholder,but the content does not show?

I want to fit widget CardView to all kinds of screens,and my layout is embed CardViewin RecycleView, I add setLayoutParams() in ViewHolder,but after it,my content in CardViewdoes not show,I don't know how to deal with it,Hope somebody could help me.Here is my code:
cardview.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cv_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<LinearLayout
android:id="#+id/layoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20dp" />
<TextView
android:id="#+id/texttitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#color/black"
android:textSize="25dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="9dp" />
<TextView
android:id="#+id/textcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#color/black" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20dp" />
<View
android:id="#+id/colorfulview"
android:layout_width="20dp"
android:layout_height="5dp"
android:layout_gravity="center_horizontal"
android:background="#color/black"></View>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18dp" />
</LinearLayout>
and my adapter.java:
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.TextViewHolder> {
private final LayoutInflater mLayoutInflater;
private final Context mContext;
private int mScreenHeight, mScreenWidth;
private String[] mTitles;
private String[] mContents;
private int[] mColors = {R.color.qing, R.color.zi, R.color.fenhong, R.color.juhuang, R.color.qianzi, R.color.lan};
public RecyclerViewAdapter(Context context, int screenHeight, int screenWidth) {
mTitles = context.getResources().getStringArray(R.array.titles);
mContents = context.getResources().getStringArray(R.array.contents);
mContext = context;
mLayoutInflater = LayoutInflater.from(context);
mScreenHeight = screenHeight;
mScreenWidth = screenWidth;
}
#Override
public TextViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new TextViewHolder(mLayoutInflater.inflate(R.layout.item_main_recycler, parent, false));
}
#Override
public void onBindViewHolder(TextViewHolder holder, int position) {
holder.mTextTitle.setText(mTitles[position]);
holder.mTextContent.setText(mContents[position]);
holder.mColorfulView.setBackgroundResource(mColors[position]);
holder.mLayoutView.setLayoutParams(new CardView.LayoutParams(mScreenWidth / 2, (int) (mScreenHeight * 0.24)));
}
#Override
public int getItemCount() {
return mTitles == null ? 0 : mTitles.length;
}
public static class TextViewHolder extends RecyclerView.ViewHolder {
#InjectView(R.id.texttitle)
TextView mTextTitle;
#InjectView(R.id.textcontent)
TextView mTextContent;
#InjectView(R.id.colorfulview)
View mColorfulView;
#InjectView(R.id.layoutView)
LinearLayout mLayoutView;
TextViewHolder(View view) {
super(view);
ButterKnife.inject(this, view);
view.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.d("NormalTextViewHolder", "onClick--> position = " + getPosition());
}
});
}
}
}

try this in onCreateViewHolder:
View itemView = mLayoutInflater.inflate(R.layout.view_item, parent, false);
int height = screenWidth/2;
int width = screenHeight*24/100;
itemView.setMinimumHeight(height);
itemView.setMinimumWidth(width );
return new TextViewHolder(itemView);

Try to do the following:
LayoutParams params = holder.itemView.getLayoutParams();
params.height = screenWidth/2;
params.width = screenHeight*24/100;
holder.itemView.setLayoutParams(params);

Card layout parameters not working

I am trying to implement a list of Card views, and the list is fine, but the layout inside the card is nothing like what i have defined in the XML. Any ideas why this is not showing properly? Here is my card XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android:id="#+id/cvAdvertFavourite"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
card_view:cardUseCompatPadding="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
>
<ImageView
android:id="#+id/ivCardFavouriteAnimalPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="8dp"
/>
<TextView
android:id="#+id/tvCardFavouriteTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/ivCardFavouriteAnimalPhoto"
android:textSize="30sp"
/>
<TextView
android:id="#+id/tvCardFavouriteRace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvCardFavouriteTitle"
android:layout_toRightOf="#+id/ivCardFavouriteAnimalPhoto"
/>
<TextView
android:id="#+id/tvCardFavouritePrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvCardFavouriteRace"
android:layout_toRightOf="#+id/ivCardFavouriteAnimalPhoto"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
I use this RecyclerView XML:
<?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:padding="16dp"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvCardFavourite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Here is my CardItem class:
public class FavouriteCardItem {
Bitmap animal;
int price;
String title, race;
public FavouriteCardItem(Bitmap animal, int price, String title, String race){
this.animal = animal;
this.price = price;
this.title = title;
this.race = race;
}
public Bitmap getAnimal() {
return animal;
}
public void setAnimal(Bitmap animal) {
this.animal = animal;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getRace() {
return race;
}
public void setRace(String race) {
this.race = race;
}
}
Here is how I call my adapter and set the data for the adapter:
private void loadSetData() {
List<FavouriteCardItem> items = new ArrayList<FavouriteCardItem>();
Bitmap bitmap = BitmapFactory.decodeResource(getActivity().getResources(),
R.drawable.bird);
FavouriteCardItem item1 = new FavouriteCardItem(bitmap, 100, "birds", "birds");
items.add(item1);
Bitmap bitmap2 = BitmapFactory.decodeResource(getActivity().getResources(),
R.drawable.dog);
FavouriteCardItem item2 = new FavouriteCardItem(bitmap2, 200, "dogs", "dogs");
items.add(item2);
Bitmap bitmap3 = BitmapFactory.decodeResource(getActivity().getResources(),
R.drawable.cat);
FavouriteCardItem item3 = new FavouriteCardItem(bitmap3, 1000, "cats", "cats");
items.add(item3);
FavouriteCardAdapter adapter = new FavouriteCardAdapter(getActivity(), R.layout.card_view, items);
recyclerView.setAdapter(adapter);
}
And this is my Adapter class:
public class FavouriteCardAdapter extends RecyclerView.Adapter<FavouriteCardAdapter.CardViewHolder> {
private Context mContext;
private int resourceId;
List<FavouriteCardItem> cardItems;
public FavouriteCardAdapter(Context context, int resource, List<FavouriteCardItem> cardItems){
mContext = context;
resourceId = resource;
this.cardItems = cardItems;
}
#Override
public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view, parent, false);
CardViewHolder cvh = new CardViewHolder(v);
return cvh;
}
#Override
public void onBindViewHolder(CardViewHolder holder, int position) {
DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
int screenHeight = metrics.heightPixels;
holder.cardView.getLayoutParams().height = screenHeight / 4;
int price = cardItems.get(position).getPrice();
String price1 = Integer.toString(price);
holder.tvPrice.setText(price1);
holder.tvRace.setText(cardItems.get(position).getRace());
holder.tvTitle.setText(cardItems.get(position).getTitle());
holder.ivAnimal.setImageBitmap(cardItems.get(position).getAnimal());
}
#Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
super.onAttachedToRecyclerView(recyclerView);
}
#Override
public int getItemCount() {
return cardItems.size();
}
public class CardViewHolder extends RecyclerView.ViewHolder{
CardView cardView;
ImageView ivAnimal;
TextView tvPrice, tvTitle, tvRace;
public CardViewHolder(View itemView) {
super(itemView);
cardView = (CardView) itemView.findViewById(R.id.cvAdvertFavourite);
ivAnimal = (ImageView) itemView.findViewById(R.id.ivCardFavouriteAnimalPhoto);
tvPrice = (TextView) itemView.findViewById(R.id.tvCardFavouritePrice);
tvTitle = (TextView) itemView.findViewById(R.id.tvCardFavouriteTitle);
tvRace = (TextView) itemView.findViewById(R.id.tvCardFavouriteRace);
}
}
}
BTW I am aware that I am not supposed to load images like this and so on, but I just wanted to create some test data to get the layout right before i start loading the data from the online data storage.
Here is how the whole Card view looks like. It should have 3 textViews and 1 imageView, but it only shows one imageView.....

You can try this as one of the solution if you do not want to specify the dimension for width and height of Image
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android:id="#+id/cvAdvertFavourite"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
card_view:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="8dp"
>
<ImageView
android:id="#+id/ivCardFavouriteAnimalPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:weight = "2"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weight = "1" />
<TextView
android:id="#+id/tvCardFavouriteTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textSize="20sp"
/>
<TextView
android:id="#+id/tvCardFavouriteRace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvCardFavouriteTitle"
/>
<TextView
android:id="#+id/tvCardFavouritePrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvCardFavouriteRace"
/>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
In this I have used LinearLayout which will distribute the screen width in the ratio 2:1 between ImageView and RelativeLayout with text.
Also I have reduced the size of text from 30sp to 20sp

try to make your card xml look like this:
<android.support.v7.widget.CardView
android:id="#+id/cvAdvertFavourite"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
card_view:cardUseCompatPadding="true"
>
<RelativeLayout
android:id="#+id/something"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
>
<ImageView
android:id="#+id/ivCardFavouriteAnimalPhoto"
android:layout_width="#dimen/your_size_of_image" // the important part
android:layout_height="#dimen/your_size_of_image" // the important part
android:layout_centerVertical="true"
android:scaleType="centerCrop"/>
<LinearLayout // make sure you are using a linearlyout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/ivCardFavouriteAnimalPhoto"
android:layout_toRightOf="#id/ivCardFavouriteAnimalPhoto"
android:orientation="vertical">
<TextView
android:id="#+id/tvCardFavouriteTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<TextView
android:id="#+id/tvCardFavouriteRace"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<TextView
android:id="#+id/tvCardFavouritePrice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

How to expand a view by keep top left position fixed and other points changes in android

While i touch and move the size of View is changing.But my requirement is only change the size without change the position of top left.
Here is the xml_code alert_window.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/musiq_bg" >
<RelativeLayout
android:id="#+id/r1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<RelativeLayout
android:id="#+id/liner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/ll" >
<TextView
android:id="#+id/edit_list_name2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:gravity="center"
android:text="--- -"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ScrollView
android:id="#+id/scroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/liner2"
android:layout_below="#+id/edit_list_name2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/defualt_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:layout_marginTop="2dp"
android:layout_marginBottom="1dp"
android:text="Smack that all on the floor \nSmack that give me some more\n"
android:textAppearance="?android:attr/textAppearanceSmall"/>
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/liner2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="2dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:padding="3dp" />
<ImageView
android:id="#+id/iv_expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/popup_expand"
android:layout_centerVertical="true"
android:padding="3dp"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Here is the class
public class ResizeService extends Service {
ImageView iv_expand;
int height_layout,width,height,height_params;
WindowManager windowManager;
View myView;
#Override
public IBinder onBind(Intent intent) {
// Not used
return null;
}
#SuppressLint("NewApi")
#Override
public void onCreate() {
super.onCreate();
//470,420 wrap content,500
windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
DisplayMetrics metrics = ResizeService.this.getResources().getDisplayMetrics();
width = metrics.widthPixels;
height = metrics.heightPixels;
width=(width/100)*100;
height_params=(height/100)*40;
//window for the main layout
final WindowManager.LayoutParams params = new winndowManager.LayoutParams(width,height_params, WindowManager.LayoutParams.TYPE_PHONE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, PixelFormat.TRANSLUCENT);
params.gravity = Gravity.TOP | Gravity.LEFT;
LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
myView = inflater.inflate(R.layout.alert_window, null);
iv_expand = (ImageView) myView.findViewById(R.id.iv_expand);
windowManager.addView(myView, params);
iv_expand.setOnTouchListener(new OnTouchListener() {
private int initial_expand_X;
private int initial_expand_Y;
private float initialExpandTouchX;
private float initialExpandTouchY;
#Override
public boolean onTouch(View v, MotionEvent event) {
try {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
initial_expand_X = params.x;
initial_expand_Y = params.y;
initialExpandTouchX = event.getRawX();
initialExpandTouchY = event.getRawY();
return true;
case MotionEvent.ACTION_UP:
return true;
case MotionEvent.ACTION_MOVE:
params.x = initial_expand_X + (int) (event.getRawX() - initialExpandTouchX);
params.y = initial_expand_Y + (int) (event.getRawY() - initialExpandTouchY);
params.width=(int) event.getRawX();
params.height=(int)event.getRawY();
windowManager.updateViewLayout(myView, params);
return true;
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return false;
}
});
}
}