How do I add margin values to inflated ListView? - android

This is my code for how each row looks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="120dp"
android:id="#+id/recipe_container"
android:layout_margin="12dp"
android:background="#f1f1f1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/recipe_name_text_view"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:textSize="32sp"
android:text="DUMMY TEXT"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/recipe_time_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DUMMY TEXT"/>
<TextView
android:id="#+id/recipe_difficulty_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DUMMY TEXT"/>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/recipe_thumbnail_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sladice"/>
</LinearLayout>
As you can see I have margin set, if I check preview it is also shown.
I populated with inflate this listivew.
This is activity_sladice.xml.
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/recipe_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.recepti.Sladice"
android:background="#color/colorPrimary">
</ListView>
Now each row is together, there is no spacing between left, right, bottom , top.
If I add margin or padding to listview it only works on the entire list, not on each row.
How to do it? I know I can add divider between each row but I also want spacing right and left.
This is getView method from custom adapter.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View recipeView = convertView;
ReceptThumbnail recipe = getItem(position);
// Inflate view if to be inflated
if (recipeView == null) {
recipeView = LayoutInflater.from(getContext()).inflate(R.layout.recipe_item, parent, false);
}
TextView recipeName = (TextView) recipeView.findViewById(R.id.recipe_name_text_view);
recipeName.setText(recipe.getName());
TextView recipeTime = (TextView) recipeView.findViewById(R.id.recipe_time_text_view);
recipeTime.setText(recipe.getTime());
TextView recipeDifficulty = (TextView) recipeView.findViewById(R.id.recipe_difficulty_text_view);
recipeDifficulty.setText(recipe.getDifficulty());
ImageView recipeImage = (ImageView) recipeView.findViewById(R.id.recipe_thumbnail_image_view);
recipeImage.setImageResource(recipe.getImageResourceID());
}

If you want to add margins to the ListView, add margns to the listview.
If you want to add margins to the items, add margins to the items.
It is simple.
However, I suggest you to use ConstraintLAyout. And RecyclerView instead of ListView.

Try using padding in the LinearLayout, and create another LinearLayout as a child of the original, and move the background attribute to it.

try setting margin programmatically in getView method using below method.
public static void setMarginLeft(View v, int left) {
ViewGroup.MarginLayoutParams params =
(ViewGroup.MarginLayoutParams)v.getLayoutParams();
params.setMargins(left, params.topMargin,
params.rightMargin, params.bottomMargin);
}

Related

Layout weight not working as intended

I have a slight problem getting my layout_weight to work. I am creating a custom bottomBar. But i cant make it to stretch as i want it to.
Bottom Bar View
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_bar_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/bottom_bar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4"
android:orientation="horizontal"/>
</RelativeLayout>
This is the big container i am adding my buttons (items) to.
Bottom Bar Item
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/bottom_bar_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/arrow_up_float"/>
<TextView
android:id="#+id/bottom_bar_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEXT"/>
</LinearLayout>
This is my items that i add dynamically to the view. But somehow the view is not stretched properly.
But when i hardcode it in. It works. So could it be that layout weight does not work dynamically?
How i add the views (items)
private void updateItems(final List<BottomBarTab> bottomBarTabs) {
if (bottomBarTabs.size() < TABS_COUNT) {
throw new RuntimeException("Not enough buttons for bottomBar");
}
for (int i = 0; i < TABS_COUNT; i++) {
bottomBarTabs.get(i).setOnClickListener(this);
bottomBarTabs.get(i).prepareLayout();
container.addView(bottomBarTabs.get(i));
}
}
Screenshot
LayoutWeight is given to inner components of layout only not on parent Linearlayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:weightSum="2">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/bottom_bar_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/arrow_up_float"/>
<TextView
android:id="#+id/bottom_bar_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TEXT"/>
</LinearLayout>
public void prepareLayout() {
View view = inflate(getContext(), R.layout.bottom_bar_item,this);
LinearLayout.LayoutParams params =
new LayoutParams(0,LayoutParams.MATCH_PARENT,LAYOUT_WEIGHT);
view.setLayoutParams(params);
if(backgroundColor != null) {
view.setBackgroundColor(backgroundColor);
}
TextView titleText = (TextView) view.findViewById(R.id.bottom_bar_item_text);
titleText.setText(title);
AppCompatImageView imageView = (AppCompatImageView) view.findViewById(R.id.bottom_bar_item_icon);
imageView.setImageResource(iconResId);
}
I changed in my prepareLayout function and put new layoutParams. Because somehow after inflation. The view ignores the weight that was set to it. So i had to force it by code. Maybe this is a android bug?

Android - How to make child LinearLayout match parent RelativeLayout's height

