Android : Implementing custom view with buttons - android

I am creating a custom view which will have a bitmap so that user can draw in it and some normal Android buttons in the bottom for user interaction.
To size my bitmap (height of drawing areas should be 50% ) I am overriding
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
this.setMeasuredDimension(widthMeasureSpec, (int)(parentHeight * 0.50));
super.onMeasure(widthMeasureSpec, (int)(parentHeight * 0.50));
}
This gives me exception that
"java.lang.IllegalArgumentException: width and height must be > 0"
If I set super.onMeasure(widthMeasureSpec, heightMeasureSpec);
I cannot see my buttons places in the bottom.
If I dont write super.onMeasure() anything I draw is not seen once I release the mouse.
I am using a xml file for layout :
<view class="com.my.CustomView" android:id="#+id/myView"
android:layout_width="fill_parent" android:layout_height="wrap_content"/>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal">
<Button android:layout_height="wrap_content"
android:text="B1" android:layout_width="wrap_content"/>
<Button android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="B2"/>
</LinearLayout>
What else should I do ?

Wouldn't be easier to give your custom view a size in dp. You then can see your layout in design mode. Then use onSizeChanged to find out the size of your canvas.
onMeasure is usually used when the size of the canvas depends on runtime values, like the result of a game or number of loaded items etc.
Here is an example that works:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
int newH = (int) (parentHeight / 1.5f);
this.setMeasuredDimension(parentWidth, newH );
}
Also the constructor for your custom vuew must include attribute set:
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}

Your onMeasure() is incomplete, it should take into account also the mode (UNSPECIFIED, EXACTLY, AT_MOST). Docs say that onMeasure() might get called several times, even with UNSPECIFIED 0-0 sizes, to see what size the view would like to be. See View, section Layout. There's no need to call super.onMeasure().
I don't get if your custom view includes only the drawing area or you're inflating the buttons too in it (my guess is the first case), but try Hierarchy Viewer, it will help you to understand how views are being laid out (and hence why in some cases you see drawings and sometimes not).

Related

TextView works wrong with breakStrategy="balanced" and layout_width="wrap_content"

