I need to place 6 squares horizontally across the width of the screen. I know that I can achieve this as follows:
<LinearLayout
android:weightSum="6"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/firstSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="60dp"/>
<View
android:id="#+id/secondSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="60dp"/>
.
.
.
</LinearLayout>
I want to ensure that the height of each View in LinearLayout is equal to its width.
Is there any way I can achieve it directly via XML without using GridLayout, since weights are supported from API 21. My minimum SDK is API 16. I know that I can achieve this programmatically by getting the width of each View object and then setting its height equal to its width, but I want to avoid it.
here is java code for CustomView.java
public class CustomView extends LinearLayout {
public CustomView(Context context) {
super(context);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
this.setMeasuredDimension(parentWidth, parentWidth);
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
and sample_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="6">
<CustomView
android:id="#+id/firstSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_height="wrap_content"/>
<CustomView
android:id="#+id/secondSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_height="wrap_content"/>
<CustomView
android:id="#+id/thirdSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_height="wrap_content"/>
<CustomView
android:id="#+id/fourthSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_height="wrap_content"/>
<CustomView
android:id="#+id/fifthSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_height="wrap_content"/>
<CustomView
android:id="#+id/sixthSquare"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:layout_height="wrap_content"/>
may be helpful..
<LinearLayout
android:layout_gravity="center_horizontal"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="50dp">
<View
android:layout_width="50dp"
android:layout_height="match_parent"/>
<View
android:layout_width="50dp"
android:layout_height="match_parent"/>
<View
android:layout_width="50dp"
android:layout_height="match_parent"/>
<View
android:layout_width="50dp"
android:layout_height="match_parent"/>
<View
android:layout_width="50dp"
android:layout_height="match_parent"/>
<View
android:layout_width="50dp"
android:layout_height="match_parent"/>
</LinearLayout>
Related
In my xml file I set each small circle (ImageView) to be the size of 25% of the screen with a Linear View and layout_weights.
Here is a screen shot from my phone (how it is supposed to look)
On my tablet it does not change the size to be 25% of the screen (this is how it looks)
My code consists of three LinearLayout's each containing ImageView's with weights of 0.25 out of 1.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
xmlns:ads="http://schemas.android.com/apk/res-auto">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView12"
android:src="#drawable/circle_big"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03125" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:id="#+id/imageView12"
android:src="#drawable/circle_white"
android:onClick="changeToScreenSelectLayout"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.09375" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:id="#+id/imageView12"
android:src="#drawable/circle_white"
android:onClick="changeToScreenSelectLayout"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.09375" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:id="#+id/imageView12"
android:src="#drawable/circle_white"
android:onClick="changeToScreenSelectLayout"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03125" />
</LinearLayout>
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:rotation = "120">
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03125" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:id="#+id/imageView12"
android:src="#drawable/circle_white"
android:onClick="changeToScreenSelectLayout"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4375" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:id="#+id/imageView12"
android:src="#drawable/circle_white"
android:onClick="changeToScreenSelectLayout"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03125" />
</LinearLayout>
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:rotation = "60">
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03125" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:id="#+id/imageView12"
android:src="#drawable/circle_white"
android:onClick="changeToScreenSelectLayout"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4375" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:id="#+id/imageView12"
android:src="#drawable/circle_white"
android:onClick="changeToScreenSelectLayout"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03125"/>
</LinearLayout>
</RelativeLayout>
You cannot use a png file as your circle_white. You could technically make this work if you choose the correct android:scaleType, but it would result in horribly aliased renderings.
I would first delete your existing pngs (From each resource bucket) since they cannot be used for this. Then make a new file in drawable named "circle_white.xml". Put this in it, this will draw a circle with no intrinsic size. I.E. it will just fill whatever you render it with.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#fff"/>
</shape>
And then change from using ImageView's with a src of circle_white to a HeightMatchesWidthView with the background set to this new #drawable/circle_white. You would need to ensure the Views height matches the width which I did in a view extension below. To use this just make a new class somewhere and paste this in. In xml reference it by instead of having ImageView do com.whatever.HeightMatchesWidthView where the com.whatever is whatever package you put this in.
public class HeightMatchesWidthView extends View {
public HeightMatchesWidthView(final Context context) {
super(context);
}
public HeightMatchesWidthView(final Context context, final AttributeSet attrs) {
super(context, attrs);
}
public HeightMatchesWidthView(final Context context, final AttributeSet attrs, final int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
setMeasuredDimension(width, width);
}
#Override
protected void onSizeChanged(final int w, final int h, final int oldw, final int oldh) {
super.onSizeChanged(w, w, oldw, oldh);
}
}
Instead of the HeightMatchesWidthView you could also use a PercentRelativeLayout instead and use that to force them to be square, and the correct size without having to extend View to add support for forcing square.
I want to fit an Imageview according to Height and width of my RelativeLayout without disturbing its ratio. I am using a LinearLayout with a weightSum and adding two other layouts ie RelativeLayout with weight 20 and LinearLayout with weight 80. I am adding the imageview to the RelativeLayout to take up weight 20 but currently, my image takes up the width to its content and does not follow the width of the parent, thus resulting in pushing the other layout.
My Layout is as below:
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/order_detail_container"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="1dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="20">
<Droid.CenterFitImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:id="#+id/imgArticleThumb"
android:src="#drawable/Icon" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:padding="5dp"
android:orientation="vertical">
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtCategory"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#color/CatTitle"
android:textSize="12sp"
android:text="Category" />
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txtTitle"
android:ellipsize="end"
android:singleLine="true"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#000000"
android:textSize="16sp"
android:text="Title" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
CenterFitImageView.cs
protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
try
{
if (Drawable != null)
{
int w = MeasureSpec.GetSize(widthMeasureSpec);
int h = (int)Math.Ceiling((float)w * (float)Drawable.IntrinsicHeight / (float)Drawable.IntrinsicWidth);
SetMeasuredDimension(w, h);
}
else
base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
}
catch (Exception e)
{
base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
Expected output:
My output:
layout_width="wrap_content" on your root LinaerLayout, is where you have gone wrong. You have to use match_parent if you need your views to be aligned properly according to their weights.
Just remember that if you are using layout_weights and weightSum, then you have to give the root layout and specific width or height depending upon the arrangement. wrap_content, means display your layout, according to whatever size the child is.
So the resulting code will be
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal">
....
....
</LinearLayout>
And this is the output that I got
The first RelativeLayout with the ImageView is taking 20, and the other one with a TextView is taking 80.
First of all why you didn't use Linearlayout instead of RelativeLayout. When you are using all LinearLayout.
I will do this in this way.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/order_detail_container"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="40"
android:gravity="center">
<Droid.CenterFitImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:id="#+id/imgArticleThumb"
android:src="#drawable/Icon" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60"
android:orientation="vertical"
android:layout_marginLeft="5dp">
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtCategory"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#color/CatTitle"
android:textSize="12sp"
android:text="Category" />
<Droid.CustomTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtTitle"
android:ellipsize="end"
android:singleLine="true"
card_view:customFont="Fonts/Roboto-Bold.ttf"
android:textColor="#000000"
android:textSize="16sp"
android:text="Title" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
Just used android:layout_height="wrap_content" instead of match_parent for ImageView and also set your textview height and width wrap_content.
replace the layout_width="0" of the image with maxwidth.
I have created a custom view in which a bitmap is drawn. The problem is that the custom view takes up the whole screen regardless of the layout width/height I set it or it's parent.
I have been going through the forums and I read about overriding the onmeasure method, but for me that returns zero so now the width and height are set to zero.
Here is what I have done so far:
EDIT
FULL xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:sliderView="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black">
<RelativeLayout
android:id="#+id/cameraLayout"
android:layout_width="wrap_content"
android:background="#color/black"
android:layout_height="wrap_content">
<SurfaceView
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/surfaceview">
</SurfaceView>
<LinearLayout
android:layout_above="#+id/beerName"
android:id="#+id/beerColours"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/beer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/beer1"
android:layout_weight="1"/>
<ImageView
android:id="#+id/beer2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/beer2"
android:layout_weight="1"/>
<ImageView
android:id="#+id/beer3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/beer3"
android:layout_weight="1"/>
<ImageView
android:id="#+id/beer4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/beer4"
android:layout_weight="1"/>
<ImageView
android:id="#+id/beer5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/beer5"
android:layout_weight="1"/>
<ImageView
android:id="#+id/beer6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/beer6"
android:layout_weight="1"/>
</LinearLayout>
<EditText
android:background="#color/black"
android:id="#+id/beerName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_above="#+id/seperator"
android:hint="#string/beer_name"
android:textColorHint="#color/white"
android:gravity="center_horizontal"
/>
<ImageView
android:id="#+id/seperator"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dotted_separator"
android:layout_above="#+id/sliderViewLayout"/>
<RelativeLayout
android:id="#+id/sliderViewLayout"
android:layout_above="#+id/bottomsUp"
android:background="#color/black"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.test.bottomsup.custom_slider_library.sliderView
android:layout_marginLeft="15dp"
android:id = "#+id/sliderview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
sliderView:diagonalSlide="false"
sliderView:translateAxisX="false"
/>
<ImageView
android:id="#+id/slider_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/glass"
android:layout_centerHorizontal="true"
android:layout_alignParentLeft="true">
</ImageView>
</RelativeLayout>
<com.test.bottomsup.custom.Components.ShadyButton
android:id="#+id/bottomsUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_red"
android:textColor="#color/white"
android:text="#string/button_bottoms_up"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</RelativeLayout>
In my fragment where I set the custom view is a follows:
sliderView slider = (sliderView)view.findViewById(R.id.sliderview);
slider.setImageResource(R.drawable.beer_with_arrows);
slider.requestLayout();
Then in my custom view class I call onMeasure as follows:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int wrapHeight = getWidth();
int wrapWidth = getHeight();
this.setMeasuredDimension(wrapHeight, wrapWidth);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
wrapHeight and wrapWidth are returned as zero. Could anyone offer some advice? I'm new to custom views etc so I'd appreciate the dig out ;)
****EDIT****
I should add that this is a slider, so in my custom view I am using the onscroll method...I imagine that might change things. So I have a frame image under which my view is scrolled, so I guess I need to set the height of my view to twice the frame height??
Can anyone help?
layout structure
I want to build a UI like this http://postimg.cc/image/fihidv1rv/ .
Here is my xml code for it,
for my design, I want "EFFECT" & "CAMERA" to combine as one ImageView like "SHOP" in the link
so there will be total 5 ImageViews, and I set the id as they named in the link
the problem is, how can I set the height and width with percentage?
effect+camrea: height 25%,width 100%
collage: height 25%,width 50%
draw: height 25%,width 50%
photo: height 50%,width 50%
shop: height 25%,width 100%
<RelativeLayout android:id="#+id/mainContent" android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="horizontal" android:background="#ffffff">
<ImageView
android:id="#+id/img_effect+camera"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/a" />
<ImageView
android:id="#+id/img_collage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/img_effect+camera"
android:src="#drawable/b" />
<ImageView
android:id="#+id/img_draw"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/img_effect+camera"
android:layout_toRightOf="#+id/img_collage"
android:src="#drawable/c" />
<ImageView
android:id="#+id/img_photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/img_collage"
android:layout_below="#+id/img_draw"
android:src="#drawable/d" />
<ImageView
android:id="#+id/img_shop"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/img_photo"
android:src="#drawable/e" />
</RelativeLayout>
You can consider using android:layout_weight param in the layout
http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#attr_android:layout_weight
<LinearLayout android:id="#+id/mainContent" android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:background="#ffffff">
<!-- height 25% -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/img_effect"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/a" />
<ImageView
android:id="#+id/img_camera"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/a" />
</LinearLayout>
<!-- height 50% -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="horizontal">
<!-- width 50% -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<!-- height 50%% -->
<ImageView
android:id="#+id/img_collage"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/a" />
<!-- height 50%% -->
<ImageView
android:id="#+id/img_draw"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/a" />
</LinearLayout>
<!-- width 50% -->
<ImageView
android:id="#+id/img_photo"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:src="#drawable/b" />
</LinearLayout>
<!-- height 25%% -->
<ImageView
android:id="#+id/img_shop"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/e" />
Its hard to it in Xml, you can do it by code doing some calculations.
How to do:
Get mainContent height & width, which is your parent view.
GetLayoutparams of each imageVIew, and set height & width,by calculating percentage height & width
Sample Code:
(in activity)
final View parentView= findViewById(R.id.mainContent);
final ImageView effect_camera= (ImageView)findViewById(R.id.img_effect+camera);
effect_camera.post(new Runnable(){
#Override
public void run(){
int height=parentView.getHeight();
int width=parentView.getWidth();
RelativeLayout.LayoutParams lp= (RelativeLayout.LayoutParams)effect_camera.getLayoutParams();
int percentHeight=height*.25;
int percentWidth= width*1;
lp.height=percentHeight;
lp.width=percentWidth;
effect_camera.setLayoutParams(lp);
}
});
I have an Android horizontal LinearLayout with 5 images in it. I want the 5 images to fit the screen horizontally while keeping the aspect ratio. Each image is 128x128 pixel.
The problem is that while the width is set like what I wanted the height of the images remain the same, so they look like this on a bigger screen (this is the Nexus 7):
What I have now:
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:cropToPadding="true"
android:scaleType="fitXY"
android:src="#drawable/image01" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/image02" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/image03" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/image04" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/image05" />
</LinearLayout>
Thanks for the help
change the scaleType to centerInside or fitCenter and height to match parent.
try to surround the imageview with a horizontal LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_gravity="center">
<ImageView
android:id="#+id/btnHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="btnhome" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_gravity="center">
<ImageView
android:id="#+id/btnGames"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="btngames" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_gravity="center">
<ImageView
android:id="#+id/btnNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="btnnews"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_gravity="center">
<ImageView
android:id="#+id/btnPayment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="btnpayment"/>
</LinearLayout>
then, change the scaleType to fitCenter.
it will cause your pictures to have a correct ratio event you view it in a wider screen.
I found some code to create a square view that I could then use to render my own custom graphics in. You should be able to something like this:
public class SquareImageView extends ImageView {
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
int length = Math.min(width, height);
setMeasuredDimension(length, length);
}
}
I haven't tried this squaring code in a LinearLayout but when use RelativeLayout where it was positioned first and attached to three sizes of the parent it worked nicely. This is hoping that ImageView does the right thing with the image, otherwise you're going to have to override the onDraw() method too.