Android FrameLayout position VideoView element by left top width and height - android

I need to position VideoView element:
Left: 626dip
Top: 86dip
Width: 575dip
Height: 326dip
So when apk start it is in upper right corner...when i press OK button on remote controll it needs VideoView to be in FullScreen (Left: 0, Top: 0, Width: 100%x, Height: 100%y)
How can i make this in xml file?
I im using:
android:layout_gravity="center"
So that VideoView Video fill parent and Video is scalled to parent size.
Here is code that i try but it is centered FullScreen and when i press OK button it is centered SmallScreen, and don't know how to set it Left And Top using dp?
<?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="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<tv.danmaku.ijk.media.widget.VideoView
android:id="#+id/videoViewRelative"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center" />
</FrameLayout>
</LinearLayout>

You can do only create one state using XML. Switching has to be done in code.
First of all dump the fill_parent as it is deprecated. Then if you want to scale it dynamically, let it match the parent or set the smaller size in XML.
Then do the animation transition using view animation. Just as the parent's width and height and scale accordingly using either scale (mind setting the pivot to 0,0) or using size. I would use scaling with computed scale from 626/parentWidth.
But using dips fixes to only one display size/density

Related

Layout: center image inside center panel. Using percent units

I am trying to get a desing similar to the following in one of my Activities layout:
That is:
A white panel with 60% width of its parent. Center horizontally.
Inside that white panel, a image with 60% width of the panel, center
horizontally too.
I have been playing with Guidelines putting them at 0.2, 0.4, 0.6 and 0.8 horizonatlly without success.
How can I get it?
You have to use a ConstraintLayout as the root layout, then set the width of your child to 0dp and width percent to .6 (this for the first container, 60%):
<FrameLayout
android:id="#+id/some_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent
app:layout_constraintWidth_percent=".6" >
For the ImageView, it is 60% of a viewgroup that itself is 60%, so it needs to be 36% of the parent:
<ImageView
android:id="#+id/some_other_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent
app:layout_constraintWidth_percent=".36" />
Another option is to make the ImageView parent a ConstraintLayout and then set the width of the ImageView to 60%, but that way your layout won't be flat.

Android Set view to be 20 px to the left of the containing view so its partially covered

I would like to cut off 20px from the left hand edge of my WebView. I can not do this inside the WebView therefore I thought i could have the WebView 20px wider than the containing view, and then simply lay it out so its 20px left of the containing view therefore blocking off this 20px on the left hand side.
They say a picture speaks a thousand words, so hopefully this diagram illustrates what I am trying to do.
I have a WebView inside a FrameLayout and my WebView's width is 20px wider than its parent view. How can I now position the WebView to the left 20px inside the FrameLayout?
I can not use RelativeLayout as when i do it appears to make my WebView the SAME width as the RelativeLayout which is not what I want as if i then moved it 20px left, there would be a 20px gap on the right hand side.
My Layout Code
The image contains the layout code I am using, where the "..." replace values which does not affect the WebView's placement inside the main view (such as id/background color etc). Below is my layout in more detail in case I am missing something.
<FrameLayout
android:id="#+id/my_container"
android:layout_width="60dp"
android:layout_height="120dp"
android:padding="8dp"
android:layout_margin="4dp"
android:background="#color/white" >
<WebView
android:id="#+id/my_webview"
android:layout_width="80dp"
android:layout_height="match_parent"/>
</FrameLayout>
I have tried changing the WebView to the following (addition marginLeft parameter) but it does not move the WebView to the left
<WebView
android:id="#+id/my_webview"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="-20px"/>
Try -ve margin
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="-20px"></WebView>

Android ImageView scaling conflict

I am creating ImageView in code:
ImageView vlogo = new ImageView(v.getContext());
RelativeLayout.LayoutParams vlogoParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
vlogoParams.addRule(RelativeLayout.ALIGN_TOP,tv_visitor.getId());
vlogoParams.addRule(RelativeLayout.ALIGN_LEFT, tv_visitor.getId());
vlogoParams.addRule(RelativeLayout.ALIGN_BOTTOM, tv_visitor.getId());
vlogo.setLayoutParams(vlogoParams);
vlogo.setImageResource(R.drawable.star);
rl.addView(vlogo);
The image is "scaled" by aligning it to TOP and BOTTOM of previously created tv_visitor view (that has been added to relative layout). But I asume that it isn't layedout yet(?). .requestLayout just before this code doesn't change a thing.
By doing that I'm setting ImageView's height to the height of tv_visitor view. Which is OK. However the width seems to stay original.
And here comes the problem. The width stays not scaled. The way I do that is making .setAdjustViewBounds(true); not working. How should I proceed then?
As requested in comments I provide more info:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/news_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000"
android:scrollbars="none">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/fragment_news2">
<View
android:id="#+id/anchor_n"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffbb00"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
</ScrollView>
The View is passed as an parameter and layout is gotten by:
RelativeLayout rl = (RelativeLayout) v.findViewById(R.id.fragment_news2);
The problem is due to the scaling of Imageview, since by default imageview is using ImageView.ScaleType.FIT_CENTER. As per the documentation FIT_CENTER performs the following operation:
Compute a scale that will maintain the original src aspect ratio, but
will also ensure that src fits entirely inside dst. At least one axis
(X or Y) will fit exactly. The result is centered inside dst.
Since the Image is resized and centered, you are seeing extra spaces on both left and right side. To avoid that set ScaleType to ImageView.ScaleType.FIT_END which in turn aligns the result to the right will solve the problem.
vlogo.setScaleType(ImageView.ScaleType.FIT_END);

