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.
Related
I have a CardView for RecyclerView items that contains an ImageView and a LinearLayout (actionBar)
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/communityImageCv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="30dp"
android:elevation="16dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/communityImageCl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/communityImageIv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/actionBar"
tools:src="#drawable/person_splash_2" />
<LinearLayout
android:id="#+id/actionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:background="#color/white"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:visibility="gone"
android:weightSum="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:visibility="visible">
<LinearLayout
android:id="#+id/loveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="#+id/lovedIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:src="#drawable/loved_heart_empty">
</ImageView>
<TextView
android:id="#+id/lovedText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/radikal"
android:textColor="#color/black"
android:textSize="10sp"
tools:text="#string/love_this">
</TextView>
</LinearLayout>
<LinearLayout
android:id="#+id/shareButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
tools:visibility="visible"
>
<ImageView
android:id="#+id/shareIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:src="#drawable/share_arrow_empty">
</ImageView>
<TextView
android:id="#+id/sharedText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/radikal"
android:textColor="#color/black"
android:textSize="10sp"
tools:text="#string/shared_this">
</TextView>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
The LinearLayout is programmed to appear and disappear based on an attribute of the model. Afterward, the ImageView's height is changed programmatically based on another attribute (I'm only including this part in case it's relevant):
fun bind(model: CommunityOffer) {
if (model.isLikeable || model.isShareable) {
actionBar.visibility = View.VISIBLE
} else{
actionBar.visibility = GONE
}
if (!model.mediaAspectRatio.isNullOrEmpty()) {
val aspectRatioSplit = model.mediaAspectRatio.split(":")
widthRatio = Integer.parseInt(aspectRatioSplit[0])
heightRatio = Integer.parseInt(aspectRatioSplit[1])
communityImageIv.scaleType = ImageView.ScaleType.FIT_XY
height = ((width.toFloat() / widthRatio.toFloat()) * heightRatio).toInt()
communityImageIv.layoutParams.height = height
communityImageCl.layoutParams.height = height
Glide.with(itemView.context).load(model.coverUrl).apply(RequestOptions().override(width, height).skipMemoryCache(true)).listener(requestListener).into(communityImageIv)
} else {
communityImageIv.scaleType = ImageView.ScaleType.CENTER_CROP
widthRatio = 25
heightRatio = 21
height = ((width.toFloat() / widthRatio.toFloat()) * heightRatio).toInt()
communityImageIv.layoutParams.height = height
communityImageCl.layoutParams.height = height
Interactors.glide.loadImage(model.coverUrl, communityImageIv, requestListener)
}
Rather than increasing in size to hold both of its child views, the CardView moves up the ImageView by in proportion to the size of the actionBar, cutting off the top of the ImageView:
Without actionBar:
With actionBar:
This looks how it's supposed to in the display panel of the .xml file, but not at run time. How do I make the CardView wrap its children appropriately at run time?
I think you should try with linear layout insted of constraintLayout as a child layout of cardView and than set your all child widgets in linearLayout i hope it might be work.
like this
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/communityImageCv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="30dp"
android:elevation="16dp">
<LinearLayout
android:id="#+id/communityImageCl"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
//set here your all child widgets
</LinearLayout>
</androidx.cardview.widget.CardView>
I have made a fragment layout for which code is shown below.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/bill_display_id"
android:layout_gravity="start"
tools:context=".HomePage">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/zoom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/bill_text_id"
/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scroll_horiz_id">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/btn_default"
android:orientation="horizontal"
android:id="#+id/zoom_lin">
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/prd_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/rate_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/qty_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qty"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/price_id">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price"
android:layout_gravity="center"
/>
</LinearLayout>
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#android:color/black" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>
Now i have a function setZoom (shown below) in which i am trying to set height and width of horizontal linear layout (id = zoom_lin).
But i am seeing that only height is getting set and not width.
protected void setZoom(float val)
{
View horz_lin = rootView.findViewById(R.id.zoom_lin);
ViewGroup.LayoutParams lp = horz_lin.getLayoutParams();
lp.width = 300; // 300 is a random number for testing only
lp.height = 600; // 600 is a random number for testing only
horz_lin.requestLayout();
}
Similarly if i try to set height and width for vertical linear layout (id = zoom), i see that only width is getting set and not height.
Is there any rule which forbids us from setting the width for horiizontal linear layout and height for vertical linear layout.
Please excuse me if am missing something trivial as i am a beginner in android development.
You need to set the updated layoutParams back to the linear layout:
protected void setZoom(float val)
{
LinearLayout horz_lin = (LinearLayout)rootView.findViewById(R.id.zoom_lin);
ViewGroup.LayoutParams lp = horz_lin.getLayoutParams();
lp.width = 300; // 300 is a random number for testing only
lp.height = 600; // 600 is a random number for testing only
horz_lin.setLayoutParams(lp); // ADD THIS LINE
horz_lin.requestLayout();
}
I am trying to achieve the following layout for my expandable listview.
Layout
Problem:
On android previewer the layout looks as expected:
refer to first image in attachment below.
However, when I run it on an emulator or a device the second TextView is not displayed.
refer to second image in attachment below
I have to set the height of the second ImageView (ivGroupIndicator) to match parent in order for the second TextView to display. But this stretches the expandable arrow icon.
refer to last image in attachment below
Images
Here is my layout.xml
<?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="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:src="#drawable/ci_hand_cursor"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:layout_weight="0.8">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dhelhi Belhi"
android:fontFamily="sans-serif"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/colorPrimaryText"
android:paddingBottom="2dp"/>
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="20-September-2017"
android:fontFamily="sans-serif"
android:textSize="14sp"
android:textColor="#color/colorSecondaryText"
android:paddingBottom="5dp"/>
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:background="#drawable/group_indicator"
android:layout_gravity="center"/>
</LinearLayout>
What am i missing here?
This should do the trick:
Use 0dp as height/width when using weights
Weight can just be 1 (not 0.8)
Use equal weights on the 2 text views so they share equal vertical space
Set gravity to center_vertical on text views so the text is centered.
set scale type on image so it doesn't stretch.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/ci_hand_cursor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="Dhelhi Belhi"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="20-September-2017"
android:textColor="#color/colorSecondaryText"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/group_indicator"
android:scaleType="centerInside" />
</LinearLayout>
The problem maybe is that you set the height of the parent layout to 50dp. Try to set it to wrap content, and use height=0dp and weight=1 for the vertical LinearLayout
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 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.