I am putting this LinearLayout inside RelativeLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="23dp"
android:src="#drawable/big_tick" />
</LinearLayout>
What I am trying to do is - to show which item has been chosen. I set LinearLayout's height and width match_parent. It is only matching parent(RelativeLayout)'s width, not height.
This is what I have intended to do:
This is what I am getting:
LinearLayout is not taking whole height of its parent.
There are 2 reasons, why I am using Relative layout as parent:
The LinearLayout should be in upside(should cover) book information with 40% black color
To show this symbol on the top of book
The whole XML looks like this:
<?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"
android:gravity="center_horizontal">
<LinearLayout
android:id="#+id/llBook"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="6dp"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingLeft="11dp"
android:paddingRight="2dp"
android:paddingTop="8dp">
<ImageView
android:id="#+id/ivCover"
android:layout_width="95dp"
android:layout_height="146dp" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textColor="#232425"
android:textSize="12sp" />
<TextView
android:id="#+id/tvAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textColor="#848586"
android:textSize="10sp" />
</LinearLayout>
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_alignRight="#id/llBook"
android:layout_marginRight="6dp"
android:background="#drawable/shape_round_book_status"
android:padding="8dp"
android:src="#drawable/icon_new" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="23dp"
android:src="#drawable/big_tick" />
</LinearLayout>
</RelativeLayout>
I am using this RelativeLayout in BaseAdapter class using which I am filling GridView with items.
public class LibraryAdapter extends BaseAdapter {
Context context;
RealmResults<RBook> rBooks;
LayoutInflater inflater;
public LibraryAdapter(Context context, RealmResults<RBook> rBooks) {
this.context = context;
this.rBooks = rBooks;
this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return rBooks.size();
}
#Override
public Object getItem(int position) {
return rBooks.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
RBook rBook = (RBook) getItem(position);
View view = convertView;
if(view == null) {
// new row is needed to inflate new row
view = inflater.inflate(R.layout.listitem_library_book, parent, false);
}
Bitmap bitmap = BitmapFactory.decodeByteArray(rBook.getCover() , 0, rBook.getCover().length);
ImageView ivCover = (ImageView) view.findViewById(R.id.ivCover);
ivCover.setImageBitmap(bitmap);
TextView tvTitle = (TextView) view.findViewById(R.id.tvTitle);
tvTitle.setText(rBook.getTitle());
TextView tvAuthor = (TextView) view.findViewById(R.id.tvAuthor);
tvAuthor.setText(rBook.getAuthor());
return view;
}
}
EDIT:
Try1: as cj1098 suggested I have changed child LinearLayout to RelativeLayout. Unfortunately, no effect
Try2: as challenger suggested, I have used this inside my child LinearLayout, but effect was like this:
Try3: as codeMagic suggested, I have changed child LinearLayout's
gravity="center"
to ImageView's
layout_gravity="center"
In result, LinearLayout is not taking whole height.
So my question is how make child LinearLayout match parent RelativeLayout's height?
Try to add this to the LinearLayout:
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
Any way use can use this without even using the LinearLayout (with fixing the size of the drawable "big_tick" ):
<ImageView
android:layout_width="30dp"
android:background="#66000000"
android:layout_height="23dp"
android:src="#drawable/big_tick" />
I think that using this layout by itself is fine. It is the fact that you are putting it into a ListView is causing some sort a havoc.
However, you can force the overlay to align itself bottom and top with the book layout:
android:layout_alignBottom="#id/llBook"
android:layout_alignTop="#id/llBook"
After that maybe you still have a few margins to fix, but the two lines above will make the overlay be as big as the book layout.
it is taking the full height of its parent. Get rid of the padding on your child linear layout. Then if that doesn't work. Switch your linearLayout to a relativeLayout. (It's better anyway) another limitation is the actual images you are using. Do they have differing heights?
Remove the LinearLayout totally, use the imageview with src 'tick' as a direct child of the Relative layout with:
andriod:centerInParent=true
and then add View with the desired background transparency that has
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"

Want to align linearlayout inside another, but setGravity() doesn`t work

I am trying to align a linear layout inside another linear layout programmatically, but setGravity(Gravity.RIGHT) doesn`t work.
I know the differences between gravity and layout_gravity.
Here's the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="#+id/conversationwrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bubble_yellow"
>
<TextView
android:id="#+id/messagecontent_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:paddingLeft="10dip"
android:text="Message_content"
android:textSize="15dp" />
<TextView
android:id="#+id/timestamp_tv"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="HH:MM"
android:ems="2"
android:textSize="12dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
And the code of getView() in my Adapter:
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
if (row == null) {
LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.listitem_conversation, parent, false);
}
wrapper = (LinearLayout) row.findViewById(R.id.conversationwrapper);
initial_wrapper = (LinearLayout) row.findViewById(R.id.initial_wrapper);
time = (TextView) row.findViewById(R.id.timestamp_tv);
Message coment = getItem(position);
content = (TextView)row.findViewById(R.id.messagecontent_tv);
content.setText(coment.content);
time.setText(getCurrentTimeStamp());
wrapper.setBackgroundResource(!coment.mine ? R.drawable.bubble_yellow : R.drawable.bubble_green);
initial_wrapper.setGravity(!coment.mine ? Gravity.LEFT : Gravity.RIGHT);
return row;
}
But it always happen to be on the left, even when the image is green.
The strange thing is that if I type
android:gravity="right"
inside initial_wrapper, It works in the preview but not in the device.
I'm using a Moto G and a Nexus 5, but neither of them work
The problem can be here : android:layout_width="fill_parent", how you supose to set android:gravity="right" here, if your layout is filling whole parent? You should try to use
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
instead of :
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
do this
<LinearLayout
android:id="#+id/initial_wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity = "left"
>
in your getView() do this
LinearLayout.LayoutParams lp = initial_wrapper.getLayoutParams();//will need to casting
lp.gravity= Gravity.RIGHT; // this is the important part
initial_wrapper.setLayoutParams(lp);
hope it helps

