I've built a very simple native Android UI component and I want to update the size of its child view when a button from my react native project is clicked. To be more precise, when this button is clicked then I send a command to my SimpleViewManager which in turn calls the resizeLayout() of my custom view.
I can verify that the resizeLayout() is properly called but the layout is not resized until I rotate the phone. Obviously, changing the device's orientation triggers the draw() of my custom view but so does the invalidate() which I explicitly call.
Other layout changes like changing the background color instead of resizing it work fine.
My custom component looks like this:
public class CustomComponent extends RelativeLayout {
public CustomComponent(Context context) {
super(context);
init();
}
public CustomComponent(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomComponent(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
inflate(getContext(), R.layout.simple_layout, this);
}
public void resizeLayout(){
LinearLayout childLayout = (LinearLayout) findViewById(R.id.child_layout);
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) childLayout.getLayoutParams();
layoutParams.height = 50;
layoutParams.width= 50;
childLayout.setLayoutParams(layoutParams);
invalidate();
}
}
and the simple_layout.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/child_layout"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#ffee11"/>
</RelativeLayout>
Any help would be greatly appreciated.
After a couple of days of searching, I finally found the answer in this old reported issue in React Native's repo.
This solution is the same as the ones used in ReactPicker.java and ReactToolbar.java. I had to put the following code in my CustomComponent and after that there is no need to even call requestLayout() or invalidate(). The changes are propagated as soon as I update my layout's LayoutParams.
#Override
public void requestLayout() {
super.requestLayout();
// The spinner relies on a measure + layout pass happening after it calls requestLayout().
// Without this, the widget never actually changes the selection and doesn't call the
// appropriate listeners. Since we override onLayout in our ViewGroups, a layout pass never
// happens after a call to requestLayout, so we simulate one here.
post(measureAndLayout);
}
private final Runnable measureAndLayout = new Runnable() {
#Override
public void run() {
measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
layout(getLeft(), getTop(), getRight(), getBottom());
}
};
Try running
requestLayout();
instead of invalidate.
This post also has some good information on view lifecycle.
Usage of forceLayout(), requestLayout() and invalidate()
I would also recommend changing your root element in your view xml to
<merge>
that way your CustomComponent class doesn't have a RelativeLayout as its immediate child, unless that's what you were going for.
Related
I want to create an Excel type layout where there is infinite scroll vertically. There are fixed number of columns horizontally, but they should be scrollable.
I tried the below code
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/table_data_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</HorizontalScrollView>
If I used the above code, then I am able to scroll vertically, but the columns are not scrollable.
Even giving fixed height in the xml for HorizontalScrollView and RecyclerView, the columns do not scroll.
Finally, I found an answer here, where it was advised to extend the RecyclerView and calculate the height dynamically.
public class MySmartRecyclerView extends RecyclerView {
public MySmartRecyclerView(Context context) {
super(context);
}
public MySmartRecyclerView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MySmartRecyclerView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public boolean canScrollHorizontally(int direction) {
return false;
}
#Override
public int getMinimumWidth() {
return computedWidth;
}
#Override
protected void onMeasure(int widthSpec, int heightSpec) {
super.onMeasure(widthSpec, heightSpec);
setMeasuredDimension(computedWidth, getMeasuredHeight());
}
#Override
protected int getSuggestedMinimumWidth() {
return computedWidth;
}
}
So is this the only way, this can be achieved? Or is there any other way to achieve this. For RecyclerView inside ScrollView there is NestedScrollView, but no such thing for HorizontalScrollView.
Any pointers will be appreciated. TIA.
There is one alternate solution. You can use this library.
You want to do Ehhhh? Like the guy said, use library. You need and have normal easy to use solutions.
EDIT:
Okay my bad.
You want to infinite scroll vertically, not excel. I'm back from excel topic:
at onScroll listener, you should incriment endlessly the totalItemCount, you do it with double recurssion. From within the function of listener, you call to another listner whereas you call it by a function in the middle, which also increments that number before calling to the same listener again. You simply edit the view and re-attach the listener.
Im trying to create a sort of HUD overlay for Google Cardboard.
The HUD needs to be duplicated (one for each eye). A simplistic solution would be to manually copy all the XML elements into another view but giving them different names. This feels like a bad approach since it involves lots of code duplication.
So i came up with the following solution for a ViewGroup with is supposed to render everything two times:
public class StereoView extends FrameLayout {
private static final String TAG = StereoView.class.getSimpleName();
public StereoView(Context context) {
super(context);
init(context);
}
private void init(Context context) {
testPaint.setColor(Color.RED);
}
private Paint testPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right/2, bottom);
}
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
canvas.translate(getWidth() / 2, 0);
super.dispatchDraw(canvas);
canvas.restore();
super.dispatchDraw(canvas);
}
public StereoView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public StereoView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public StereoView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context);
}
}
The first problem is that neither dispatchDraw or onDraw is called except from one or two times. It is not called when child views are invalidated.
The second problem is that background on elements which has a with of MATCH_PARENT renders outside the ViewGroups inner bounds:
200DP width
MATCH_PARENT
Is this approach hoping for too much, or am i thinking wrong? Creating a completely custom view to handle complex layouts and images seems like lots of work while copying my layout seems like bad design.
You say:
A simplistic solution would be to manually copy all the XML elements
into another view but giving them different names. This feels like a
bad approach since it involves lots of code duplication.
Actually you can go ahead and use the <include> tag. All you need to do is create a layout that contains all the views that you are going to show to a single eye. Then in your main layout you have to <include> this layout twice, one for the left eye and the other for the right eye.
You might wonder, if this is the case then how can i use findViewById() on this main layout, since now there will be two views with the same id. Well, you can fix that by doing it as follows. Let's say you have created the eye.xml layout. Then your main_layout should look like below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<include
android:id="#+id/leftEye"
layout="#layout/eye" />
<include
android:id="#+id/rightEye"
layout="#layout/eye" />
</LinearLayout>
When you do the findViewById() in your code, you could do that as follows:
RelativeLayout leftEye = (RelativeLayout)findViewById(R.id.leftEye);
ImageView iv = (ImageView)leftEye.findViewById(R.id.something);
You need write a simple method in your activity where you just pass the leftEye or rightEye as a parameter and perform all code in this method. This lets you perform UI changes in leftEye and rightEye simultaneously.
In the future, you could write a custom View in which you could just inflate the eye.xml. That would modularize your idea.
This is my thoughts to your problem.
A ViewGroup hosts Views; any xml layout are Views, so extend a ViewGroup of your choice, either LinearLayout ,Framelayout-(i prefer), and in your initialisation process, inflate your Layout twice and add them as Views later you can research on how to use onLayout() to position your Views in your preferred Location.
And what ever you call a View 1, View 2 needs to be onboard, you can bind the two, using any approach you want, interfaces or beans
Note
you create one layout and inflate it twice. which will give you two separate View objects, hence this won't be code duplication as its more of
Elltz _20yearElltz = new Elltz(20),_21yearElltz = new Elltz(21);
Hope it helps
I use a HorizontalScrollView to contain a bunch of dynamic TextView elements. They are dropped into a LinearLayout container that is the only child of the scroll view:
<HorizontalScrollView android:id="#+id/outline_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
android:requiresFadingEdge="horizontal"
android:fadingEdgeLength="16dp">
<LinearLayout android:id="#+id/outline"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>
This is to ensure that if (and only if) there's more text than the available width can show, the user can scroll horizontally through the texts.
BUT: in many, many cases, the texts are short enough to be shown on screen. The LinearLayout container with id outline thus fits completely within the HorizontalScrollView.
Problem is: horizontal swipe gestures are still caught but should not be, because the whole thing is within a ViewPager which itself would like to handle the horizontal swipes!
I am looking for a solution that enables this HorizontalScrollView's scrolling only if the room for the contents is too limited.
In order to prevent the HorizontalScrollView from scroll, you have to override the onTouchEvent method to return false. That led me to create my own HSV like so:
public class MyHorizontalScrollView extends HorizontalScrollView{
boolean tooSmall = true;
public MyHorizontalScrollView(Context context) {
super(context);
}
public MyHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyHorizontalScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setTooSmall(boolean tooSmall){
this.tooSmall = tooSmall;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
if(tooSmall)
return false;
else
return super.onTouchEvent(ev);
}
}
Then, after you replace your HSV with this custom view, you need monitor the size of your LinearLayout(R.id.outline) to see if it is smaller or larger than your HSV. Adding this snippet helped me achieve that goal.
ll = (LinearLayout) view.findViewById(R.id.outline);
hsv = (MyHorizontalScrollView) view.findViewById(R.id.outline_container);
ll.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Log.d("widths", ll.getWidth() + " : " + hsv.getWidth());
hsv.setTooSmall(ll.getWidth() < hsv.getWidth());
}
});
I am new to android ecosystem. I wanted to know is there a way to get notified when an apps active layout changes for the end user. I am sorry if the question is a repeat, i searched around for what i thought were relevant keywords and could not find an answer. (Note: I dont want to change the UI from a background thread, i just want to get notified when the layout changes according to the user using the app)
You can create a custom layout and basically override its onDraw method of it which will be called when the layout is been refreshed/updated then get notified from there.
sample:
Lets say you have a parent layout using LinearLayout.
public class Sample2 extends LinearLayout {
public Sample2(Context context) {
super(context);
}
public Sample2(Context context, AttributeSet attrs) {
super(context, attrs);
}
public Sample2(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onDraw(Canvas canvas) {
Log.d("UPDATE", "I am REFRESHED"); //will print if this layout is refresh,updated, or invalidated.
super.onDraw(canvas);
}
}
To use that in the xml:
<?xml version="1.0" encoding="utf-8"?>
<com.example.sfdsffsdf.Sample2 xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</com.example.sfdsffsdf.Sample2>
You can set an OnGlobalLayoutListener on your layout and get notified when the state or visibility of that layout or any of its children get changed:
myLayout.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// Do something
}
};
I have a custom Button and I want to set its dimensions in code (as opposed to in xml), so that users can customize the dimensions. The seemingly obvious way to this is:
public class MyButton extends Button
{
public MyButton(Context context, AttributeSet attrs)
{
super(context, attrs);
int buttonSize = getSize();
setLayoutParams(new LinearLayout.LayoutParams(buttonSize, buttonSize));
}
However, this fails to be generic because it only works if the Button's parent is a LinearLayout. Instead, I tried this:
#Override
protected void onMeasure(int specw, int spech)
{
int spec = MeasureSpec.makeMeasureSpec(getButtonSize()), MeasureSpec.EXACTLY);
super.onMeasure(spec, spec);
}
...which seems to work well. Is anyone aware of any shortcomings to this? or aware of a better way to generically set widget dimensions in code?
Doing it from onMeasure() is a good way to do it (even though your code doesn't work since you're not using the measure spec you've created.) You could also override onFinishInflate() and call getLayoutParams() and change the width and height fields.