Develop Reference

Android LayoutParams not being updated properly

So I have a scroll view, and I need to adjust the height of my scroll view to make sure it stays above a modal pop-up view. I can't use a constraint layout because this modal pop-up view is not a child of the same view parent. So I'm trying to dynamically update my scroll views layout params so its height is small enough to not get hidden behind the modal pop-up.
The pop-up view height can change at points so I have a callback that returns the new height of the modal view anytime it changes. In that callback I adjust the scroll views height like so:
someModalView.onHeightChanged = { newViewHeight ->
Log.d("TESTHEIGHT", "PreHeight = ${scrollView.height}")
scrollView.layoutParams = FrameLayout.LayoutParams(scrollView.width, scrollView.height - newViewHeight)
scrollView.requestLayout()
Log.d("TESTHEIGHT", "PostHeight = ${scrollView.height}")
}
Unfortunately the above code seems to do nothing and in my logs I can see that the PreHeight prints the same height as the PostHeight. Any reason the views height isn't getting changed?
Also, I did debug it and make sure that newViewHeight is not 0, and it isn't, it's ~800
Ended up making it work by adding padding to the view rather than changing its height like so:
someModalView.onHeightChanged = { newViewHeight ->
scrollView.setPadding(0, 0, 0, newViewHeight)
}
This works exactly how i needed it to, however it doesn't really answer the question so I will just leave it in the answer for anyone else who it might help. But it would still be nice to know why changing the layout params wouldn't update the views height.

try to see it works for you
val params = scrollView.layoutParams;
params.height = scrollView.height - newViewHeight
scrollView.layoutParams = params

Once I needed to get the height of the softKeyboard to update my view:
public class MainActivity extends AppCompatActivity {
private ScrollView sView;
private int heightDiff;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
sView = findViewById(R.id.scrollView);
//Here we get the height of soft keyboard by observing changes of softKeyboard height.
sView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
heightDiff = sView.getRootView().getHeight() - sView.getHeight();
}
});
final EditText email = findViewById(R.id.eemail);
EditText firstName = findViewById(R.id.efirstname);
firstName.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (!isVisibleWhileSoftKeyboardShowing(email) && hasFocus) {
sView.postDelayed(new Runnable() {
#Override
public void run() {
sView.smoothScrollBy(0, 200);
}
}, 500);
}
}
});
}
/**
* check if a view is currently visible in the screen or not
*
* #param view
* #return
*/
public boolean isVisibleWhileSoftKeyboardShowing(final View view) {
if (view == null) {
return false;
}
if (!view.isShown()) {
return false;
}
final Rect actualPosition = new Rect();
view.getGlobalVisibleRect(actualPosition);
final Rect screen = new Rect(0, 0, getScreenWidth(), getScreenHeight() - heightDiff);
return actualPosition.intersect(screen);
}
/**
* to get screen width
*
* #return
*/
public static int getScreenWidth() {
return Resources.getSystem().getDisplayMetrics().widthPixels;
}
/**
* to get screen height
*
* #return
*/
public static int getScreenHeight() {
return Resources.getSystem().getDisplayMetrics().heightPixels;
}
}
heightDiff is the height of softKeyboard. There was 2 edit texts. I wanted to scroll if softKeyboard hided the lower one. Hope this is similar to your case.

How can I make a DialogFragment occupy the entire screen width