I have such layout (I've removed some attributes, cause they really doesn't matter, full demo project is here):
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content" (* this is important)
android:layout_height="wrap_content"
android:breakStrategy="balanced" (* this is important)
android:text="#string/long_text" />
</LinearLayout>
The text long_text is quite long, so it would be separated for a few lines.
Two important lines are android:layout_width="wrap_content" and android:breakStrategy="balanced".
I expect that TextView will calculate width according to the actual text width, but it doesn't.
Does anybody know how to fix this?
UPDATE
Attribute android:breakStrategy="balanced" works only for API 23 and higher. In my example text takes 3 lines, and balanced strategy makes each line approximately same width.
I expect that in this case width of view itself will be the same as the longest line.
I'm looking for any workaround. I need solution like in Hangouts chat. I can't figure out how it works.
UPDATE 2
Unfortunately, accepted answer doesn't work with RTL text.
This happens because when TextView calculates its width it measure all text as 1 line (in your case) and on this step it knows nothing about android:breakStrategy. So it is trying to utilize all available space to render as much text on first line as it can.
To get more details, please check method int desired(Layout layout) here
To fix it you can use this class:
public class MyTextView extends TextView {
public MyTextView(Context context) {
super(context);
}
public MyTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Layout layout = getLayout();
if (layout != null) {
int width = (int) Math.ceil(getMaxLineWidth(layout))
+ getCompoundPaddingLeft() + getCompoundPaddingRight();
int height = getMeasuredHeight();
setMeasuredDimension(width, height);
}
}
private float getMaxLineWidth(Layout layout) {
float max_width = 0.0f;
int lines = layout.getLineCount();
for (int i = 0; i < lines; i++) {
if (layout.getLineWidth(i) > max_width) {
max_width = layout.getLineWidth(i);
}
}
return max_width;
}
}
which I took here - Why is wrap content in multiple line TextView filling parent?
You'll need to measure the width of the text in TextView programatically, like so:
Rect bounds = new Rect();
textView.getPaint().getTextBounds(textView.getText().toString(), 0, textView.getText().length(), bounds);
Now, you can place a colored rectangle behind the TextView, and set its width programatically after measuring the text (I'm using FrameLayout to put the Views one on top of the other, but you can use RelativeLayout as well):
XML:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="+#id/background"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/green" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:breakStrategy="balanced"
android:text="#string/long_text" />
</FrameLayout>
Code:
Rect bounds = new Rect();
textView.getPaint().getTextBounds(textView.getText().toString(), 0, textView.getText().length(), bounds);
View bg = findViewById(R.id.background);
gb.getLayoutParams().width = bounds.width();
Code is untested, but I'm sure you get the point.
UPDATE
It may be possible to do this without using a second background view, by setting the TextView width to match bounds.width(), but this trigger a change in how the text breaks, so need to be careful not to cause an infinite loop.

Create a List containing a dynamic number of Views with RecyclerVIew

I want to show the user a scrollable list of items which can each have a different number of "sub-views". For example:
My first idea was to create a RecyclerView that would inflate "items" that each contain their own RecyclerView:
Item:
<LinearLayout
android:id="#+id/item">
<TextView
android:id="#+id/itemTitle" />
<android.support.v7.widget.RecyclerView
android:id="#+id/nestedRecyclerView"/>
</LinearLayout>
The problem I run into is that the main RecyclerView doesn't know the size of the nested one, and thus shows only the TextView above it, since it thinks that the height of the nested list is zero.
This can be somewhat fixed by setting a fixed layout:height to the nested list, but as shown on the item 3 of the example picture, the height may change depending on the number of items.
Is this the preferred way to create such a layout? If yes, how can I solve the "height" problem? If not, what would be the best method?
Can be achieved by adding a gridview for the layout of the list adapter.
U would need to subclass gridview like below, which measures the child height properly.
public class NonScrollableGridView extends GridView {
public NonScrollableGridView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Do not use the highest two bits of Integer.MAX_VALUE because they are
// reserved for the MeasureSpec mode
int heightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, heightSpec);
getLayoutParams().height = getMeasuredHeight();
}
}

How to square a custom view when layout_height and layout_width are set to have different magnitudes?

As per my understanding when user specifies a views height/width in pixels/dp, the view receives EXACTLY spec mode. EXACTLY spec mode means that the view must use this size. Suppose I want to make sure my view remains a square. How can that be achieved if the user sets different values for layout_height and layout_width.
Override onMeasure for your custom view, determine what the smallest dimension is, and set both your width and height to that minimum dimension.
Something like:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int specWidth = MeasureSpec.getSize(widthMeasureSpec);
int specHeight = MeasureSpec.getSize(heightMeasureSpec);
int lesserDimension = (specWidth > specHeight)?specHeight:specWidth;
setMeasuredDimension(lesserDimension, lesserDimension);
}

Custom Viewgroup works inside LinearLayout not RelativeLayout

