Develop Reference

How to write set methods of custom Views

I have written a subclass of View and I have included a method to set a field. The value of the field affects the the size of the View and the contents of the View.
What do I have to write in the set method to ensure that the view will be properly updated with immediate effect? I am asking because when I use my own custom views as part of a layout of a ListView item, I find that when I try to recycle my own views by using the convertView argument of an ArrayAdapter's getView method, sometimes the set method doesn't seem to work.
Here is a contrived example of the kind of thing I am trying to do. I have only just started learning how to extend View, so there may be other problems with this code.
public final class SpotsView extends View {
private final MyActivity activity;
private int numberOfSpots;
public SpotsView(MyActivity activity) {
super(activity);
this.activity = activity;
}
public void setNumberOfSpots(int numberOfSpots) {
this.numberOfSpots = numberOfSpots;
// What do I have to write here?? invalidate()? forceLayout()?
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Resources resources = activity.getResources();
setMeasuredDimension(
(int) (numberOfSpots * resources.getDimension(R.dimen.block_width)),
(int) resources.getDimension(R.dimen.spots_view_height)
);
}
#Override
protected void onDraw(Canvas canvas) {
int height = getHeight();
int width = getWidth();
float radius = activity.getResources().getDimension(R.dimen.network_outer_radius);
for (int i = 0; i < numberOfSpots; i++)
canvas.drawCircle((i + 0.5F) * (width / numberOfSpots), height * 0.5F, radius, activity.spotPaint());
}
}

It seems you have to call
invalidate();
requestLayout();
according to the source code of TextView#setCompoundDrawablePadding(), a method which affects content and size of the view.

Custom View not respond very well on touch events

I have a custom grid which extends ViewGroup and I have the next onLayout and measureChildrenSizes methods:
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// .. tileSide calcultion ..
measureChildrenSizes(tileSide);
for (int i = 0; i < getChildCount(); i++) {
Square child = (Square) getChildAt(i);
int x = child.getColumn();
int y = child.getRow();
child.layout(x * tileSide, y * tileSide,
(x + 1) * tileSide, (y + 1) * tileSide);
}
}
private void measureChildrenSizes(int tileSide) {
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
measureChild(child, tileSide, tileSide);
}
}
The childs (Square) are custom Views which have a custom onDraw method and the onTouch callback method:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
rect.set(0, 0, getWidth(), getHeight());
gradient.setBounds(rect);
gradient.draw(canvas);
rectangle.setStrokeWidth(0.2f);
rectangle.setStyle(Style.STROKE);
rectangle.setColor(getResources().getColor(
R.color.puzzle_foreground));
canvas.drawRect(rect, rectangle);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
requestFocus();
changeState();
return false;
}
return super.onTouchEvent(event);
}
This draw a grid of Squares which side measure is tileSide. All the Squares works fine except the last column. Sometimes they don't respond.
Perhaps I'm looking for in the wrong direction.
Edit: in the emulator works fine. It fails in real Devices (tested on Sony xperia u, Samsung galaxy Ace, Samsung galaxy mini).

Returning false in your MotionEvent.ACTION_DOWNcan cause some of the GestureDetector(if that's what you are using) methods to not be called. Try returning true there and see if it responds better.
This Android Developers page might help you: Making a View Interactive

Sometimes bad touch responses can be caused by breaking cycle of managing views by Adapter in AdapterView. I have experienced the same issue when I saved
reference to views managed by AdapterView. It can cause bad response to touches.

How do you add a custom view on a view in Android?

I have a graph view (custom view) in Android and a main view. Depending on the user's preference I want to add 1-5 graph views onto my main view but am not quite sure how to. (I'm using purely Java and not xml). I was reading that I might have to use a Relative Layout or something in order to stack views.
Any advice or suggestions are welcome

in your activity you probably have something like this towards the begining of your onCreate() method:
setContentView(R.layout.main);
inside your main.xml file you probably have an element that is some kind of layout. I will assume LinearLayout for now, but it works similarly with all types. You'll need to get a reference to this layout and to do that it must have an id. So if that layout does not have something like this in it you need to add it:
android:id="#+id/myMainLayout"
Then back in your java sometime after you've called setContentView() you can find the reference to your layout with something like this:
LinearLayout myLayout = (LinearLayout)findViewById(R.id.myMainLayout);
Once you have a reference to your layout you can add your graph views to it with something like this:
myLayout.addView(graph1);
myLayout.addView(graph2);
//etc...
If you want to skip the xml layout all together you are allowed to make your layout in java. To do that it would like this:
LinearLayout myLayout = new LinearLayout(YourActivity.this);
myLayout.addView(graph1);
myLayout.addView(graph2);
setContentView(myLayout);
Note that you can only call setContentView() once so you'll need to pass some kind of Layout to it if you want to add more than 1 View.
Edit:
I have never specifically tried but I would think you could call addView() from the constructor in your custom view:
public CustomView() {
this.addView(anotherView);
}
do you have a custom view for your layout too?