I have tried to create a dialog that occupies the full screen width from the old AlertDialog builder to the new DialogFragment approach in the onCreateView() and onViewCreated() to get the displayed dialog to occupy the full width of the screen. I can certainly get the width and height values of the screen but regardless of how I try to force the dialog to use these values, they are ignored. The displayed dialog is always the same width regardless of orientation.
In my latest attempt I have an xml layout that I inflate. I need to use a custom view so I cannot define that view in xml. So I add it.
Here is the most current attempt I have in my DialogFragment code. Of course this is just one of many attempts I have made trying to follow hints from posts and Slidenerd videos.
public class PopupDialog extends DialogFragment implements View.OnClickListener
{
private static final String TAG = PopupDialog.class.getName();
Button cancel = null;
Button focus = null;
View viewInput = null;
int width;
int height;
int id;
public PopupDialog()
{
}
public PopupDialog(View v, int id, int width, int height)
{
viewInput = v;
this.id = id;
this.width = width;
this.height = height;
}
#Override
public View onCreateView(LayoutInflater inflator, ViewGroup container, Bundle savedInstance)
{
Log.d(TAG, "onCreateView of DialogFragment called.");
View viewDialog = inflator.inflate(R.layout.popup_dialog, null);
// RelativeLayout relativeLayout = (RelativeLayout)viewDialog;
// LayoutParams params = new LayoutParams(width, height);
// relativeLayout.setLayoutParams(params);
// Point point = new Point();
// Activity activity = getActivity();
// activity.getWindowManager().getDefaultDisplay().getSize(point);
// if(point.x > point.y)
if(width > height)
{
getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
else
{
getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
ViewParent parent = viewInput.getParent();
if(parent != null)
{
Log.d(TAG, "View already present. Removing.");
((ViewGroup)parent).removeView(viewInput);
}
LayoutParams params = new LayoutParams(width, height);
viewInput.setLayoutParams(params);
((ViewGroup)viewDialog).addView(viewInput, 0);
cancel = (Button)viewDialog.findViewById(R.id.btn_cancel);
focus = (Button)viewDialog.findViewById(R.id.btn_focus);
cancel.setOnClickListener(this);
focus.setOnClickListener(this);
setCancelable(false);
return viewDialog;
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState)
{
super.onViewCreated(view, savedInstanceState);
Log.d(TAG, "onViewCreated of DialogFragment called.");
//getDialog().getWindow().setLayout(LayoutParams.MATCH_PARENT, height);
getDialog().getWindow().setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
WindowManager.LayoutParams wmlp = getDialog().getWindow().getAttributes();
wmlp.gravity = Gravity.TOP | Gravity.LEFT;
wmlp.x = 10; //x position
wmlp.y = 450 * (id) + 10;
// wmlp.width = width;
// wmlp.height = height;
}
I am plotting a sine wave. The view has the correct size as the sine wave has a range of 0 to 12 but in the landscape orientation the displayed dialog box only gets a little more than half way, so 0 to 6 + is seen and then one has to wait for the wave to recycle as it plots from 6 to 12 before it becomes visible again when it goes back to 0. I AM able to place the dialog box upper left hand corner.
Does anyone know how to solve this problem? I went to the fragment because I was led to believe that the canned AlertDialog approach was fixed in width and there was nothing one could do. I am facing the same limitation with the DialogFragment.

try adding this code in on create() method after setContentView
getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);

I gave up and created my graph in a ListView in a ViewFlipper. Not want I wanted but I got more real estate for the graph.

Imageview parallax as you scroll

I saw many examples demonstrative parallax background as you scroll or listview parallax but I cannot find a clear example how to implement a parallax effect on images as you scroll in the activity.
An example implementation can be found in Airbnb app. As you scroll down you can see more of the image's bottom and as you scroll up you can see more of the image's top.
Any hints and tips on how to create such effect?

There are a few libraries that to a parallax effect, it depends on your app if they are useful for your particular case, for example:
ParallaxScroll
Paralloid
Google is your friend pal ;) if none of these suits your needs then you have to create a custom ScrollView but that's a longer story, first give them a try and post your results.
Edit
If none of these fit your requeriments then this is what you have to do:
First, create a custom ScrollView so you can listen to scroll changes.
public class ObservableScrollView extends ScrollView {
public interface OnScrollChangedListener {
public void onScrollChanged(int deltaX, int deltaY);
}
private OnScrollChangedListener mOnScrollChangedListener;
public ObservableScrollView(Context context) {
super(context);
}
public ObservableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if(mOnScrollChangedListener != null) {
mOnScrollChangedListener.onScrollChanged(l - oldl, t - oldt);
}
}
public void setOnScrollChangedListener(OnScrollChangedListener listener) {
mOnScrollChangedListener = listener;
}
}
Obviously you need to use this in your layout instead of the default ScrollView:
<your.app.package.ObservableScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
Also you need to wrap your ImageView inside a container to make the parallax work:
<FrameLayout
android:id="#+id/img_container"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
</FrameLayout>
Finally set your Activity as a listener for your brand new ObservableScrollView and let the parallax begin:
public class MyActivity extends Activity implements ObservableScrollView.OnScrollChangedListener {
private ObservableScrollView mScrollView;
private View imgContainer;
#Override
public void onCreate(Bundle savedInstanceState) {
// Init your layout and set your listener
mScrollView = (ObservableScrollView)findViewById(R.id.scroll_view);
mScrollView.setOnScrollChangedListener(this);
// Store the reference of your image container
imgContainer = findViewById(R.id.img_container);
}
#Override
public void onScrollChanged(int deltaX, int deltaY) {
int scrollY = mScrollView.getScrollY();
// Add parallax effect
imgContainer.setTranslationY(scrollY * 0.5f);
}
}
You can modify the 0.5 value depending on how much parallax you want.
Edit
The above answer works fine if your ImageView is in the top of the activity. I am posting some code below to add the functionality to have the ImageView anywhere in the activity layout which I successfully made to work. These are generic calculations (might have some mistakes) and with a little tweak you can have it working for your own case.
For this example I have a fix height for the image container 200dp and for the image 240dp. The main purpose is when the image container is in the middle of the screen have no parallax effect and as the user scroll up or down to apply the effect. So as the image container get closer to the top of the screen or closer to the bottom of the screen the more of the parallax effect will be applied. The following calculations are a little hard to understand by reading them so try to make an example with real numbers in paper.
public class MyActivity extends Activity implements ObservableScrollView.OnScrollChangedListener {
private ObservableScrollView mScrollView;
private View imgContainer;
private ImageView mImageView;
#Override
public void onCreate(Bundle savedInstanceState) {
// Init your layout and set your listener
mScrollView = (ObservableScrollView)findViewById(R.id.scroll_view);
mScrollView.setOnScrollChangedListener(this);
// Store the reference of your image container
imgContainer = findViewById(R.id.img_container);
// Store the reference of your image
mImageView = findViewById(R.id.img);
}
#Override
public void onScrollChanged(int deltaX, int deltaY) {
// Get scroll view screen bound
Rect scrollBounds = new Rect();
mScrollView.getHitRect(scrollBounds);
// Check if image container is visible in the screen
// so to apply the translation only when the container is visible to the user
if (imgContainer.getLocalVisibleRect(scrollBounds)) {
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();
display.getMetrics(outMetrics);
// Get screen density
float density = getResources().getDisplayMetrics().density;
// Get screen height in pixels
float dpHeight = outMetrics.heightPixels / density;
int screen_height_pixels = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpHeight, getResources().getDisplayMetrics());
int half_screen_height = screen_height_pixels/2;
// Get image container height in pixels
int container_height_pixels = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200, getResources().getDisplayMetrics());
// Get the location that consider a vertical center for the image (where the translation should be zero)
int center = half_screen_height - (container_height_pixels/2);
// get the location (x,y) of the image container in pixels
int[] loc_screen = {0,0};
imgContainer.getLocationOnScreen(loc_screen);
// trying to transform the current image container location into percentage
// so when the image container is exaclty in the middle of the screen percentage should be zero
// and as the image container getting closer to the edges of the screen should increase to 100%
int final_loc = ((loc_screen[1]-center)*100)/half_screen_height;
// translate the inner image taking consideration also the density of the screen
mImageView.setTranslationY(-final_loc * 0.4f * density);
}
}
}
I hope it can help someone that is looking for similar functionality.

scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
#Override
public void onScrollChanged() {
int top = scrollView.getScrollY(); // Increases when scrolling up ^
if(top != 0) {
int newTop = (int) (top * .5f);
imageFrame.setTop(newTop < 0 ? 0 : newTop);
}
}
});

Getting the width/height of a layout in Android

I'm wondering how to measure the dimensions of a view. In my case it is aan Absolute Layout. I've read the answers concerning those questions but I still don't get it.
This is my code:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
AbsoluteLayout layoutbase = (AbsoluteLayout) findViewById(R.id.layoutbase);
drawOval();
}
public void drawOval(){ //, int screenWidth, int screenHeight){
AbsoluteLayout layoutbase = (AbsoluteLayout) findViewById(R.id.layoutbase);
int screenWidth = layoutbase.getWidth();
int screenHeight = layoutbase.getHeight();
Log.i("MyActivity", "screenWidth: " + screenWidth + ", screenHeight: " +screenHeight);
Coordinates c = new Coordinates(BUTTONSIZE,screenWidth,screenHeight);
...some code ...
((ViewGroup) layoutbase ).addView(mybutton, new AbsoluteLayout.LayoutParams(BUTTONSIZE, BUTTONSIZE, c.mX, c.mY));
mybutton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showText(mybutton);
}
});
}
public void showText(View button){
int x = findViewById(LAYOUT).getWidth();
int y = findViewById(LAYOUT).getHeight();
Toast message = Toast.makeText(this, "x: " + x , Toast.LENGTH_SHORT);
message.show();
}
The getWidth() command works great in showText() but it does not in drawOval(). I know it looks a bit different there but I also used the int x = findViewById(LAYOUT).getWidth(); version in drawOval(), and x/y are always 0. I don't really understand why there seems to be no width/height at that earlier point. Even if I actually draw a Button on the Absolute Layout, getWidth() returns 0. Oviously I want to measure the sizes in drawOval().

I think will help you.
LinearLayout headerLayout = (LinearLayout)findviewbyid(R.id.headerLayout);
ViewTreeObserver observer = headerLayout .getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// TODO Auto-generated method stub
int headerLayoutHeight= headerLayout.getHeight();
int headerLayoutWidth = headerLayout.getWidth();
headerLayout .getViewTreeObserver().removeGlobalOnLayoutListener(
this);
}
});
}