I wanted to create a custom LinearLayout (and later a custom ImageButton) that could take percentage values for both dimensions of size based on its parent's size regardless of the parent type (Relative or Linear). I was following this post: How to size an Android view based on its parent's dimensions, and it was very helpful, but I have a problem that those answers don't address.
When I place my Custom LinearLayout inside another LinearLayout, everything works as expected. My Custom LinearLayout covers the expected space (80% of the parent's width in the example below).
However if I place it inside a RelativeLayout, my screen always shows empty, I am not sure why this happens.
Here is my class:
public class ButtonPanel extends LinearLayout {
public ButtonPanel(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int newWidth = (int) Math.ceil(parentWidth * 0.8);
this.setMeasuredDimension(newWidth, parentHeight);
this.setLayoutParams(new RelativeLayout.LayoutParams(newWidth,parentHeight));
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
And here is my testing layout for the activity.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.android.tests.views.ButtonPanel
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/inner_panel"
android:gravity="center_horizontal"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true">
</com.android.tests.views.ButtonPanel>
</RelativeLayout>
In my activity all I do is set the Content View to the above layout.
(Incidentally, does anybody now how I could get the type of the parent dynamically for setting the new LayoutParameters? Above you'll see the parent type (RelativeLayout) hard-coded into the Custom View onMeasure function)
Thanks in advance for any help!
Is this exposed to be a problem?
this.setLayoutParams(new RelativeLayout.LayoutParams(newWidth,parentHeight)); // <-- a RelativeLayout params?
In the onMeasure function you could use something like this to know what class is the parent of the view.
this.getParent().getClass().getName()
This should also work
a instanceof B
or
B.class.isAssignableFrom(a.getClass())
When using "instanceof", you need to know the class of "B" at compile time. When using "isAssignableFrom" it can be dynamic and change during runtime.
If you are not compfortable with string comparison, you could also use enums.
Turns out my two inquiries in this post were more related than expected.
I realized that by setting my view's LayoutParams to a completely new instance, I was overwriting the layout positioning information needed by the Relative Layout to position my view.
By 'zeroing out' that information, my view has the right dimensions, but the layout doesn't know where to place it, so it simply doesn't.
The following code for the new onMeasure shows how just directly modifying the height and width of the LayoutParams already attached to my view I avoid both overwriting the layout position information and having to create new LayoutParams based on the parent's type.
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int specWidth = MeasureSpec.getSize(widthMeasureSpec);
int specHeight = MeasureSpec.getSize(heightMeasureSpec);
int newWidth = (int) Math.ceil(parentWidth * 0.8);
int newHeight = (int) Math.ceil(parentHeight * 0.8);
this.setMeasuredDimension(newWidth, newHeight);
this.getLayoutParams().height = newHeight;
this.getLayoutParams().width = newWidth;
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
Now, I'll be honest and say that this code is still not bug-free. Bringing the activity to the foreground and background multiple times constantly reduces the size of this custom view. The 0.8 reduction factor gets applied over and over each time the activity is brought up (I suspect the setting of the LayoutParams has to do with it, it might actually be unnecessary, but I haven't has time to test).
BUT, this still answered the question concerning this post, namely, why was my view not appearing at all despite having the right dimensions.

How to implement scrolling in Android custom view

I've written a custom view which I'd like to ensure is viewable on any screen size.
I've overridden the onMeasure:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
this.setMeasuredDimension(parentWidth, parentHeight);
}
and this seems to work fine when the view is smaller than the screen. Sometimes, though, the custom view is larger than the screen, and I'm planning for smaller screen sizes, so I wrapped the custom view in a ScrollView but now the parentHeight in the onMeasure comes out as 0.
I've changed the superclass of the custom view from View to ScrollView, hoping for an easy win of inheriting the scrolling functionality, but this hasn't happened so I'm left with trying to find a way of getting the ScrollView functionality to work with my custom view, or writing my own scrolling functionality.
Has anyone any advice? I've seen this post on Large Image Scrolling Using Low Level Touch Events and was going to copy some of that functionality if I'm forced to write my own, but would appreciate a nudge in the right direction either way.
Turns out the answer was simple. I left the ScrollView in and changed my onMeasure. The thing to note about it is that although Android would supply the width, it wouldn't supply me with a height, which was initially confusing. To just get the view to fill the available space I grabbed the visible rect of the parent view. Code in full (hopefully it'll help someone else who is having the same problem):
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight;
if(isLandscape()) {
Rect r = new Rect();
((ScrollView)getParent()).getGlobalVisibleRect(r);
parentHeight = r.bottom - r.top;
} else {
parentHeight = (int) Util.getViewHeight();
}
this.setMeasuredDimension(parentWidth, parentHeight);
}

Categories

Resources