Following is my xml code. In my LinearLayout. I have two child views , which are aligned using weightSum. I have an ImageView whose Width is aligned properly due to weightSum, but the problem is with its height. I want it's Height to be same dimensions as of its width.
Is there any solution without using static dp values.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<LinearLayout
android:background="#drawable/background_gradien_yellow"
android:weightSum="10"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_weight="6"
android:id="#+id/startbtn"
android:textStyle="bold"
android:alpha="0.8"
android:textColor="#fff"
android:text="#string/start"
android:layout_centerInParent="true"
android:background="#drawable/background_gradient_circular"
android:layout_width="match_parent"
android:layout_height="150dp"/>
<LinearLayout
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:orientation="vertical"
android:layout_weight="3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textColor="#color/White"
android:id="#+id/tv_challange_title"
android:textSize="20sp"
android:text="Early-Bird Challange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tv_challange_desc"
android:alpha="0.5"
android:textColor="#color/White"
android:textSize="15sp"
android:layout_marginTop="5dp"
android:text="Take 100 steps five times within.. "
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Found solution by using custom ImageView.
Its the Best solution. Setting Height same as width in custom ImageView class.
Java code:
public class SquareImageView extends ImageView {
public SquareImageView(Context context) {
super(context);
}
public SquareImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
setMeasuredDimension(width, width);
}
}
XML code
<com.mypakage.utils.SquareImageView
android:background="#drawable/fitbit"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
I think you can do it with your activity's java code.
Something like this one:
android.view.ViewGroup.LayoutParams mParams = imageView.getLayoutParams();
mParams.height = imageView.getWidth();
imageView.setLayoutParams(mParams);
Make custom ImageView, then set its height same as width.
check this answer
You set ImageView's scaleType as centerInCrop
android:scaleType="centerInCrop"
you can try this just give weights to inner linear layout also
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="5dp"`enter code here`
android:paddingLeft="5dp"
android:paddingRight="5dp">
<LinearLayout
android:background="#color/colorPrimary"
android:weightSum="10"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_weight="6"
android:id="#+id/startbtn"
android:textStyle="bold"
android:alpha="0.8"
android:textColor="#fff"
android:text="start"
android:layout_centerInParent="true"
android:background="#drawable/common_ic_googleplayservices"
android:layout_width="match_parent"
android:layout_height="150dp"/>
<LinearLayout
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:orientation="vertical"
android:layout_weight="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<TextView
android:textColor="#fff"
android:id="#+id/tv_challange_title"
android:textSize="20sp"
android:text="Early-Bird Challange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:id="#+id/tv_challange_desc"
android:alpha="0.5"
android:textColor="#000"
android:textSize="15sp"
android:layout_marginTop="5dp"
android:text="Take 100 steps five times within.. "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
use an image with same size on width and height (better .9patch)
<ImageView
android:layout_weight="6"
android:id="#+id/startbtn"
android:textStyle="bold"
android:alpha="0.8"
android:textColor="#fff"
android:text="start"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:src="#drawable/background_gradient_circular"
android:scaleType="fitCenter"
android:layout_height="match_parent" />
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'm trying to create letter buttons in relative layout. The main problem is that I cant set buttons to stay 1:1 aspect ratio and to display it proper on screen.
This is what I want to achieve:
Buttons should always be 1:1 and text shout start from button middle.
So far I tried with grid layout and put buttons in 5x5 grinds. But if I set button w/h to let's say 50dp on some displays I can see only A B C and half of D.
Also I tried to put on LinearLayout like:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/adSponsor"
android:layout_below="#id/barSearch"
android:layout_margin="20dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<LinearLayout
android:id="#+id/buttonPanel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/letter_button"
android:gravity="center|top"
android:text="A"
android:textAlignment="gravity"
android:textColor="#color/red"
android:textSize="#dimen/letter_box_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/letter_button"
android:gravity="center|top"
android:text="B"
android:textAlignment="gravity"
android:textColor="#color/red"
android:textSize="#dimen/letter_box_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/letter_button"
android:gravity="center|top"
android:text="C"
android:textAlignment="gravity"
android:textColor="#color/red"
android:textSize="#dimen/letter_box_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/letter_button"
android:gravity="center|top"
android:text="D"
android:textAlignment="gravity"
android:textColor="#color/red"
android:textSize="#dimen/letter_box_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/letter_button"
android:gravity="center|top"
android:text="E"
android:textAlignment="gravity"
android:textColor="#color/red"
android:textSize="#dimen/letter_box_text"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
But in this case the buttons are not 1:1 aspect ratio.
Can anybody point me what is the proper way to achieve this. Also, Buttons shout be in middle. The distance between buttons and search bar and buttons between buttons and footer should be the same.
In order to get a square button I would suggest you to subclass the Button class and override the onMeasure method:
public class SquareButton extends Button {
public SquareButton(Context context) {
super(context);
}
public SquareButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public SquareButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if(width > height) {
super.onMeasure(heightMeasureSpec, heightMeasureSpec);
} else {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
}
In order to get the even space between the buttons, I'd go as well with the LinearLayout approach and layout_weight set on the Buttons. You can skip setting the weightSum on the parent if your button count per row is variable.
In order to have the bottom of the letter start from the middle of the Button, maybe it's worth to try it to see if you can match the paddingBottom property of the Button with the textSize property. If not, I guess you'll have to override the onDraw method as well.
Ass this in your horizontal LinearLayout:
android:weightSum="5"
And this in your Buttons:
android:layout_weight="1"
This is assuming you have 5 buttons in each row.
As #iTurki pointed out, you should use weightSum and layout_weight combinations to spread the views evenly across the linearlayout.
That said, I understand that you still need to display your characters in square boxes.
For this you could use RelativeLayout containing ImageViews and use the ImageView as clickable buttons.
The advantage of ImageView is, you can set transparent square image as a background and use android:adjustViewBounds="true" so that the height of the imageview increases/decreases according to the horizontal width space available to the imageview. your layout should look something like this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="A"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="B"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="C"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="D"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="E"
/>
</RelativeLayout>
</LinearLayout>
I integrated a picture into my app page using ImgaeView and now there is excess space to the right of the image.
android:adjustViewBounds="true" Is not the answer
It does not fix the spacing issue
Here's the code:
<ImageView
android:id="#+id/f2lcase2"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/f2lcase2" />
<TextView
android:layout_height="wrap_content"
android:gravity="left"
android:text="Common F2L Cases" />
I don't have enough rep to post the pic but there is a large amount of space between the image and the text.
Thanks!
Edit
Here is the full XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.cube.F2l" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="3dip"
android:text="Common F2L Cases"
android:textSize="20sp" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/f2lcase2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:adjustViewBounds="true"
android:src="#drawable/f2lcase2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Common F2L Cases" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/f2lcase3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:adjustViewBounds="true"
android:src="#drawable/f2lcase3" />
</TableRow>
</TableLayout>
</LinearLayout>
Since your views are going to repeat many times, so you can use ListView for that.Also since your image is static, you can simply set Left Drawable of your TextView. So below is the layout for one row of the ListView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_vertical"
android:drawablePadding="5dp"
android:drawableLeft="#drawable/yourImage"
android:text="Common F2L Cases" />
</LinearLayout>
Try this !
<ImageView
android:id="#+id/f2lcase2"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/f2lcase2" />
<TextView
android:layout_height="wrap_content"
android:gravity="left"
android:text="Common F2L Cases" />
Try to use this code it may help you:
public class MyImage extends ImageView {
public MyImage(final Context context, final AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
final Drawable d = this.getDrawable();
if (d != null) {
// ceil not round - avoid thin vertical gaps along the left/right edges
final int width = MeasureSpec.getSize(widthMeasureSpec);
final int height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
this.setMeasuredDimension(width, height);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
In your xml do like this:
<com.exmple.myview.MyImage
android:id="#+id/ImageView3_Left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:src="#drawable/bg_2"
></com.exmple.myview.MyImage>
that's it. This will solve your plroblem.
I am just a beginner in android, and wish to have your suggestions at places where i could improve my code.
For our project we created a grid view, which loads users at runtime, now the issue with this is it doesnot scroll at times and is very hard to do so.
Also we have used this grid view, making the view visible and gone depending upon the circumstances required by the app.
Here's my xml file:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Title Layout -->
<RelativeLayout
android:id="#+id/newGroupTitleLayout"
android:layout_width="match_parent"
android:layout_height="50dip"
android:background="#drawable/topbar_bg" >
<ImageButton
android:id="#+id/newGroupCancelButton"
android:layout_width="60dip"
android:layout_height="30dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:background="#drawable/buttonanim_cancel_button"
android:contentDescription="#string/todo" />
<TextView
android:id="#+id/setupPrefTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/new_group"
android:textColor="#color/yellow"
android:textSize="20sp" />
</RelativeLayout>
<!-- Group Name -->
<LinearLayout
android:id="#+id/groupNameLinearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/newGroupTitleLayout"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:orientation="vertical" >
<TextView
android:id="#+id/groupNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="#string/group_name"
android:textColor="#color/yellow" />
<EditText
android:id="#+id/groupNameEditText"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="5dp"
android:background="#drawable/full_textfield"
android:ems="10"
android:inputType="text"
android:nextFocusRight="#+id/stateEditText"
android:paddingLeft="15dp"
android:singleLine="true" >
</EditText>
</LinearLayout>
<RelativeLayout
android:id="#+id/addMemberLayout"
android:layout_width="wrap_content"
android:layout_height="290dp"
android:layout_below="#+id/groupNameLinearLayout"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:background="#drawable/membersbox" >
<!-- View used when more than 1 member present -->
<GridView
android:id="#+id/mebersListGridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fastScrollAlwaysVisible="true"
android:gravity="center"
android:numColumns="auto_fit"
android:padding="10dp"
android:verticalSpacing="10dp"
android:visibility="gone" />
<!-- View when there are no members -->
<RelativeLayout
android:id="#+id/zeroMembersLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true" >
<ImageButton
android:id="#+id/addMemeberImageButton"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp"
android:background="#drawable/buttonanim_addmembersmall_button"
android:contentDescription="#string/todo" />
<LinearLayout
android:id="#+id/memberCountStatementTextViewtLayout"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/addMemeberImageButton"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/this_group_has_"
android:textColor="#android:color/white"
android:textSize="19sp" />
<TextView
android:id="#+id/groupMembersCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/_0"
android:textColor="#color/yellow"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/_members"
android:textColor="#android:color/white"
android:textSize="19sp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/memberCountStatementTextViewtLayout"
android:layout_centerHorizontal="true"
android:text="#string/tap_to_add_friends"
android:textColor="#android:color/white"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
<!-- Create group button -->
<ImageButton
android:id="#+id/creategroupbutton"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_below="#+id/addMemberLayout"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="#drawable/buttonanim_creategroup_button"
android:contentDescription="#string/todo" />
</RelativeLayout>
</ScrollView>
Could anyone help me out with this?
Your help is appreciated.
The problem with scrolling is a consequence of putting a GridView inside a ScrollView (which is the root layout in your case). ScrollView allows yout to scroll it's children vertically. GridView scrolls vertically too. So you have to find another solution.
Using GridView has one drawback. It doesn't have header and footer views like ListView has. So might want to replace the GridView with a ListView.
Try to use ExpandableHeightGridView instead of simple gridView:
public class ExpandableHeightGridView extends GridView{
boolean expanded = false;
public ExpandableHeightGridView(Context context)
{
super(context);
}
public ExpandableHeightGridView(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public ExpandableHeightGridView(Context context, AttributeSet attrs,
int defStyle)
{
super(context, attrs, defStyle);
}
public boolean isExpanded()
{
return expanded;
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
// HACK! TAKE THAT ANDROID!
if (isExpanded())
{
// Calculate entire height by providing a very large height hint.
// View.MEASURED_SIZE_MASK represents the largest height possible.
int expandSpec = MeasureSpec.makeMeasureSpec(MEASURED_SIZE_MASK,
MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
ViewGroup.LayoutParams params = getLayoutParams();
params.height = getMeasuredHeight();
}
else
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
public void setExpanded(boolean expanded)
{
this.expanded = expanded;
}}
<com.your_package_here.ExpandableHeightGridView
android:id="#+id/mebersListGridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fastScrollAlwaysVisible="true"
android:gravity="center"
android:numColumns="auto_fit"
android:padding="10dp"
android:verticalSpacing="10dp"
android:visibility="gone" />
From: this
Can't see your closing ScrollView tag..
</ScrollView>
You should never nest ListView or GridView inside ScrollView because both of these views provide scrolling as soon as your data is more than visible area of the view.