Android ImageView Extra Spacing - android

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.

Related

Not able to set width of a horizontal linear layout or height of vertical linear layout

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();
}

How to fix layout_weight in Linear layout?

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.

Resize Image to fit Parent layout height and width

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.

Custom View Wrap content override OnMeasure

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

Resize and positioning images for android that works on all devices

Fixed post.
So i have this two image wherein i want to make it centered and the next one centered again so it will be properly aligned when i load it on other device. it works perfectly fine But i know that the size varies depending on the density and such. I cant seem to properly align my backgrounds on the middle because of different phone screen sizes. so whats the best approach that i should do?
first background is for design, the box one.
the darker one is gonna be the default wherein ill replace with the picture that i took from the camera.
desired result which works on my phone size:
http://puu.sh/4XcuZ.jpg.
problem picture:
http://puu.sh/4Xcsk.jpg
Any idea how can i make them fit so they will properly work on any devices? My UI is so messed up because i am trying to fit them accordingly. ive read that i should use Dp,fill_parent and such but it's kinda confusing. any tips? Like the first thing that i wanna accomplish is to make my firstbackground have an even size when loaded to any device, then secondbackground.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/test"
android:padding="10dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="400dp"
android:layout_height="400dp"
android:orientation="horizontal"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:scaleType="fitCenter"
android:src="#drawable/firstbackground" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerVertical="true"
>
<LinearLayout
android:layout_width="290dp"
android:layout_height="336dp"
android:orientation="horizontal"
android:layout_centerVertical="true"
>
<ImageView
android:#+id/ivReturnImage
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:scaleType="fitCenter"
android:src="#drawable/secondbackground" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp"
>
<ImageButton
android:id="#+id/ibTakePic"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#drawable/take_picture" />
<ImageButton
android:id="#+id/ibRotateImage"
android:layout_width="50dp"
android:layout_height="45dp"
android:layout_gravity="center"
android:background="#drawable/object_rotate_left" />
<ImageButton
android:id="#+id/ibOpenImage"
android:layout_width="55dp"
android:layout_height="45dp"
android:layout_gravity="center"
android:background="#drawable/picture_book" />
<ImageButton
android:id="#+id/bSetWallpaper"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/preferences_desktop_wallpaper"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageButton
android:id="#+id/bSaveImage"
android:layout_width="50dp"
android:layout_height="45dp"
android:layout_gravity="center"
android:padding="10dp"
android:background="#drawable/document_save"/>
</LinearLayout>
</LinearLayout>
<SlidingDrawer
android:id="#+id/slidingDrawer1"
android:layout_width="273dp"
android:layout_height="550dp"
android:content="#+id/content"
android:handle="#+id/handle"
android:topOffset="390dp" >
<RelativeLayout
android:id="#+id/handle"
android:layout_width="wrap_content"
android:layout_height="48dp" >
<ImageView
android:layout_width="180dp"
android:layout_height="33dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="#drawable/handle" />
</RelativeLayout>
<LinearLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/drawer_background"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Please select a filter" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_height="41dp" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="match_parent"
android:layout_height="41dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="10dp" >
<Button
android:id="#+id/bImplement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Implement Effect" />
<Button
android:id="#+id/bOriginal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Revert to original" />
</LinearLayout>
</LinearLayout>
</SlidingDrawer>
</FrameLayout>
see if u want to go with layout format that you have to make some drawable like
1.drawable-hdpi
2.drawable-large
3.drawable-ldpi
4.drawable-xhdpi
5.drawable-xlarge-mdpi
6.drawable-xxhdpi
and make all layout respectively then your app is going fine on any mobile tablet blue stack AOC android device
if u go with java code then
int density= getResources().getDisplayMetrics().densityDpi;
if(density==DisplayMetrics.DENSITY_HIGH)
System.out.println("Density is high");
if(density==DisplayMetrics.DENSITY_XXHIGH)
System.out.println("Density is xxhigh");
if(density==DisplayMetrics.DENSITY_XXXHIGH)
System.out.println("Density is xxxhigh");
if(density==DisplayMetrics.DENSITY_TV)
System.out.println("Density is Tv");
if(widthDp==600)
{
imageWidth = ;
imgHeight = ;
margin = ;
}
else if (widthDp==720)
{
}
else if(density==DisplayMetrics.DENSITY_XHIGH)
{
imageWidth = ;
imgHeight = ;
margin = ;
}
else if(density==DisplayMetrics.DENSITY_LOW)
{
imageWidth = ;
imgHeight = ;
margin = ;
}
else if(density==DisplayMetrics.DENSITY_MEDIUM)
{
imageWidth = ;
imgHeight = ;
margin = ;
}
else
{
imageWidth = ;
imgHeight = ;
margin = ;
}
do what ever way u like :)
BEST OF LUCK DUDE :)

Categories

Resources