Here is an example of a custom view as graph. One needs to have a LinearLayout somewhere in the layout which has ID set to #+id/ll and size of the graph:
public class RootActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
int[] graphData = {3,5,2,7,4,8,1,5,9};
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
GraphView graphView = new GraphView(this);
ll.addView(graphView);
//call this method with every new set of data
graphView.drawGraph(graphData);
}
class GraphView extends View{
int[] graphData;
Paint graphPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
int screenH;
int screenW;
int colW;
int colH;
int columnCount;
public GraphView(Context context) {
super(context);
graphPaint.setColor(Color.MAGENTA);
graphPaint.setStyle(Style.FILL);
}
#Override
public void onSizeChanged (int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
screenW = w;
screenH = h;
}
public void drawGraph(int[] graphData){
this.graphData = graphData;
columnCount = graphData.length;
invalidate();
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
colW = (screenW - 10) / columnCount;
int graphStep = 20;
int columnSpace = 5;
canvas.drawText("GRAPH", 10, 10, graphPaint);
for (int i= 0 ; i < columnCount; i++){
//draw columns from bottom up
canvas.drawRect(
new Rect(
i * colW + 5,
screenH - 5 - (graphData[i] * graphStep),
i * colW + 5 + colW - columnSpace,
screenH - 5
),
graphPaint);
}
}

Determining the size of an Android view at runtime

I am trying to apply an animation to a view in my Android app after my activity is created. To do this, I need to determine the current size of the view, and then set up an animation to scale from the current size to the new size. This part must be done at runtime, since the view scales to different sizes depending on input from the user. My layout is defined in XML.
This seems like an easy task, and there are lots of SO questions regarding this though none which solved my problem, obviously. So perhaps I am missing something obvious. I get a handle to my view by:
ImageView myView = (ImageView) getWindow().findViewById(R.id.MyViewID);
This works fine, but when calling getWidth(), getHeight(), getMeasuredWidth(), getLayoutParams().width, etc., they all return 0. I have also tried manually calling measure() on the view followed by a call to getMeasuredWidth(), but that has no effect.
I have tried calling these methods and inspecting the object in the debugger in my activity's onCreate() and in onPostCreate(). How can I figure out the exact dimensions of this view at runtime?

Use the ViewTreeObserver on the View to wait for the first layout. Only after the first layout will getWidth()/getHeight()/getMeasuredWidth()/getMeasuredHeight() work.
ViewTreeObserver viewTreeObserver = view.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
viewTreeObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
viewWidth = view.getWidth();
viewHeight = view.getHeight();
}
});
}

There are actually multiple solutions, depending on the scenario:
The safe method, will work just before drawing the view, after the layout phase has finished:
public static void runJustBeforeBeingDrawn(final View view, final Runnable runnable) {
final OnPreDrawListener preDrawListener = new OnPreDrawListener() {
#Override
public boolean onPreDraw() {
view.getViewTreeObserver().removeOnPreDrawListener(this);
runnable.run();
return true;
}
};
view.getViewTreeObserver().addOnPreDrawListener(preDrawListener);
}
Sample usage:
ViewUtil.runJustBeforeBeingDrawn(yourView, new Runnable() {
#Override
public void run() {
//Here you can safely get the view size (use "getWidth" and "getHeight"), and do whatever you wish with it
}
});
On some cases, it's enough to measure the size of the view manually:
view.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
int width=view.getMeasuredWidth();
int height=view.getMeasuredHeight();
If you know the size of the container:
val widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(maxWidth, View.MeasureSpec.AT_MOST)
val heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(maxHeight, View.MeasureSpec.AT_MOST)
view.measure(widthMeasureSpec, heightMeasureSpec)
val width=view.measuredWidth
val height=view.measuredHeight
if you have a custom view that you've extended, you can get its size on the "onMeasure" method, but I think it works well only on some cases :
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
final int newHeight= MeasureSpec.getSize(heightMeasureSpec);
final int newWidth= MeasureSpec.getSize(widthMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
If you write in Kotlin, you can use the next function, which behind the scenes works exactly like runJustBeforeBeingDrawn that I've written:
view.doOnPreDraw { actionToBeTriggered() }
Note that you need to add this to gradle (found via here) :
android {
kotlinOptions {
jvmTarget = "1.8"
}
}
implementation 'androidx.core:core-ktx:#.#'

Are you calling getWidth() before the view is actually laid out on the screen?
A common mistake made by new Android developers is to use the width
and height of a view inside its constructor. When a view’s
constructor is called, Android doesn’t know yet how big the view will
be, so the sizes are set to zero. The real sizes are calculated during
the layout stage, which occurs after construction but before anything
is drawn. You can use the onSizeChanged() method to be notified of
the values when they are known, or you can use the getWidth() and
getHeight() methods later, such as in the onDraw() method.

Based on #mbaird's advice, I found a workable solution by subclassing the ImageView class and overriding onLayout(). I then created an observer interface which my activity implemented and passed a reference to itself to the class, which allowed it to tell the activity when it was actually finished sizing.
I'm not 100% convinced that this is the best solution (hence my not marking this answer as correct just yet), but it does work and according to the documentation is the first time when one can find the actual size of a view.

Here is the code for getting the layout via overriding a view if API < 11 (API 11 includes the View.OnLayoutChangedListener feature):
public class CustomListView extends ListView
{
private OnLayoutChangedListener layoutChangedListener;
public CustomListView(Context context)
{
super(context);
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
if (layoutChangedListener != null)
{
layoutChangedListener.onLayout(changed, l, t, r, b);
}
super.onLayout(changed, l, t, r, b);
}
public void setLayoutChangedListener(
OnLayoutChangedListener layoutChangedListener)
{
this.layoutChangedListener = layoutChangedListener;
}
}
public interface OnLayoutChangedListener
{
void onLayout(boolean changed, int l, int t, int r, int b);
}

You can check this question. You can use the View's post() method.

Use below code, it is give the size of view.
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
Log.e("WIDTH",""+view.getWidth());
Log.e("HEIGHT",""+view.getHeight());
}