getWidth() is giving you 0 because onCreate is called before layout actually happens. Due to views being able to have dynamic positions and sizes based on attributes or other elements (fill_parent for example) there's not a fixed size for any given view or layout. At runtime there is a point in time (actually it can happen repeatedly depending on many factors) where everything is actually measured and laid out. If you really need the height and width, you'll have to get them later as you've discovered.

This specially deal with Dimensions so
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
This may help you in managing dimensions.
Note: This returns the display dimensions in pixels - as expected. But the getWidth() and getHeight() methods are deprecated. Instead you can use:
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
as also Martin Koubek suggested.

If your goal is to simply draw an oval on the screen, then consider creating your own custom View rather than messing around with AbsoluteLayout. Your custom View must override onDraw(android.graphics.Canvas), which will be called when the view should render its content.
Here is some extremely simple sample code that might help get you started:
public class MainActivity extends Activity {
private final Paint mPaint = new Paint();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new SampleView(this));
}
// create a nested custom view class that can draw an oval. if the
// "SampleView" is not specific to the Activity, put the class in
// a new file called "SampleView.java" and make the class public
// and non-static so that other Activities can use it.
private static class SampleView extends View {
public SampleView(Context context) {
super(context);
setFocusable(true);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.CYAN);
// smoothen edges
mPaint.setAntiAlias(true);
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(4.5f);
// set alpha value (opacity)
mPaint.setAlpha(0x80);
// draw oval on canvas
canvas.drawOval(new RectF(50, 50, 20, 40), mPaint);
}
}
}

This give you screen resolution:
WindowManager wm = (WindowManager)context.getSystemService(context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point outSize = new Point();
display.getSize(outSize);

kabuko's answer is correct, but could be a little more clear, so let me clarify.
getWidth() and getHeight() are (correctly) giving you 0 because they have not been drawn in the layout when you call them. try calling the two methods on the button after addView() (after the view has been drawn and is present in the layout) and see if that gives you the expected result.
See this post for more information.

How to create a view similar to the system notification area in android?

I'd like to have a view in my activity, which initially stays at the top of the screen like a little bar, but when you tap on it it should expand down, like the system notification area.
I haven't found any standard controls with such behaviour. What's the best way to implement this?

Use a SlidingDrawer. Here is a good tutorial.

The SlidingDrawer works exactly in this way.

The problem is that the SlidingDrawer can't be positioned at the top of the screen — it opens only upwards (see related question). So I implemented a simple control of my own, using the TranslateAnimation
class MySlidingDrawer extends LinearLayout {
public static final int STATE_OPENED = 0;
public static final int STATE_CLOSED = 1;
private int m_intState;
private LinearLayout m_content;
private ImageButton m_handle;
public MySlidingDrawer(Context context) {
super(context);
setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
setOrientation(VERTICAL);
setGravity(Gravity.CENTER);
m_content = new LinearLayout(context);
// add your content here
addView(m_content);
m_intState = STATE_CLOSED;
m_handle = new ImageButton(context);
m_handle.setImageResource(R.drawable.icon);
m_handle.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
toggleState();
}
});
m_handle.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
addView(m_handle);
}
private int getContentHeight() {
return m_content.getHeight();
}
private void toggleState() {
int intYStart = 0;
int intYEnd = m_intState == STATE_OPENED ? -getContentHeight() : getContentHeight();
Animation a = new TranslateAnimation(0.0f, 0.0f, intYStart, intYEnd);
a.setDuration(1000);
a.setStartOffset(300);
a.setInterpolator(AnimationUtils.loadInterpolator(getContext(), android.R.anim.bounce_interpolator));
startAnimation(a);
m_intState = m_intState == STATE_OPENED ? STATE_CLOSED : STATE_OPENED;
}
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
offsetTopAndBottom(-getContentHeight()); // content is initially invisible
}
protected void onAnimationEnd() {
super.onAnimationEnd();
int intYOffset = m_intState == STATE_OPENED ? getContentHeight() : -getContentHeight();
offsetTopAndBottom(intYOffset);
}
}

You can use the code posted in this answer: Android SlidingDrawer from top?
The provided solution features setting the orientation of the Slidingdrawer in xml also it's simple requiring only 1 class and some additions in attrs.xml and stable since it's derived from Androids Slidingdrawer from SDK. I also discuss why I didn't choose other popular libs/solutions found on the internet/SO.
Quicklink to the gist: MultipleOrientationSlidingDrawer (source & example) # gist