android scale ImageView parent clip scaled imageView - android

i have imageView inside LinearLayout the imageView scaled by
setScaleX(e);
setScaleY(e);
e is float value
and the xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="wrap_content"
android:clipChildren="false"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal">
<test.blabla.com.app.scledImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/scaled"
android:src="#drawable/emoji_1f3b0_64"
android:layout_gravity="center_vertical|center_horizontal" />
</LinearLayout>
now this image before i scale ImageView
after scale imageView
the parent LinearLayout not effected by scale and its height and width still same
i try use this for linearLayout while scale
parent.invalidate();
also i tried
parent. postInvalidate();
still same problem

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
>
<ImageView
android:id="#+id/iv_logo"
android:layout_width="180dp"
android:layout_height="180dp"
android:src="#drawable/app_logo"
android:contentDescription="#string/app_name"
/>
</LinearLayout>
Inside your activity set scale of ImageView like this:
btnScaleImage.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
iv_logo.setScaleX(0.5f);
iv_logo.setScaleY(0.5f);
}
});

i solve it by scale width and height now parent width and height changed when its child size changed
parent.invalidate();

Related

Android layout scaling (for elements of a given size in dp)

Three FrameLayout's of different background colors to form a strip.
Each FrameLayout has the size specified in dp.
[
The strip is long and does not fit on the screen.
How to scale the strip to maintain the aspect ratio and without changing the dimensions dp?
[
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:measureAllChildren="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layoutDirection="ltr"
android:rotation="0">
<FrameLayout
android:layout_width="200dp"
android:layout_height="42dp"
android:background="#508da6"
/>
<FrameLayout
android:layout_width="400dp"
android:layout_height="42dp"
android:background="#494949"
/>
<FrameLayout
android:layout_width="240dp"
android:layout_height="42dp"
android:background="#ff0000"
/>
</LinearLayout>
</FrameLayout>
There is no need to inflate three whole FrameLayout just for that.View will do just fine. Also you should not give fixed widths since there is no way to make it work for all screen sizes.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:measureAllChildren="true">
<LinearLayout
android:id="#+id/strip"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layoutDirection="ltr"
android:rotation="0">
<View
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#508da6"
/>
<View
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#494949"
/>
<View
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
/>
</LinearLayout>
</FrameLayout>
set height on runtime
LinearLayout stripLayout = (LinearLayout)findVieById(R.id.strip);
stripLayout .getViewTreeObserver().addOnGlobalFocusChangeListener(new OnGlobalFocusChangeListener() {
#Override
public void onGlobalFocusChanged(View oldFocus, View newFocus) {
// TODO Auto-generated method stub
int width = stripLayout .getWidth();
int height = //calculate your height//
FrameLayout.LayoutParams params = stripLayout .getLayoutParams();
params.height = height;
stripLayout .setLayoutParams(params);
if (Build.VERSION.SDK_INT < 16) { stripLayout .getViewTreeObserver().removeGlobalOnLayoutListener(this); }
else { stripLayout .getViewTreeObserver().removeOnGlobalLayoutListener(this); }
}
});

Squaring Up A Relative Layout / Image View

So I've read quite a few questions on here as well as tried lots of stuff to try to get this to work. I'm either misunderstanding all of the examples I've read or am looking at the wrong stuff.
What I'm trying to do is set up a relative layout within a relative layout that contains an image view. I want to be able to have the relative layout match the size of the imageview (which I want scaled based on specific screen size) to keep a constant square size. This view will contain buttons as well.When I run the below code I get a square for the image view but the buttons are displayed on the top of the screen. So it appears to me that the imageview is properly scaling down into a square but the layout itself is still matching the overall screen size. I have an XML file set up as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:id="#+id/layout_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/bg" />
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_one" />
....
</RelativeLayout>
</RelativeLayout>
Java code below:
public class MainActivity extends ActionBarActivity {
RelativeLayout layoutTwo, mainLayout;
Button buttonOne, buttonTwo, buttonThree, buttonFour, buttonFive;
Button buttonSix, buttonSeven, buttonEight, buttonNine;
ImageView scalingBackground;
int screenWidth, screenHeight, finalSquare;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mainLayout = (RelativeLayout) findViewById(R.id.main_layout);
layoutTwo = (RelativeLayout) findViewById(R.id.layout_two);
scalingBackground = (ImageView) findViewById(R.id.image_view);
initializeButtons();
squareBackground();
}
private void squareBackground() {
screenWidth = mainLayout.getLayoutParams().width;
scalingBackground.getLayoutParams().height = screenWidth;
scalingBackground.getLayoutParams().width = screenWidth;
layoutTwo.getLayoutParams().height = screenWidth;
layoutTwo.getLayoutParams().width = screenWidth;
}
Not quite sure whats going on here, I'd appreciate a kick in the right direction. Thanks
You can use a custom imageview in which height and width are same.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:id="#+id/layout_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>
<com.packagename.SquareImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/bg" />
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_one" />
....
</RelativeLayout>
</RelativeLayout>
Create a class for custom imageview.
public class SquareImageView extends ImageView {
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
setMeasuredDimension(width, width);
}
}

Resize ImageView even if ScaleType

I have a problem, I'm trying to resize a ImageView and its parent container but the problem is that the ImageView has ScaleType:"matrix", and I cant`t resize the image or its container
this is my code:
public void resize() {
LayoutParams contet = relativeLayout.getLayoutParams();
LayoutParams photo = image.getLayoutParams();
int widPhoto = image.getWidth();
int hePhoto = image.getHeight();
photo.width = ((widPhoto * 6) / 2);
photo.height = ((hePhoto * 6) / 2);
contenedor.width = widPhoto * 2;
contenedor.height = hePhoto * 2;
relativeLayout.setLayoutParams(contenedor);
image.setLayoutParams(photo );
}
and my xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/containerImg"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="matrix" />
</RelativeLayout>
setLayoutParams() does nothing but remove the property ScaleType if I resize everything correctly, but I cant´t remove that property. Any way to resize? they could put the property ScaleType: NONE? thank you very much and sorry for my bad English
To resize your ImageView, I suggest to use FrameLayout:
<FrameLayout
android:id="#+id/fm_id"
android:layout_width="img_width"
android:layout_height="img_height"
... ...
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:gravity="center"
/>
</FrameLayout>
then you just need to resize 'img_width' and 'img_height' in your codes
I got the solution, if you are using the Layout ScaleType: matrix
you need to use matrix.setScale (); for Resizing

Define maximum RelativeLayout size

I have to define 5 layouts on the screen and place them like a 3x3 grid. Layouts is empty.
At some moment I want programmatically to add some view on one layout and that view mustn't grows over allocated size of layout. In other words I want to have layout in which to put any view and it will be guaranty that it won't grows over that layout. Important note: I don't have rights to change manually size of added view, I only can to control its maximum size.
I have right now such layout:
<RelativeLayout
android:id="#+id/pluginsLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mainButtons"
android:layout_below="#+id/paramsLayout">
<RelativeLayout
android:id="#+id/capturingPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="fill_horizontal|left"
android:layout_above="#+id/processingPluginLayout">
</RelativeLayout>
<RelativeLayout
android:id="#+id/processingPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="fill_horizontal|left"
android:layout_above="#+id/filterPluginLayout">
</RelativeLayout>
<RelativeLayout
android:id="#+id/filterPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="fill_horizontal|left|bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true">
</RelativeLayout>
<RelativeLayout
android:id="#+id/exportPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="fill_horizontal|right"
android:layout_above="#+id/viewfinderPluginLayout">
</RelativeLayout>
<RelativeLayout
android:id="#+id/viewfinderPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="fill_horizontal|bottom|right"
android:layout_toLeftOf="#+id/filterPluginLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true">
</RelativeLayout>
</RelativeLayout>
And I added new view in code:
public void addVFPluginView(View view)
{
((RelativeLayout)MainScreen.thiz.findViewById(R.id.viewfinderPluginLayout)).addView(view);
}
I expect to got like this behaviour:
But I got only this, view fill entire parent layout:
Note: I use API8 (don't have GridLayout)
u can use grid layout in API8.
I've managed to solve this issue.
The main idea was to control view's sizes by myself programmatically.
I calculate appropriate proportion for each zone and when somebody add a new view to some of this layout I check suitability of the size of this view to the allocated size of layout. If size is not suitable I modify LayoutParams for this View.
Here is the xml of empty layouts:
<RelativeLayout
android:id="#+id/pluginsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mainButtons"
android:layout_below="#+id/paramsLayout">
<LinearLayout
android:id="#+id/capturePluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true">
</LinearLayout>
<LinearLayout
android:id="#+id/processingPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true">
</LinearLayout>
<LinearLayout
android:id="#+id/filterPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true">
</LinearLayout>
<LinearLayout
android:id="#+id/exportPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true">
</LinearLayout>
<RelativeLayout
android:id="#+id/viewfinderPluginLayout"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
And like that I manage the size of adding views:
public void addVFPluginView(View view)
{
//Get maximum width and height for such plugins
int layoutHeight = this.getViewfinderLayoutHeight();
int layoutWidth = this.getViewfinderLayoutWidth();
//Calculate appropriate size of added plugin's view
android.widget.RelativeLayout.LayoutParams viewLayoutParams = (android.widget.RelativeLayout.LayoutParams)view.getLayoutParams();
viewLayoutParams = this.getTunedRelativeLayoutParams(view, viewLayoutParams, layoutWidth, layoutHeight);
//Get fixed maximum size for this plugin type
public int getViewfinderLayoutWidth()
{
return ((RelativeLayout)MainScreen.thiz.findViewById(R.id.pluginsLayout)).getWidth()/2;
}
public int getViewfinderLayoutHeight()
{
return (int)(((RelativeLayout)MainScreen.thiz.findViewById(R.id.pluginsLayout)).getHeight()*0.7);
}
((RelativeLayout)MainScreen.thiz.findViewById(R.id.viewfinderPluginLayout)).addView(view, viewLayoutParams);
}
android.widget.RelativeLayout.LayoutParams getTunedRelativeLayoutParams(View view, android.widget.RelativeLayout.LayoutParams currParams, int goodWidth, int goodHeight)
{
int viewHeight, viewWidth;
if(currParams != null)
{
viewHeight = currParams.height;
viewWidth = currParams.width;
if(viewHeight > goodHeight || viewHeight <= 0)
viewHeight = goodHeight;
if(viewWidth > goodWidth || viewWidth <= 0)
viewWidth = goodWidth;
currParams.width = viewWidth;
currParams.height = viewHeight;
view.setLayoutParams(currParams);
}
else
{
currParams = new android.widget.RelativeLayout.LayoutParams(goodWidth, goodHeight);
view.setLayoutParams(currParams);
}
return currParams;
}
Finally, next issue is for several views with suitable sizes but in sum they're bigger than allocated size. Maybe I'll just straightly count sizes of views and if the sum with the size of next adding view will be more than allocated size I just disallow to add this view.

Animation and layout issue with my new application?

I am trying to make a new layout page where I want to put two buttons, and on the above of each button I need to give a frame animation. so on loading the buttons are looking like inside the bubbles. Following is the code I am using to achieve this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_full">
<Button android:id="#+id/btnMusic"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:layout_marginLeft="215dp"
android:layout_marginTop="140dp"
android:background="#drawable/icon"/>
<ImageView android:id="#+id/imgMusic"
android:layout_width="150dp"
android:layout_height="150dp"
android:gravity="center"
android:layout_marginLeft="170dp"
android:layout_marginTop="100dp"
android:background="#drawable/button_background"/>
<Button android:id="#+id/btnMovies"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:layout_marginLeft="405dp"
android:layout_marginTop="140dp"
android:background="#drawable/icon1"/>
<ImageView android:id="#+id/imgMovies"
android:layout_width="150dp"
android:layout_height="150dp"
android:gravity="center"
android:layout_marginLeft="360dp"
android:layout_marginTop="100dp"
android:background="#drawable/button_background"/>
</RelativeLayout>
My jav code is like this:
public class BubbleActivity extends Activity {
/** Called when the activity is first created. */
/** Called when the activity is first created. */
Button btnMusic, btnMovies ;
ImageView imgMusic,imgMovies;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
btnMusic = (Button)findViewById(R.id.btnMusic);
btnMovies = (Button)findViewById(R.id.btnMovies);
btnMusic.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
Intent intent = new Intent(PixieActivity.this,Splash.class);
startActivity(intent);
}
});
ImageView imgMusic = (ImageView)findViewById(R.id.imgMusic);
imgMusic.setBackgroundResource(R.drawable.frame_animation);
AnimationDrawable frameAnimation =(AnimationDrawable) imgMusic.getBackground();
if (frameAnimation.isRunning()) {
frameAnimation.stop();
}
else {
frameAnimation.start();
}
ImageView imgMovies = (ImageView)findViewById(R.id.imgMovies);
imgMovies.setBackgroundResource(R.drawable.frame_animation);
AnimationDrawable frameAnimation1 =(AnimationDrawable) imgMovies.getBackground();
if (frameAnimation1.isRunning()) {
frameAnimation1.stop();
}
else {
frameAnimation1.start();
}
}}
But due to the margins the button layout became distracted in different phone resolutions. Is there any other way to achieve the same layout with device resolution independant. Also I want to add the bubble animation to each of the icons i will make in next pages. Please help.
I would suggest not hard-coding the margins, and instead wrap the Buttons and ImageViews in a LinearLayout each, then set the spacing using layout_weight so it is perfectly scalable.
The actual layout choice depends on if you need the button to be exactly 80x80 and the ImageView to be exactly 150x150.
For instance (pseudo-code: obviously many parameters are left out) :
<RelativeLayout>
<LinearLayout id="buttons" >
<LinearLayout layout_width = "0dp" layout_weight = "1"> <!-- 0 width is important! -->
<Button layout_gravity="center" />
</LinearLayout>
<LinearLayout layout_width = "0dp" layout_weight = "1">
<Button layout_gravity="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout id="images" align with #buttons>
<LinearLayout layout_width = "0dp" layout_weight = "1">
<ImageView layout_gravity="center" />
</LinearLayout>
<LinearLayout layout_width = "0dp" layout_weight = "1">
<ImageView layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
And just make sure set the LinearLayouts "buttons" and "images" to the same height and full width so that the buttons and images overlap. More about layout_weight: What does android:layout_weight mean?
If you do not need the Buttons and ImageViews to be an exact size, think about sizing them by weight as well. Then no matter what screen you are on, if you tell a button to take up 1/4 of it through layout_weight, it will never be distorted

Categories

Resources