This works for me in my onClickListener:
yourView.postDelayed(new Runnable() {
#Override
public void run() {
yourView.invalidate();
System.out.println("Height yourView: " + yourView.getHeight());
System.out.println("Width yourView: " + yourView.getWidth());
}
}, 1);

I was also lost around getMeasuredWidth() and getMeasuredHeight() getHeight() and getWidth() for a long time.......... later i found that getting the view's width and height in onSizeChanged() is the best way to do this........ you can dynamically get your CURRENT width and CURRENT height of your view by overriding the onSizeChanged() method.
might wanna take a look at this which has an elaborate code snippet.
New Blog Post: how to get width and height dimensions of a customView (extends View) in Android http://syedrakibalhasan.blogspot.com/2011/02/how-to-get-width-and-height-dimensions.html

In Kotlin file, change accordingly
Handler().postDelayed({
Your Code
}, 1)

You can get both Position and Dimension of the view on screen
val viewTreeObserver: ViewTreeObserver = videoView.viewTreeObserver;
if (viewTreeObserver.isAlive) {
viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
//Remove Listener
videoView.viewTreeObserver.removeOnGlobalLayoutListener(this);
//View Dimentions
viewWidth = videoView.width;
viewHeight = videoView.height;
//View Location
val point = IntArray(2)
videoView.post {
videoView.getLocationOnScreen(point) // or getLocationInWindow(point)
viewPositionX = point[0]
viewPositionY = point[1]
}
}
});
}

If you need to know the dimensions of a View right after it is drawn you can simply call post() on that given View and send there a Runnable that executes whatever you need.
It is a better solution than ViewTreeObserver and globalLayout since it gets called repeatedly not just once.
This Runnsble will execute only once and you will know the views size.

works perfekt for me:
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
CTEditor ctEdit = Element as CTEditor;
if (ctEdit == null) return;
if (e.PropertyName == "Text")
{
double xHeight = Element.Height;
double aHaight = Control.Height;
double height;
Control.Measure(LayoutParams.MatchParent,LayoutParams.WrapContent);
height = Control.MeasuredHeight;
height = xHeight / aHaight * height;
if (Element.HeightRequest != height)
Element.HeightRequest = height;
}
}

Rotate View Hierarchy 90 degrees

