I am building an app that accesses a WordPress website API to list the posts, which has a preview like this:
The big white space at the top is the image of the post, which I implemented by copying a code I found online, creating a class that extends ImageView and modifying somethings, making the image 100% wide, because previously I couldn't achieve it.
It works, but the image is overlapping the other elements:
This is the code I've copied and adapted:
public class ProportionalImageView extends AppCompatImageView {
public ProportionalImageView(Context context) {
super(context);
}
public ProportionalImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ProportionalImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d != null) {
int w = MeasureSpec.getSize(widthMeasureSpec);
int h = w * d.getIntrinsicHeight() / d.getIntrinsicWidth();
setMeasuredDimension(w, h);
}
else super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
What I want to achieve is to make the image 100% wide but keep the proportion and not overlap, of course.
My layout file, for each square:
<?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="280dp"
android:layout_marginBottom="32sp"
android:background="#android:color/white">
<skillpoint.com.skillpoint.ProportionalImageView
android:id="#+id/imgImageUrl"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#+id/imgImageUrl"
android:background="#color/colorAccent" />
<TextView
android:id="#+id/tvTitle"
style="#style/Post.Preview"
android:layout_below="#+id/imgImageUrl"
android:text="Lorem Ipsum"
android:textColor="#color/colorTextColorPrimaryDark"
android:textSize="22sp" />
<TextView
android:id="#+id/tvDate"
style="#style/Post.Preview"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvTitle"
android:layout_margin="0dp"
android:text="00/00/0000"
android:textColor="#color/colorTextColorPrimaryDark"
android:textSize="12sp" />
<TextView
android:id="#+id/tvContent"
style="#style/Post.Preview"
android:layout_below="#+id/tvDate"
android:text="Lorem ipsum dolor sit amet"
android:textColor="#color/colorTextColorSecondaryDark"
android:textSize="13sp" />
</RelativeLayout>
Custom ImageView class is overlapping other elements in screen
Because your RelativeLayout has static height just change it to android:layout_height="wrap_content" you issue will be solved check the below images
Use
android:layout_height="wrap_content"
instead of
android:layout_height="280dp"
Try this Remove static height from your RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<com.example.user33.workingtestapp.ProportionalImageView
android:id="#+id/imgImageUrl"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/disha" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="#+id/imgImageUrl"
android:background="#color/colorAccent" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imgImageUrl"
android:text="Lorem Ipsum"
android:textColor="#ff00"
android:textSize="22sp" />
<TextView
android:id="#+id/tvDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvTitle"
android:layout_margin="0dp"
android:text="00/00/0000"
android:textSize="12sp" />
<TextView
android:id="#+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvDate"
android:text="Lorem ipsum dolor sit amet"
android:textSize="13sp" />
</RelativeLayout>
OUTPUT
without static hight
with static hight
Related
I would like to know how to do this horizontal line with text in the middle, look this screenshot :
Someone have an idea to do that on Android ? I found how to do a horizontal line, but never with text.
Thanks !
Just change the colors to match the ones on your image. I also suggest you use a gradient as the background for those dummy views, it looks a whole lot better then the screenshot if you put a little time into it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="lala"
android:textColor="#FFFFFF"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_toLeftOf="#id/tvText"
android:background="#FF0000"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:layout_toRightOf="#id/tvText"
android:background="#FF0000"
/>
</RelativeLayout>
public class CenterLineTextView extends android.support.v7.widget.AppCompatTextView {
private final Rect mBounds = new Rect();
private final Paint mPaint = new Paint();
private int mPadding;
private int mStroke;
public CenterLineTextView(Context context) {
super(context);
init();
}
public CenterLineTextView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CenterLineTextView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
if (isInEditMode()) {
return;
}
setGravity(Gravity.CENTER);
mStroke = getContext().getResources().getDimensionPixelSize(R.dimen.divider);
mPadding = getContext().getResources().getDimensionPixelSize(R.dimen.login_or_padding);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setStrokeWidth(mStroke);
mPaint.setColor(getPaint().getColor());
getPaint().getTextBounds(getText().toString(), 0, getText().length(), mBounds);
canvas.drawLine(0, getHeight() / 2, (getWidth() - mBounds.right) / 2 - mPadding, getHeight() / 2, mPaint);
canvas.drawLine(mPadding + (getWidth() + mBounds.right) / 2, getHeight() / 2, getWidth(), getHeight() / 2, mPaint);
}
}
You can do it with only one View for line and one TextView for text. Just add android:layout_centerHorizontal="true" in XML of TextView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="12dp"
android:background="#android:color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/white"
android:layout_centerHorizontal="true"
android:text="or" />
</RelativeLayout>
seperator line with text in middle
Try this
set the width of the view accordingly
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<View
android:id="#+id/topDivider"
android:layout_width="50dp"
android:layout_height="1dp"
android:layout_below="#id/internal"
android:background="#color/bright_blue"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Middle text here"
android:layout_gravity="center_horizontal"
android:id="#+id/lv_shopName" />
<View
android:id="#+id/topDivider"
android:layout_width="50dp"
android:layout_height="1dp"
android:layout_below="#id/internal"
android:background="#color/bright_blue"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linerlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<View
android:layout_marginRight="2dp"
android:id="#+id/divider"
android:layout_width="wrap conent"
android:layout_height="1dp"
android:background="#00000000" />
<TextView
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Text="abc"/>
<View
android:layout_marginLeft="2dp"
android:id="#+id/divider"
android:layout_width="wrap conent"
android:layout_height="1dp"
android:background="#00000000" />
I have the following layout file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/second_grey">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:id="#+id/categoryName"
android:text="#string/sport"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="12dp"
android:padding="2dp"
android:id="#+id/button"
android:text="#string/see_more"
android:textSize="12sp"
android:background="#drawable/blue"
android:textColor="#android:color/white" />
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="0.99">
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img1"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/football"
android:padding="8dp"
android:id="#+id/tv1"
android:layout_below="#+id/imgContainer1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img2"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/basketball"
android:padding="8dp"
android:id="#+id/tv2"
android:layout_below="#+id/imgContainer2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
<RelativeLayout
android:layout_height="wrap_content"
android:background="#drawable/card"
android:layout_width="0dp"
android:layout_weight="0.33">
<com.favega.groups.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgContainer3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:id="#+id/img3"
android:src="#drawable/img_football" />
</com.favega.groups.SquareLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tennis"
android:padding="8dp"
android:id="#+id/tv3"
android:layout_below="#+id/imgContainer3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</LinearLayout>
And I put it in a ListView in this layout:
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/categories"></ListView>
then, with a simple Adapter, I just set the layout of each element to the layout file.
It looks like this:
But if I just do instead of the ListView, it looks like this
EDIT: Notice the change of Sport for Fútbol, that's just my mistake, it has nothing to do with the actual layout.
EDIT2:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Category category = mList.get(position);
if (convertView == null)
convertView = ((Activity) mContext).getLayoutInflater().inflate(R.layout.category, parent, false);
TextView categoryName = (TextView) convertView.findViewById(R.id.categoryName);
categoryName.setText(category.name);
categoryName.setTypeface(Typeface.createFromAsset(mContext.getAssets(), "fonts/Roboto-Italic.ttf"));
return convertView;
}
EDIT3:
package com.favega.groups;
import android.annotation.TargetApi;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;
public class SquareLayout extends LinearLayout {
public SquareLayout(Context context) {
super(context);
}
#TargetApi(11)
public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public SquareLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int size = width > height ? height : width;
setMeasuredDimension(size, size);
}
}
int size = width > height ? height : width;
setMeasuredDimension(size, size);
Clearly you are setting Measured Dimension to the smallest of width and height!
Since you gave width and height as match_parent, we can assume that one of the value got as zero from parent. As your intention is to make a square image, I prefer you relate this SquareLayout to the child(image) itself rather that the parent. By using wrap_content.
Set each tag of view in converView.setTag(viewName); before returning covertView.
Try May help.Thanks!!
I am using a gridview in my application in which I want to make my view centered if there only one element in my adapter and maximum of three elements in one row.But for some reason one element is not being centered.
Please help me in this.
this is my parent layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
>
<RelativeLayout
android:id="#+id/cplist_title_layout"
android:layout_width="wrap_content"
android:layout_height="74dp"
android:gravity="center_vertical" >
<TextView
android:id="#+id/cplist_title"
android:layout_width="match_parent"
android:layout_height="74dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:gravity="left|center_vertical"
android:textColor="#color/RGB_0_176_241"
android:textSize="19dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/cplist_grid_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/cplist_title_layout"
android:paddingTop="8dp" >
<GridView
android:id="#+id/cp_gridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="21dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:numColumns="auto_fit"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
>
</GridView>
</RelativeLayout>
</RelativeLayout>
this is my grid view item layout
<RelativeLayout
android:id="#+id/detail_cplist_item_logo"
android:layout_width="match_parent"
android:layout_height="108dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" >
<ImageView
android:id="#+id/detail_cplist_item_cplogo_bg"
android:layout_width="225dp"
android:layout_height="104dp"
android:layout_centerVertical="true"
android:background="#color/RGB_23_27_33"
android:gravity="center" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/detail_cplist_item_details"
android:layout_width="match_parent"
android:layout_height="59dp"
android:layout_below="#id/detail_cplist_item_logo"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" >
<LinearLayout
android:id="#+id/detail_cplist_item_price"
android:layout_width="match_parent"
android:layout_height="31dp"
>
<TextView
android:id="#+id/detail_cp_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:layout_marginTop="4dp"
android:gravity="left"
android:text="Free"
android:textColor="#color/RGB_100_217_217_217"
android:textSize="18dp" />
</LinearLayout>
<RelativeLayout
android:id="#+id/detail_cplist_item_quality_section"
android:layout_width="37dp"
android:layout_height="19dp"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginBottom="9dp"
>
<ImageView
android:id="#+id/detail_cplist_item_quality"
android:layout_width="37dp"
android:layout_height="19dp"
android:gravity="center"
android:src="#drawable/common_selector_icon_hd" />
</RelativeLayout>
<ImageView
android:id="#+id/detail_cplist_item_tag_tv"
android:layout_width="21dp"
android:layout_height="wrap_content"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="9dp"
android:layout_toRightOf="#id/detail_cplist_item_quality_section"
android:src="#drawable/tag_tv"
android:visibility="invisible" />
<ImageView
android:id="#+id/detail_cplist_item_tag_mobile"
android:layout_width="21dp"
android:layout_height="wrap_content"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp"
android:layout_toRightOf="#id/detail_cplist_item_tag_tv"
android:src="#drawable/tag_mobile" />
<ImageView
android:id="#+id/detail_cplist_item_live_icon"
android:layout_width="37dp"
android:layout_height="19dp"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/detail_cplist_item_quality_section"
android:src="#drawable/tag_live"
android:visibility="invisible" />
</RelativeLayout>
Instead of gravity, set this:
android:layout_centerInParent="true"
Had the same problem... I solved it with overridden onMeasure()
public class GridViewEx extends GridView {
private int mRequestedNumColumns = 0;
public GridViewEx(Context context) {
super(context);
}
public GridViewEx(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridViewEx(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void setNumColumns(int numColumns) {
super.setNumColumns(numColumns);
if (numColumns != mRequestedNumColumns) {
mRequestedNumColumns = numColumns;
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mRequestedNumColumns > 0) {
int width = (mRequestedNumColumns * getColumnWidth())
+ ((mRequestedNumColumns-1) * getHorizontalSpacing())
+ getListPaddingLeft() + getListPaddingRight();
setMeasuredDimension(width, getMeasuredHeight());
}
}
}
I was using
android:layout_below="#+id/msg"
works fine after i removed it and used
android:layout_centerInParent="true"
I need help for get my layout of a image and text to work.
I want the image to scale to be the same height my TextView take in use.
I want also the image to be left to the text.
For in example # is my image
# "My Text"
or
## "My long text
## is this here"
The witdh of the image will be so the image keep the aspects.
My code is now this, the basic layout work but the image is to big.
<LinearLayout
android:id="#+id/packet_list_view_layout_subvehicle" android:layout_width="fill_parent"
android:layout_weight="1" android:orientation="horizontal"
android:gravity="left" android:layout_height="wrap_content">
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_image"
android:src="#drawable/packet"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="==================="
/>
EDIT 1
A other try that give me the same result.
<LinearLayout
android:id="#+id/packet_list_view_layout_subvehicle"
android:layout_width="fill_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:gravity="left"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/packet" />
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
EDIT 2
I has now found a half working code, the problem here is the width of the image is the origin width and not the new scale witdh.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/packet_list_view_layout_subvehicle"
>
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_imageAA"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/packet"
/>
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|left"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
I has finally found a working way, not very good but work for me.
My code is now
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/packet_list_view_layout_subvehicle"
>
<mypacket.MyImageView
android:id="#+id/packet_list_view_layout_subvehicle_imageAA"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/packet"
/>
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|left"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
And the mypacket.MyImageView is this code.
public class MyImageView extends ImageView {
public MyImageView(Context context) {
super(context);
}
public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, heightMeasureSpec);
}
}
EDIT: In true, I don't use this, base one some error with how the system calc the size, that do the image will be bigger then need, and this will do the text to warp to two lines. In final I use a normal ImageView and set fix hegth and withd.
I am trying to do something similar to the image below in Android. The problem is, whenever the screen size changes (when the user rotates the device), the checkboxes and the button disappear from the screen. This is my layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/preview"
android:layout_width="fill_parent"
android:contentDescription="#string/content_description"
android:layout_height= "1.5in" />
<CheckBox
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/preview"
android:text="#string/location_text" />
<CheckBox
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/location"
android:text="#string/timestamp_text" />
<Button
android:id="#+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/timestamp"
android:layout_marginRight="19dp"
android:gravity="center_vertical"
android:onClick="uploadClicked"
android:text="#string/upload_button_text" />
</RelativeLayout>
I need to display the image and all controls and support all screen sizes. How do I make the size of the ImageView dynamic?
I never got the scaleType thing to work for me.
I subclassed ImageView:
package your.pkg;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;
public class AspectRatioImageView extends ImageView {
public AspectRatioImageView(Context context) {
super(context);
}
public AspectRatioImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public AspectRatioImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
if (getDrawable() != null && getDrawable().getIntrinsicWidth() != 0) {
int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
setMeasuredDimension(width, height);
} else {
setMeasuredDimension(0, 0);
}
}
}
And used that instead of the regular ImageView:
<your.pkg.AspectRatioImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
/>
This scales to the full width of the parent View and maintains the aspect ratio while doing so.
If you used a LinearLayout instead of a RelativeLayout, you could make the ImageView expand to take all the empty space in the screen. The scaleType attribute will let you specify how to stretch the image.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/preview"
android:layout_width="fill_parent"
android:contentDescription="#string/content_description"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter" />
<CheckBox
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/location_text" />
<CheckBox
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/timestamp_text" />
<Button
android:id="#+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="19dp"
android:layout_gravity="right"
android:onClick="uploadClicked"
android:text="#string/upload_button_text" />
</LinearLayout>
Based on all the feedback. This is what I used:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/preview"
android:layout_width="fill_parent"
android:contentDescription="#string/content_description"
android:layout_height= "1.5in" />
<CheckBox
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/preview"
android:text="#string/location_text" />
<CheckBox
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/location"
android:text="#string/timestamp_text" />
<Button
android:id="#+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/timestamp"
android:layout_marginRight="19dp"
android:gravity="center_vertical"
android:onClick="uploadClicked"
android:text="#string/upload_button_text" />
</RelativeLayout>
</ScrollView>