I have an app which uses a ListFragment. I want to style my own ListItem layout but don't know how to get desired effect. I want to it to look something like this:
I want that big imageView, little shaded stripe with TextView and Like button. Any ideas how to solve this ? especially that shading part.
You will need to set an adapter to your ListFragment using setListAdapter(adapter).
You can create your own adapter implementing BaseAdapter.
Then you override getView like this:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
CompleteListViewHolder viewHolder;
if (convertView == null)
{
LayoutInflater li = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = li.inflate(R.layout.listitem, null);
}
ImageView image = (ImageView)v.findViewById(R.id.image);
TextView text = (TextView)v.findViewById(R.id.text);
... add the like button etc
return v; }
listitem.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/FrameLayout1"
android:layout_width="200dp"
android:layout_height="200dp" >
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/someImage" />
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:orientation="vertical"
android:background="#drawable/gradient" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text" />
<Button
android:id="#+id/likeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Like" />
</LinearLayout>
</FrameLayout>
gradient.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00000000"
android:startColor="#FF000000"
android:type="linear" />
<corners
android:radius="0dp"/>
Related
How can I change the height indicator?
android:indicatorEnd and android:indicatorStart don't work?
<ExpandableListView
android:id="#+id/exListView"
android:groupIndicator="#drawable/indicator"
android:layout_width="match_parent"
android:layout_height="392dp"
android:indicatorLeft="250dp"
android:indicatorRight="300dp"
android:layout_weight="1.11"
android:indicatorEnd="10dp"
android:indicatorStart="15dp" />
You can do fully customized indicator with follow up these steps:
Set android:groupIndicator="#null"
<ExpandableListView
android:id="#+id/exListView"
android:groupIndicator="#null"
android:layout_width="match_parent"
android:layout_height="392dp"
android:layout_weight="1.11"/>
Define imageview consider as group_indicator into list_group_item.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="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:padding="8dp" >
<ImageView
android:id="#+id/group_indicator"
android:layout_width="30dip"
android:layout_height="40dip"
android:src="#android:drawable/arrow_down_float" />
<TextView
android:id="#+id/lblListHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dip"
android:gravity="center_vertical"
android:textColor="#f9f93d"
android:textSize="17dp" />
</LinearLayout>
Set group indicator image in your adapter according to isExpand() method
#Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
String headerTitle = (String) getGroup(groupPosition);
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_group, null);
}
TextView lblListHeader = (TextView) convertView.findViewById(R.id.lblListHeader);
ImageView groupIndicator = (ImageView) convertView.findViewById(R.id.group_indicator);
lblListHeader.setTypeface(null, Typeface.BOLD);
lblListHeader.setText(headerTitle);
if (isExpanded)
groupIndicator.setImageResource(android.R.drawable.arrow_up_float);
else
groupIndicator.setImageResource(android.R.drawable.arrow_down_float);
return convertView;
}
This is a customized way of implementation to achieve that what we want
It will help you completely!!
If it would be helpful to you then you can accept it.
this is efficient way to set indicator attributes settings_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_empty="true">
<layer-list>
<item
android:left="20dp"
android:right="-30dp"
android:top="120dp"
android:bottom="10dp"
android:drawable="#drawable/arrow_down">
</item>
</layer-list>
</item>
<item android:state_expanded="true">
<layer-list>
<item
android:left="20dp"
android:right="-30dp"
android:top="120dp"
android:bottom="10dp"
android:drawable="#drawable/arrow_up"
>
</item>
</layer-list>
</item>
Used into:
<ExpandableListView android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:groupIndicator="#drawable/settings_selector"
/>
I have used a DrawerLayout with a ListView to generate a sliding menu. I want to do the following things;
I want to change the color of my selected listrow to black and keep it the same till I select some other row, i.e when I click on mytask row in the sliding menu, that row should be highlighted to black and when I open the sliding menu again I want that row still to be highlighted till I select some other row.how can I do it?
I want to make a orange color view visible when that row is clicked. At present my view gets visible,but when I select some other row the previous rows view still is visible. How to fix that?
My codes are as follows.please guide me step by step.
activity_home.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">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:visibility="visible"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/darker_gray"
android:dividerHeight="0dp"
android:listSelector="#drawable/sel"
android:background="#3e3e3e"/>
</android.support.v4.widget.DrawerLayout>
custom_drawer.xml
<?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"
>
<LinearLayout
android:id="#+id/itemLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:layout_marginTop="0dp"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
>
<ImageView
android:id="#+id/drawer_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="25dp"
android:layout_marginTop="7dp" />
<TextView
android:id="#+id/drawer_itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textSize="14dp"
android:layout_marginLeft="24dp"
android:textColor="#android:color/white"
android:layout_toRightOf="#+id/drawer_icon"
android:text="TextView" />
<View
android:layout_width="2dp"
android:layout_height="fill_parent"
android:background="#android:color/black"
android:layout_marginBottom="0.01dp"
android:layout_marginTop="0.01dp"
android:layout_marginLeft="9dp"
></View>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/drawer_itemName"
android:layout_marginRight="18dp"
android:src="#android:drawable/arrow_down_float" />
<View
android:id="#+id/vieworange"
android:layout_width="8dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/menushade"
android:visibility="visible" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.01dp"
android:background="#android:color/black"
android:layout_marginBottom="0.01dp"
android:layout_marginTop="0.01dp"
></View>
</LinearLayout>
<View
android:id="#+id/vieworangelist"
android:layout_width="8dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:visibility="gone"
android:background="#color/orange" />
</RelativeLayout>
selector.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/black" android:state_activated="false"/>
<item android:drawable="#android:color/black" android:state_activated="false" android:state_pressed="false"/>
<item android:drawable="#android:color/black" android:state_pressed="true"/>
<item android:drawable="#android:color/black" android:state_enabled="true" ></item>
<item android:drawable="#android:color/black" android:state_activated="true"/>
</selector>
Adapter class
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
DrawerItemHolder drawerHolder;
View view = convertView;
if (view == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
drawerHolder = new DrawerItemHolder();
String font="font/Dosis-SemiBold.otf";
//final Typeface tp=Typeface.createFromAsset(.getAssets(), font);
final Typeface tp=Typeface.createFromAsset(getContext().getAssets(), font);
view = inflater.inflate(layoutResID, parent, false);
drawerHolder.ItemName = (TextView) view
.findViewById(R.id.drawer_itemName);
drawerHolder.ItemName.setTypeface(tp);
drawerHolder.icon = (ImageView) view.findViewById(R.id.drawer_icon);
drawerHolder.vieworange=(View)view.findViewById(R.id.vieworangelist);
//drawerHolder.vieworange.setVisibility(view.VISIBLE);
view.setTag(drawerHolder);
} else {
drawerHolder = (DrawerItemHolder) view.getTag();
}
DrawerItem dItem = (DrawerItem) this.drawerItemList.get(position);
drawerHolder.ItemName.setText(dItem.getItemName());
if(dItem.getImgResID()!=0)
{
drawerHolder.icon.setImageDrawable(view.getResources().getDrawable(
dItem.getImgResID()));
}
else
{
drawerHolder.icon.setImageBitmap(dItem.bmp);
}
return view;
}
private static class DrawerItemHolder {
TextView ItemName;
ImageView icon;
View vieworange;
}
}
Use this function and call it each time you want to change the row color. What this function does is changing all the other row's background to it's default color, and the pressed row's background to the new color.
public void colorMenuRow(ListView lv, int position)
{
// Changing all rows to default background color
for (int i = 0; i < lv.getCount(); i++) {
View listRow = (View) lv.getChildAt(i);
if(listRow != null)
listRow.setBackgroundColor(Color.parseColor("#ffffff"));
}
// Changing current row color
View view = (View) lv.getChildAt(position);
view.setBackgroundColor(Color.parseColor("#000000"));
}
I have implemented expandablelistview in android app and also implemented divider in it.
I have one problem in not getting the divider between the last item of the child and next group header.
Following image is how I want :
But following is what I'm getting:
Here if you compare both images the divider between the CID and About Set is not coming how to implement that divider ?
Also the groupIndicator is not changing inspite of providing the xml in the groupindicator containing the item tag with 2 different images in android:state_expanded and android:state_empty.
But the property of android:state_expanded and android:state_empty doesn't appear.
It's very easy to Implement.
1- We will add divider in groub_item_layout and child_item_layout:
group_item_layout :
<?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="wrap_content"
android:background="#color/white"
android:minHeight="50dp"
android:orientation="vertical">
<View
android:id="#+id/adapter_divider_top"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#B6B6B6" />
<TextView
android:id="#+id/tv_adapter_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:paddingBottom="10dp"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:text="Home"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/primary_text" />
</LinearLayout>
child_item_layout :
<?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="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv_adapter_desc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:text="description"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#212121" />
<View
android:id="#+id/adapter_divider_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/divider" />
</LinearLayout>
2- In your Adapter getChildView() and getGroupView() Methods:
#Override
public View getGroupView(int groupPosition, boolean isExpanded, View view, ViewGroup viewGroup) {
if (view == null) {
view = mInflater.inflate(R.layout.group_item_layout, null);
mGroupViewHolder = new GroupViewHolder();
mGroupViewHolder.tvTitle = (TextView) view.findViewById(R.id.tv_adapter_title);
mGroupViewHolder.dividerTop = view.findViewById(R.id.adapter_divider_top);
view.setTag(mGroupViewHolder);
} else {
mGroupViewHolder = (GroupViewHolder) view.getTag();
}
// That if you want to show divider in expanded group only.
// If you want to show divider in all group items remove this block.
if (isExpanded) {
mGroupViewHolder.dividerTop.setVisibility(View.VISIBLE);
} else {
mGroupViewHolder.dividerTop.setVisibility(View.INVISIBLE);
}
// That if you want to show divider in expanded group only.
String myTitle = getGroup(groupPosition);
if(myTitle != null) {
mGroupViewHolder.tvTitle.setText(myTitle);
}
return view;
}
#Override
public View getChildView(final int groupPosition, int childPosition, boolean isLastChild, View convertView, final ViewGroup parent) {
if (view == null) {
view = mInflater.inflate(R.layout.child_item_layout, null);
mChildViewHolder = new ChildViewHolder();
mChildViewHolder.tvDesc = (TextView) view.findViewById(R.id.tv_adapter_desc);
mChildViewHolder.dividerBottom = view.findViewById(R.id.adapter_divider_bottom);
view.setTag(mChildViewHolder);
} else {
mChildViewHolder = (ChildViewHolder) view.getTag();
}
if(isLastChild) {
mChildViewHolder.dividerBottom.setVisibility(View.VISIBLE);
} else {
mChildViewHolder.dividerBottom.setVisibility(View.INVISIBLE);
}
Timesheet timesheet = getChild(groupPosition, childPosition);
if(timesheet != null) {
mChildViewHolder.tvDesc.setText(timesheet.getDescription());
}
return view;
}
Hope this helps anyone.
Instead of using ExpandableListView's divider, you can make your own. Set the background of the lists's parent elements to
android:background="#drawable/top_divider"
Where drawable/top_divider.xml contains
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-1dp" android:right="-1dp" android:bottom="-1dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#android:color/black" />
</shape>
</item>
</layer-list>
Firstly make custom expandable listview...
then add different divider to header and its child
Refer the code(header of expandable listview xml):-
<?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="match_parent"
android:background="#000000" >
<ImageView
android:id="#+id/divider_top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/divider_vertical" />
<TextView
android:id="#+id/lblListHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/divider_top"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:textColor="#c5e26d"
android:textSize="17dp" />
<ImageView
android:id="#+id/divider_bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lblListHeader"
android:layout_centerHorizontal="true"
android:background="#drawable/divider" />
</RelativeLayout>
I have a class extending a list fragment, and for some reason, the fragment is not receiving the list item clicks. I have narrowed down the problem to the row items, but I still can't see what the problem is. Here is my XML. Any ideas?
<?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"
android:orientation="horizontal"
android:focusable="true">
<ImageButton
android:id="#+id/image_button"
android:layout_width="120px"
android:layout_height="120px"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/text_view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"/>
Here is how I inflate this layout in my custom adapter:
public View getView(int position, View convertView, ViewGroup parent){
LayoutInflater vi = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = vi.inflate(R.layout.list_item, parent, false);
T t = list.get(position);
TextView tv1 = (TextView) view.findViewById(R.id.text_view1);
tv1.setText(t.getName());
ImageButton image= (ImageButton) view.findViewById(R.id.image_button);
image.setBackgroundColor(Color.parseColor("blue"));
return view;
}
I don't see any reason for android:focusable="true" in your parent layout, unless you're trying to achieve what seems to be your problem : switch focus from the list to the list item. Remove that element from your layout and it will work fine.
Revised version :
<?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"
android:orientation="horizontal"
android:focusable="true">
<ImageButton
android:id="#+id/image_button"
android:layout_width="120px"
android:layout_height="120px"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/text_view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"/>
I'm trying to have a ListView with icon and text but there is a little problem as you can see in the screen shot (only a very small part of text is visible!):
Here is the xml files creating this layout:
//The overall layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<ListView
android:id="#+id/ListView01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
// this layout is for single rows
<?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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/lIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Edit: This is the getView method of my custom adapter.
public View getView(int position, View convertView, ViewGroup parent) {
View myView = convertView;
cu.moveToPosition(position);
if (convertView == null) {
LayoutInflater li = getLayoutInflater();
myView = li.inflate(R.layout.listicon, null);
ImageView imageView = (ImageView) myView.findViewById(R.id.lIcon);
myView.setLayoutParams(new GridView.LayoutParams(60, 90));
myView.setPadding(8, 8, 8, 8);
byte[] b = Base64.decode(cu.getString(2),Base64.DEFAULT);
imageView.setImageBitmap(BitmapFactory.decodeByteArray(b, 0, b.length));
TextView textView = (TextView) myView.findViewById(R.id.lText);
textView.setText(cu.getString(1));
}
//cu.moveToNext();
int catID = cu.getInt(0);
myView.setTag((Object) catID);
return myView;
}
Try setting layout_width of the ListView and TextView to fill_parent
EDIT: you're resetting list item width in the getView. Either remove or correct your code
Use a relative layout for your rows and place the text right of the image as below :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/lIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/lText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/lIcon"/>
</RelativeLayout>
This is related to the way single row is inflated in the adapter
You should try using
LayoutInflater#inflate(layoutId, parent, false)
as suggested in this answer:
https://stackoverflow.com/a/1662611
Try this layout for the row layout:
Adjust the IDs to yours.. also notice the android:layout_toRightOf id.
<?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="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/bimage"
android:layout_height="20dip"
android:layout_width="20dip"
android:layout_gravity="left|center"
android:layout_marginTop="10dip"
android:layout_marginLeft="5dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<TextView
android:id="#+id/btitle"
android:layout_toRightOf="#id/bimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="8dip"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:textSize="18dip"
android:textColor="#ffffff"
android:gravity="center_vertical"
/>
</RelativeLayout>