TextView overlaps ImageView inside a CardView

I'm trying to do a ListView of CardViews.
The CardView contains an ImageView at the top and several TextViews at the bottom.
I manage to do everything right, although for some reason the image don't fit the CardView (so it gets cropped at the top of it) and the TextViews overlaps the rest of the image.
I tried a lot of different solutions, although nothing worked for me and i cam't figure out why.
The main layout:
<ListView android:id="#+id/item_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
The CardView layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<android.support.v7.widget.CardView android:id="#+id/item_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_image_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/item_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the getView() methid:
public View getView(int position, View convertView, ViewGroup parent) {
View cardView;
if (convertView == null) {
LayoutInflater inflater = ((Activity) this.getContext()).getLayoutInflater();
cardView = inflater.inflate(R.layout.item_card_list, parent, false);
}
else {
cardView = convertView;
}
ImageView itemImage = (ImageView)cardView.findViewById(R.id.item_image);
TextView itemTitle = (TextView)cardView.findViewById(R.id.item_title);
TextView imgDesc = (TextView)cardView.findViewById(R.id.item_image_desc);
TextView itemDesc = (TextView)cardView.findViewById(R.id.item_desc);
Item currItem = this.getItem(position);
itemImage.setImageDrawable(currItem.mImageDrawable);
itemTitle.setText(currItem.mTitle);
imgDesc.setText(currItem.mDescription.imageDesc);
itemDesc.setText(currItem.mDescription.descText);
itemImage.setScaleX((float)1000 / currItem.mImageDrawable.getMinimumWidth());
itemImage.setScaleY((float)1000 / currItem.mImageDrawable.getMinimumWidth());
return (cardView);
}
It seems like the CardViews have a max height or something..can't tell :(
Thanks in advance!
My approach was all wrong. I realized that the setScale() methods I used only scaled the bitmap, and not the ImageView itself. Although when I tried to resize the ImageView before it was even layed down on the canvas, I got no luck either. So I did this:
Instead of trying to resizing the ImageView after I assigned it with a small bitmap, I resized the bitmap itself before setting it to the ImageView. Fixed everything :)

Android - ListView Changes View Attribute

I have a ListView and I wanted to place a small rectangle on the side of each item. To do so I made the following rendered layout:
<?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"
android:padding="3dp">
<View
android:layout_width="5dp"
android:layout_height="fill_parent"
android:id="#+id/item_color_image"
android:background="#color/wallet_holo_blue_light"
android:layout_marginRight="3dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/item_icon_image"
android:src="#drawable/m"
android:layout_toRightOf="#+id/item_color_image"
android:layout_centerVertical="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Business Name"
android:id="#+id/item_title_text"
android:layout_toRightOf="#+id/item_icon_image"
android:layout_marginLeft="3dp"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_alignTop="#+id/item_icon_image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Distance"
android:id="#+id/item_distance_text"
android:layout_alignLeft="#+id/item_title_text"
android:layout_alignBottom="#+id/item_icon_image"
android:layout_marginBottom="-10dp" />
</RelativeLayout>
When I inflate this layout in a frame, it works just fine.....BUT when I inflate it inside a ListView I get this:
The rectangle's height is being ignored to match the container's height.
I inflate it using this code:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View itemView = convertView;
if (itemView == null) {
itemView = inflater.inflate(R.layout.business_item_view, parent, false);
}
Business currentBusiness = businesses.get(position);
ImageView icon = (ImageView) itemView.findViewById(R.id.item_icon_image);
icon.setImageBitmap(currentBusiness.getIcon());
TextView name = (TextView) itemView.findViewById(R.id.item_title_text);
name.setText(currentBusiness.getName());
TextView distance = (TextView) itemView.findViewById(R.id.item_distance_text);
distance.setText("2 Km"); // TODO: Calculate distance
return itemView;
}
How can I fix this? Thanks!!
Having your root item for a ListView row be match_parent for height doesn't make sense; each item would fill the ListView. I expect that's automatically being changed to wrap_content somewhere.
And RelativeLayouts don't support children with match_parent for height if the RelativeLayout's height is wrap_content. It works with LinearLayouts, so you should look into switching to that. Source: combining wrap_content on parent and fill_parent on child

Categories

Resources