I'm quite new to Android programming and I'm stuck on an simple problem.
I have a basic homepage with some buttons and a logo. I use a LinearLayout and the layout_weight attribute to distribute all the components.
Here is my code :
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="iut.project.findmeapp.MainActivity" >
<ImageView
android:id="#+id/activityMainAppLogoIv"
android:layout_width="match_parent"
android:layout_height="#dimen/null_height"
android:contentDescription="#string/description_logo"
android:layout_weight="1"
android:maxHeight="#dimen/img_maxHeight"
android:layout_margin="#dimen/img_margin"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/activityMainMyEventsBtn"
android:layout_width="match_parent"
android:layout_height="#dimen/null_height"
android:layout_marginTop="#dimen/button_margin_vertical"
android:layout_marginBottom="#dimen/button_margin_vertical"
android:layout_weight="1"
android:text="#string/my_events" />
<Button
android:id="#+id/activityMainMyContactsBtn"
android:layout_width="match_parent"
android:layout_height="#dimen/null_height"
android:layout_marginTop="#dimen/button_margin_vertical"
android:layout_marginBottom="#dimen/button_margin_vertical"
android:layout_weight="1"
android:text="#string/my_contacts" />
<Button
android:id="#+id/activityMainLastNotifBtn"
android:layout_width="match_parent"
android:layout_height="#dimen/null_height"
android:layout_marginTop="#dimen/button_margin_vertical"
android:layout_marginBottom="#dimen/button_margin_vertical"
android:layout_weight="1"
android:text="#string/last_notification" />
<TextView
android:id="#+id/activityMainCopyrightTv"
android:layout_width="match_parent"
android:layout_height="#dimen/null_height"
android:gravity="center"
android:layout_weight="0.5"
android:layout_margin="#dimen/tw_margin"
android:text="#string/copyright" />
</LinearLayout>
(Note : #dimen/null_height is 0dp)
My problem is that I want the image to scale with the size of the screen, but I don't want it pixelated : I have set a maximum height of 200px.
The following lines don't seem to work, because the image has no limit and totally ignores the maxHeight attribute.
android:layout_weight="1"
android:maxHeight="#dimen/img_maxHeight"
Actually it looks like this (example image) :
It works perfectly, but when I set maxHeight to 10px for example, nothing changes.
How can I achieve this ? I highly prefer to use a LinearLayout.
Thank you in advance.
Thanks to Evripidis Drakos for pointing me in the right direction. Just need a check to only set the max height if it's actually required.
public class MaxHeightImageView extends ImageView {
public static final int MAX_HEIGHT_NOT_SET = -1;
public static final int INDEX_MAX_HEIGHT = 0;
private static final int[] STYLE_ATTRIBUTE_ARRAY = {
android.R.attr.maxHeight,
};
private int myMaxHeight;
public MaxHeightImageView(Context context) {
super(context);
init(context, null);
}
public MaxHeightImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public MaxHeightImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
#RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public MaxHeightImageView(Context context, AttributeSet attrs, int defStyleAttr,
int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int size = MeasureSpec.getSize(heightMeasureSpec);
if(MAX_HEIGHT_NOT_SET != myMaxHeight && size > myMaxHeight) {
heightMeasureSpec = MeasureSpec.makeMeasureSpec(myMaxHeight, MeasureSpec.AT_MOST);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
private void init(Context context, AttributeSet attrs) {
if(context != null) {
TypedArray ta = context.obtainStyledAttributes(attrs,
STYLE_ATTRIBUTE_ARRAY);
myMaxHeight = ta.getDimensionPixelSize(INDEX_MAX_HEIGHT, 0);
} else {
myMaxHeight = MAX_HEIGHT_NOT_SET;
}
}
}
I dont think that you can combine layout_weight with maxHeight.
You could try subclassing ImageView to override the onMeasure method like so:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
heightMeasureSpec = MeasureSpec.makeMeasureSpec(200, MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
if u want to set exact height for your image u should use weightSum property with weight
edit:
for fixed height do not give weight for imageview just take parent layout for imageview then add weight for that linear layout(parent layout) and for imageview give height as wrap content and maxHeight. when u use weight with height="0dp" the content will capture the whole height so it will ignore maxHeight.
try this
<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"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:weightSum="5"
tools:context="iut.project.findmeapp.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/activityMainAppLogoIv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/quantity_hint"
android:maxHeight="200px"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<Button
android:id="#+id/activityMainMyEventsBtn"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="my_events" />
<Button
android:id="#+id/activityMainMyContactsBtn"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="my_contacts" />
<Button
android:id="#+id/activityMainLastNotifBtn"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="last_notification" />
<TextView
android:id="#+id/activityMainCopyrightTv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:gravity="center"
android:text="copyright" />
</LinearLayout>
Related
I have recycler view which uses grid layout manager to show items in 2 columns like this:
If you notice the image bottom margin is different for left row. In the item layout the image view has property "alignparentbottom=true", but all the items in the left row have this wrong margin at bottom (png file has no margin, I have verified.). I have extended RelativeLayout to make it square shaped like this:
public class SquareRelativeLayout extends RelativeLayout {
private static final int HEIGHT_RATIO = 1;
private static final int WIDTH_RATIO = 1;
public SquareRelativeLayout(Context context) {
super(context);
}
public SquareRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public SquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Set a square layout.
/*int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = (int) (HEIGHT_RATIO / WIDTH_RATIO * widthSize);
int newHeightSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY);*/
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
Here is the whole item layout:
<?xml version="1.0" encoding="utf-8"?>
<com.org.framework.ui.widget.SquareRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/transparent_round_rect"
android:layout_marginTop="#dimen/margin_16" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/ll_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="20"
android:layout_marginTop="#dimen/margin_12"
android:layout_marginRight="#dimen/margin_12"
android:layout_marginLeft="#dimen/margin_12">
<TextView
android:id="#+id/tv_wallet_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="15"
style="#style/SmallWhiteText"
android:text="Reimbursement"
android:ellipsize="end"
android:lines="1"
android:maxLines="1" />
<RadioButton
android:id="#+id/rb_select"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:layout_marginTop="-3dp"
android:layout_gravity="end|center_vertical"
android:buttonTint="#color/white" />
</LinearLayout>
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/LargeWhiteText"
android:text="2000"
android:layout_marginRight="#dimen/margin_12"
android:layout_marginLeft="#dimen/margin_12"
android:layout_below="#id/ll_top"/>
<ImageView
android:id="#+id/iv_wallet_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/gift"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
/>
<!--android:layout_marginRight="-1.5dp"
android:layout_marginBottom="-7dp"-->
<FrameLayout
android:id="#+id/fl_na"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#435977"
android:layout_alignParentBottom="true"
android:padding="5dp"
android:visibility="gone">
<TextView
android:id="#+id/tv_not_applicable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_not_applicable"
style="#style/VerySmallWhiteText"
android:layout_gravity="center_horizontal"/>
</FrameLayout>
</RelativeLayout>
</com.org.framework.ui.widget.SquareRelativeLayout>
First- Items shouldn't have different bottom margins for left and right columns. What's the reason?
second- I have tried to programatically fix the layout inside onBindViewHolder method (with/without layout tree observer) like this:
ViewTreeObserver tob = uvh.rlRoot.getViewTreeObserver();
tob.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
uvh.rlRoot.getViewTreeObserver().removeOnGlobalLayoutListener(this);
Log.e("flNa", (uvh.flNa.getTop()+uvh.flNa.getHeight())+",");
Log.e("ivWallet", (uvh.ivLogo.getTop()+uvh.ivLogo.getHeight())+",");
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) uvh.ivLogo.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
//params.bottomMargin = 0;
//uvh.ivLogo.setBottom(-10);
uvh.ivLogo.setTop(uvh.rlRoot.getHeight()-uvh.ivLogo.getHeight());
uvh.ivLogo.setLayoutParams(params);
RelativeLayout.LayoutParams params1 = (RelativeLayout.LayoutParams) uvh.flNa.getLayoutParams();
params1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
params1.bottomMargin = 1;
uvh.flNa.setLayoutParams(params1);
uvh.rlRoot.forceLayout();
uvh.rlRoot.invalidate();
uvh.rlRoot.requestLayout();
}
});
This has no effect on layout.
How to fix this issue?
I'm making some grid with image and text, using GridLayoutManager. But currently my items have different height if on one row text is on one line and on the second row text has two lines, which don't looks good. How to make all items equals to each other (best option if every item height will be equal to max element height
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical"
android:background="#color/white"
android:layout_margin="1dp">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textAlignment="center"
tools:text="Long title long title long title(560)" />
</RelativeLayout>
</LinearLayout>
Try below code may work for you, where I have created custom relative layout
package com.test;
public class MySquareRelativeLayout extends RelativeLayout {
public MySquareRelativeLayout(Context context) {
super(context);
}
public MySquareRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MySquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(VERSION_CODES.LOLLIPOP)
public MySquareRelativeLayout(Context context, AttributeSet attrs,int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Set a square layout.
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
<?xml version="1.0" encoding="utf-8"?>
<com.test.MySquareRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/elementRootView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image"
android:textAlignment="center"
tools:text="Long title long title long title(560)" />
</com.test.MySquareRelativeLayout>
I want the homepage of my app to have different sections containing a list of items in every section. For this I have used a ScrollView. Inside the scrollview I have put a search area, and a ExpandableHeightGridView (this is a custom class that help the GridView to expand the space inside the ScrollView based on the number of items).
But regardless of this the scrollView doesn't work and search box appears at the top of the screen, meanwhile the GridView scrolls as if it wasn't inside ScrollView.
Below is my Code:
activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/njoftime_background">
<ScrollView
android:id="#+id/sv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="?android:attr/actionBarSize"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/sr"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/event_background_block"
android:padding="5dp">
<RelativeLayout
android:id="#+id/search_area"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:background="#drawable/njoftime_item_background">
<ImageButton
android:id="#+id/btn_search"
android:layout_width="65dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_marginLeft="1dp"
android:background="#color/njoftime_main_color"
android:onClick="searchPressed"
android:scaleType="fitCenter"
android:src="#drawable/ic_search_white" />
<EditText
android:id="#+id/search_text"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/btn_search"
android:background="#null"
android:ems="20"
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLines="1"
android:paddingLeft="7dp"
android:textColor="#color/njoftime_desc"
android:textCursorDrawable="#null"
android:textSize="17sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/search_categories_area"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/search_area"
android:paddingBottom="7dp"
android:paddingTop="13dp">
<GridView
android:id="#+id/search_grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawSelectorOnTop="false"
android:horizontalSpacing="2dp"
android:numColumns="4" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.example.crs.tempus.ExpandableHeightGridView
android:id="#+id/njoftime_list"
android:layout_width="match_parent"
android:horizontalSpacing="5dp"
android:verticalSpacing="5dp"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
android:background="#color/white"
android:drawSelectorOnTop="true"
android:numColumns="1" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_width="230dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:layout_marginTop="?android:attr/actionBarSize"
android:background="#color/white"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/list_slidermenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:choiceMode="singleChoice"
android:dividerHeight="1dp"
android:drawSelectorOnTop="true"
android:groupIndicator="#null"
android:paddingBottom="13dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingTop="13dp"></ExpandableListView>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
ExpandableHeightGridView
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;
}
}
The ExpandableHeightGridView, is used also in another activity and it works.
Any idea?
1) In your ExpandableHeightGridView class use below code inside your onMeasure override method. It works in my case.
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
}
Or
2) In your code you might need to call setExpanded method of ExpandableHeightGridView class and set it to true.
Hope one of this solution would works for you.
UPDATED---------
try to use a customScollview,create one CustomScrollview like this and use this
public class CustomScrollView extends ScrollView {
public CustomScrollView(Context context) {
super(context);
}
public CustomScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return false;
}
}
android:fillviewport="true"
add this in your ScrollView ,like this
<CustomScrollView
android:fillviewport="true"
android:id="#+id/sv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
I have a ListView with an ImageView and TextView, I want to set the width of the image as 2/3 of the screen.
How do I create a custom ImageView to do this? This is what I've tried so far.
Custom View
public class CustomImageListView extends ImageView {
public CustomImageListView(Context context) {
super(context);
}
public CustomImageListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomImageListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// Snap
// to
int width = MainActivity.width;
int height = MainActivity.height;
int w = width *2/5;
int h = w *4/6;
setMeasuredDimension(w, h);
// setMeasuredDimension(ChoseImage.width, ChoseImage.height); // Snap to
// //
// width
}
}
The custom View XML
<tuannt.tinmoi.custom.CustomImageListView
android:id="#+id/ivAvater"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/nomage" />
You can define a horizontal linear layout with WeightSum = 3 and inside it put another layout with with layout_weight = 1, the remaining portion will be of weight = 2, so you can put your imageView there. Refer below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/fullscreen"
style="#style/translucent"
android:orientation="horizontal"
android:weightSum="3">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:gravity="center"
android:background="#88000000"
android:id="#+id/sidebar"
android:layout_weight="1" >
</RelativeLayout>
<!-- other views, with a total layout_weight of 2 -->
</LinearLayout>
You don't need to create a Custom View to achieve this. You can make use of the layout_weight attribute.
This would be your layout for every item in the ListView.
item_in_listview.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
The layout_weight attribute is explained in this question.
In a nutshell, layout_weight specifies how much of the extra space in
the layout to be allocated to the View.
How can I force an android GridView to generate square cells (Cell's height equal to cell's width)
GridView has 10*9 cells and the app must support multiple screens !
I used a Linear Layout:
row_grid.xml
<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"
android:padding="0dp" >
<ImageView
android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
and GridView:
activity_main.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:background="#drawable/katy" >
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="0dp"
android:numColumns="4"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp" >
</GridView>
</RelativeLayout>
Each cell of GridView contains a image that has same width and height.
images are larger than cells and must stretch to fit in cells.
First, you're going to want to create a custom View class that you can use instead of the default LinearLayout you're using. Then you want to override the View's onMeasure call, and force it to be square:
public class GridViewItem extends ImageView {
public GridViewItem(Context context) {
super(context);
}
public GridViewItem(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridViewItem(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width
}
}
Then you can change your row_grid.xml file to:
<path.to.item.GridViewItem xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher" >
</path.to.item.GridViewItem>
Just be sure to change "path.to.item" to the package where your GridViewItem.java class resides.
I also removed your LinearLayout parent since it wasn't doing anything for you there.
Edit:
Also changed scaleType from fitXY to centerCrop so that your image doesn't stretch itself and maintains its aspect ratio. And, as long as it's a square image, nothing should be cropped, regardless.
You can Override your linear layout
public class MyLinearLayout extends LinearLayout {
public MyLinearLayout(Context context) {
super(context);
}
public MyLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width
}
}
then use it in the item_grid.xml
<?xml version="1.0" encoding="utf-8"?>
<com.example.MyLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/item_grid"
android:layout_margin="2dp"
android:padding="3dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Category Name"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
android:id="#+id/tvCategoryName" />
</com.example.MyLinearLayout>
How about using ConstraintLayout?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="3dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Works nicely, thank you! A small improvement I required would be always pick the smaller value, to prevent overshooting the screen:
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if(heightMeasureSpec < widthMeasureSpec) {
super.onMeasure(heightMeasureSpec, heightMeasureSpec);
} else if(widthMeasureSpec < heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
public class GridViewItem extends RelativeLayout {
public GridViewItem(Context context) {
super(context);
}
public GridViewItem(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridViewItem(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width
}
}
If your grid item just have an image then the answer is very good. But you want to add multiple items in your grid item then you must create Your Custom GridViewItem extending the layout you want your grid item to be. For example in my case I had RelativeLayout as the parent view so I created GridViewItem extending the RelativeLayout and it worked flawlessly.
Just make sure that your images are square. And make the container wrap_content.