I am working on a subclass of FrameLayout that is supposed to rotate all of its children by 90 degrees. I am doing this to overcome the landscape-only camera limitation present in android 2.1 and below, by having the activity be in landscape, but placing my camera overlay into this framelayout overlay to cause it to appear as if it was portrait (this is how Layar does it) To accomplish this, I'm adapting Jeff Sharkey's code to rotate views. My problem is that I can rotate the Framelayout, but I cannot resize it to match the new dimensions. So on my g1, instead of a 320x480 portrait view over a 480x320 camera view in landscape, I get a 320x320 box in the middle showing my portrait view with the sides chopped off.
Here is my code so far:
public class RotateLayout extends FrameLayout {
private Matrix mForward = new Matrix();
private Matrix mReverse = new Matrix();
private float[] mTemp = new float[2];
public RotateLayout(Context context) {
super(context);
}
public RotateLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
/* (non-Javadoc)
* #see android.widget.FrameLayout#onMeasure(int, int)
*/
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//This didn't work:
//super.onMeasure(heightMeasureSpec, widthMeasureSpec);
}
/* (non-Javadoc)
* #see android.widget.FrameLayout#onSizeChanged(int, int, int, int)
*/
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.rotate(270, getWidth()/2, getHeight()/2);
//This code will stretch the canvas to accommodate the new screen size. This is not what I want.
//float scaleX=(float)getHeight()/getWidth();
//float scaleY=(float)getWidth()/getHeight();
//canvas.scale(scaleX, scaleY, getWidth()/2, getHeight()/2);
mForward = canvas.getMatrix();
mForward.invert(mReverse);
canvas.save();
canvas.setMatrix(mForward); //This is the matrix we need to use for proper positioning of touch events
super.dispatchDraw(canvas);
canvas.restore();
}
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
final float[] temp = mTemp;
temp[0] = event.getX();
temp[1] = event.getY();
mReverse.mapPoints(temp);
event.setLocation(temp[0], temp[1]);
return super.dispatchTouchEvent(event);
}
}
I have tried overriding OnMeasure to switch the X and Y dimensions of the View, but have not been able to get that to work.
Any help you can provide is greatly appreciated.

I had the same problem and managed to solve it.
Instead of rotating each view or the layout by hand, I used a LayoutAnimationController.
First, place a file in /res/anim/ called rotation.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="-90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="0" android:fillAfter="true">
</rotate>
Then, in your Activity's onCreate, do
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.myscreen);
Animation rotateAnim = AnimationUtils.loadAnimation(this, R.anim.rotation);
LayoutAnimationController animController = new LayoutAnimationController(rotateAnim, 0);
FrameLayout layout = (FrameLayout)findViewById(R.id.MyScreen_ContentLayout);
layout.setLayoutAnimation(animController);
}
If you want to rotate elements that lie above your camera preview view (SurfaceHolder), simply place a FrameLayout above the SurfaceHolder, place all your elements in that FrameLayout and call the Layout "MyScreen_ContentLayout". Done.
Hope that helped someone out, took me quite a while to get everything together.

Using API level 11 and later you can use the method setRotation(degreesFloat); to change the rotation of a view programmatically, or you can use the XML attribute android:rotation="" to change it in your XML. There are also methods/attributes for changing only the X or Y values of a view's rotation: Android Docs - View (setRotation).
So nowadays as long as you're using API level 11 or above, you should be able to apply the rotation to a wrapper layout node. However, you probably will also have to change the dimensions of the top-level layout to match the dimensions you desire after the rotation. I.e. if you have a portrait view w/ dimensions 800x1280, you'll have to change them to 1280x800 in order for it to line up after rotating to landscape.

Using this library you can rotate whole view hierarchy https://github.com/rongi/rotate-layout
Like this

This is what has worked for me in general.
private void init() {
setRotation(90f);
}
public YourViewOrViewGroup(final Context context) {
super(context);
init();
}
... (all the View/ViewGroup constructors) ...
#Override
protected void onLayout(final boolean changed, final int l, final int t, final int r, final int b) {
super.onLayout(changed, l, t, r, b);
final int width = getWidth();
final int height = getHeight();
final int offset = Math.abs(width - height) / 2;
setTranslationX(-offset);
setTranslationY(offset);
}
#Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, widthMeasureSpec);
}
What you want to do is swap the width with height and then put the X & Y offsets so that the view becomes full screen after the rotation.
The above is a 'landscape'-rotated version. To achieve a landscape inverted just apply 270-deg rotation. You can either modify code within the snippet or apply the rotation outside in a more generic way, i.e
final YourViewOrViewGroup layout = inflater.inflate(...);
if (currentOrientation.isInverted()) {
layout.setRotation(layout.getRotation + 180f);
}
this way you are able to embed the rotated View/ViewGroup within the xml definition and inflate 'port' and 'land' versions while the screen orientation changes, but this seems out of this topic.
Edit: actually it is much better to defer the offset setting until at least one layout pass is over.
This is due the fact that in my case after first onMeasure() the view would be drawn (before the offsets were set). Eventually it could be experienced as glitching because the view/layout would not get drawn within the final bounds at first.
(updated the snippet)

I think you forgot one line in your onMeasure.
#Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, widthMeasureSpec);
setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
}
Taken from the code for a vertical seekbar here:
How can I get a working vertical SeekBar in Android?
You might need to fiddle with the getMeasuredHeight() to make it the correct size of your screen.

Try turning off children clipping of your view root: call setClipChildren(false) on parent of your RotateLayout and in onMeasure method of your RotateLayout put these lines:
super.onMeasure(heightMeasureSpec, widthMeasureSpec);
setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
I'm having basically the same problem as you and I still haven't tested my solution - I'll do it tomorrow and tell if it is working correctly.