Resize parent to match its child

I have a complex xml layout with part of it being:
...
<FrameLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/flexible_imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#drawable/gradient"
android:orientation="vertical"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingTop="8dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
...
The height of the FrameLayout #+id/parent must be determined at runtime because it is displayed above many other views, and they must be shown in the layout. This way the FrameLayout fills the remaining space perfectly (using height="0dp" and weight="1" properties).
The ImageView #+id/flexible_imageview receives an image from the network, and it always shows with the correct aspect ratio. This part is already ok as well. This View is the largest and should determine the size of the FrameLayout #+id/parent.
The problem is that when the image is drawn, the width of the FrameLayout #+id/parent is not adjusted to wrap and be the ImageView #+id/flexible_imageview as it should be.
Any help is appreciated.
-- update --
I've updated the layout to clarify some of the missing parts, and to add the reasoning behind all of it.
What I want is to have an Image (ImageView #+id/flexible_imageview) with unknown dimensions to have, on top of it, a gradient and some text on top of the gradient. I can't set the FrameLayout #+id/parent dimensions to both wrap_content because there is more Views after this Image that must be shown. If there's not enough space in the layout, the Image (ImageView #+id/flexible_imageview) is reduced until it all fits in the layout, but it should maintain its aspect ratio, and the gradient/texts on top of it.
The #drawable/gradient is just:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:endColor="#aa000000"
android:startColor="#00000000" />
</shape>
-- update 2 --
I added two images below to demonstrate what's happening, and what should happen:
Bug:
Correct:
If would help if you explained more about what you are trying to accomplish in your layout (not the layout itself but what should the user see on the screen and what are the other elements in the layout).
A FrameLayout with multiple children is usually a "code smell". Usually, FrameLayouts should have only one child element. So this makes me wonder whether there is something wrong with your design.
-- Edit --
If I understand correctly, you are trying the framelayout to wrap the content of the image but at the same time match the space left from the other layout views before/after the frame layout.
What is the parent view/layout of the frame layout?
I see a couple of problems with this design or your explanation:
You have framelayout width set to match parent, but you want to wrap the content of the image.
You want the imageView to be reduced but you are not taking into account the text views in the linear layout. You have them set to wrap content. So when the fame layout is small, you will not see all the textviews. (Unless you are resizing them as well somehow).
Sorry if this isn't helpful enough but it's difficult to understand what you are trying to accomplish with this layout. A sample use-case would help in providing you a better recommendation.
When a dimension (width / height) is MeasureSpec.EXACTLY adjustViewBounds will not effect it.
In your case, having android:width="match_parent" ensures that the image view is the size of the parent, regardless of adjustViewBounds.
It works to begin with because the height is wrap_content - the height is adjusted when the image is scaled to fill the width.
When you override the height to fit everything on the screen (this may not be a great idea to begin with), the width is still matching the parent and doesn't get adjusted. However, because the scale type is ScaleType.FIT_CENTER the image is scaled and positioned so that the entirety of it fits in the bounds of the ImageView (and centred.. hence the name).
If you turn on the debug option for drawing layout bounds, or look at your app using hierarchyviewer, you'll see that the image view is still matching the width of its parent.
There are a couple of ways you could do what you want.
Since you're already manually calculating the height, setting the width shouldn't be that hard.
Drawable drawable = imageView.getDrawable();
if (drawable != null && drawable.getIntrinsicWidth() > 0 && drawable.getIntrinsicHeight() > 0) {
int height = // however you calculate it
int width = height / (getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth());
}
You might also get away with
<ImageView
android:id="#+id/flexible_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:minWidth="9999dp" />
Even if this works, you probably wouldn't be able to use it in a horizontal LinearLayout using weights any more (for example, if you wanted a landscape variant of the layout), or a number of other scenarios.

How to mantain aspect ratio of elements while rotating a ScrollView?

Let's assume a device of 800x1280 pixels in portrait mode with the following layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none"
android:fadingEdgeLength="0dip" >
<LinearLayout
android:id="#+id/MyLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
and with android:configChanges="orientation" in the Activity manifest.
Dynamically I add two childs views to MyLinearLayout with Layout of width = MATCH_PARENT and height = getWindowManager().getDefaultDisplay().getHeight(). So, I can scroll vertically between the two childs, each occuping a entire screen.
Now, when the device gets in landscape, the child's width get the dimension of 1280, stretching from the original 800, because of the MATCH_PARENT attribute.
Vertically, they are not stretched, since they were created with a fixed height of 1280 originally, they keep with 1280 of height.
What's the proper way to stretch this views vertically?
If I try to child.setLayoutParams inside onConfigurationChanged to width = MATCH_PARENT and height = 2048 (which is 1280 * 1280/800), I get an exception.
I'm working with dynamically instantiated CanvasView (from the S-Pen SDK) childs. I was able to do what I wanted with the help of this answer.
I have inherented com.samsung.sdraw.CanvasView and overrided onMeasure to preserve aspect ratio the way I wanted, and I needed to call setEnableZoom(false) for each child to correct content stretching, it was stretching the contents in double in landscape mode, going out of the screen boundaries.

Categories

Resources