Develop Reference

How to scroll two-columns buttons in Activity

I can include six buttons and displays correctly as .
Now I want to include more than six buttons in scrollable view, but I can't handle it for matching available space, creating 2 rows (or columns if portrait).
Can you provide some way to achieve this?
References:
I have a composed button created using the following code:
public class ImageButtonText extends RelativeLayout {
ImageButton button;
TextView label;
Holder holder;
private void init() {
LayoutInflater li = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
li.inflate(R.layout.big_button, this, true);
button = (ImageButton) findViewById(R.id.button);
label = (TextView) findViewById(R.id.label);
/*initialise button and label*/
}
}
and the following xml:
<?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:layout_margin="#dimen/component_margin">
<ImageButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/text_box"
android:scaleType="fitCenter"/>
<TextView
android:id="#+id/label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="#dimen/component_margin"
android:gravity="center"
android:text="Sample"
android:textSize="#dimen/text_size"/>
</RelativeLayout>
finally add to the main layout using:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<ImageButtonText
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
custom:buttonBackground="#drawable/states_green"
android:src="#drawable/ic_safe_call"
android:contentDescription="#string/btn1_info"
android:text="#string/btn1text"
android:textColor="#color/text_green" />
<ImageButtonText
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
custom:buttonBackground="#drawable/states_red"
android:src="#drawable/ic_private_call"
android:contentDescription="#string/btn2_info"
android:text="#string/btn2text"
android:textColor="#color/text_red" />
</LinearLayout>
NOTES
May be a different approach also. My final goal is to display multiple buttons (each containing a stretched image and bottom aligned text) in two rows if portrait or three columns if landscape. All this wrapped in scrollable view.
UPDATE:
I solved using RecyclerView :D Thanks everyone

An easy and dynamic approach would be to create a custom List of buttons and put it into a GridView with 2 Colums resp. Rows.
This adapter i did for my navigation has an icon and a text, maybe it helps you. The icon is on the Left side as you can read in this line: holder.textView.setCompoundDrawablesWithIntrinsicBounds(item.get_icon(), 0, 0, 0); Te second one would be the icon above text.
Anyway, I think you will need a custom layout, wich you can easily create doing a new xml file with a Relative or LinearLayout and put an ImageView and a TextView into it and give as a parameter in constructor layoutResourceId.
The height of a listItem you can define in this layout xml file.
The GridView you can Configure different for Landscape and Portrait
In landscape mode the layout from the layout-land/ will be used
In portrait mode the layout from the layout-port/ will be used
public class NavigationAdapter extends ArrayAdapter<NavItem> {
List<NavItem> data;
Context context;
int layoutResourceId;
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
NavHolder holder;
if(row == null)
{
LayoutInflater inflater = ((Activity)context).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new NavHolder();
holder.textView = (TextView)row.findViewById(android.R.id.text1);
row.setTag(holder);
}
else
{
holder = (NavHolder) row.getTag();
}
NavItem item = data.get(position);
holder.textView.setText(item.get_title());
holder.textView.setCompoundDrawablesWithIntrinsicBounds(item.get_icon(), 0, 0, 0);
//holder.textView.setCompoundDrawablePadding(10);
return row;
}
public NavigationAdapter(Context context, int layoutResourceId, List<NavItem> data) {
super(context, layoutResourceId, data);
this.layoutResourceId = layoutResourceId;
this.context = context;
this.data = data;
}
static class NavHolder
{
TextView textView;
}
}

Alertdialog inflating RecyclerView android

Im trying to add a view to my Material dialog using setView(...), I want to have my inflated view look like this
That is the recycler view will always take up roughly 2/3 of the screen. That includes when it is empty, where it will be an empty space and when it has many lines of data, where it can become scroll able.
This is my aim. However when I try to inflate this View inside my dialog I get the following..
That screen represents an empty recyclerview taking up most of the screen.
Here is the code
//Adding to dialog
mMaterialDialog = new MaterialDialog(mContext)
.setView(new ISEQDialog(mContext))
//.setBackgroundResource(R.drawable.dublin_watchlist)
.setPositiveButton("OK", new View.OnClickListener() {
#Override
public void onClick(View v) {
mMaterialDialog.dismiss();
}
});
mMaterialDialog.show();
}
});
//View
public class ISEQDialog extends FrameLayout{
SeekBar mBuySeekBar;
TextView mStockHeading;
Context mContext;
View mView;
RecyclerView mStockDataList;
public ISEQDialog(Context context) {
super(context);
this.mContext = context;
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if(inflater != null){
mView = inflater.inflate(R.layout.stock_dialog, null);
}
mStockDataList = (RecyclerView) mView.findViewById(R.id.rv_stock_data_list);
//
mStockDataList.setAdapter(new ISEQDialofRecyclerViewAdapter());
LinearLayoutManager layoutManager = new LinearLayoutManager(mContext);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
layoutManager.scrollToPosition(0);
mStockDataList.setLayoutManager(layoutManager);
//mStockDataList.addItemDecoration(new DividerItemDecoration(mContext.getDrawable(R.drawable.divider)));
addView(mView);
}
}
//RecyclerViewAdapter
public class ISEQDialofRecyclerViewAdapter extends RecyclerView.Adapter<ISEQDialofRecyclerViewAdapter.ViewHolder>{
#Override
public ISEQDialofRecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return null;
}
#Override
public void onBindViewHolder(ISEQDialofRecyclerViewAdapter.ViewHolder holder, int position) {
}
#Override
public int getItemCount() {
return 0;
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public ViewHolder(View itemView) {
super(itemView);
}
}
}
//XML
<?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="match_parent">
<TextView
android:id="#+id/tv_stock_dialog_heading"
android:layout_weight="0.2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center"
android:textColor="#color/list_divider_pressed"
android:layout_gravity="top"
android:background="#null"
android:textSize="35dp"
android:text="Portfolio Value"
/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_stock_data_list"
android:layout_weight="0.7"
android:layout_height="0dp"
android:divider="#drawable/list_selector"
android:dividerHeight="1dip"
android:layout_width="match_parent">
</android.support.v7.widget.RecyclerView>
<SeekBar
android:id="#+id/sb_buy_stocks"
android:layout_weight="0.1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center"
android:indeterminate="false" />
</LinearLayout>

I had the same issue trying to add the recycler view to the dialog.
When i tried troubleshooting i realized that only the constrcutor of the recycler view adapter gets called and stops. The remaining methods as getItemCount(), onCreateViewHolder() and onBindViewHolder() doesn't gets called.
So i did the following
1) i replaced the recyclerview with the linear layout.
2) referenced the linear layout as view holder in code.
3) Then i manually iterated through the list i was to pass to the recycler view and on so i inflated the single row xml file, referenced the views and set text on it.
4) I added the view to the view holder and displayed the dialog. It works
5) This operation inflates the view as we are not recycling anything so if the items to display is below 10-15 you can use this as well or else hits the performance of the app a slight.
In Activity
Dialog myTestDialog = new Dialog(getActivity());
myTestDialog.setContentView(R.layout.order_details_orders_to_deliver);
//get the layout group
ViewGroup layout = (ViewGroup) myTestDialog.findViewById(R.id.order_details_recycler_view);
List<OrderItemDetails> orderItemDetailsList = mDatabaseOperationsAdapter.getOrderDetail(ordersToDeliver.getOrderId());
for (int x = 0; x < orderItemDetailsList.size(); x++) {
OrderItemDetails orderItemDetails = orderItemDetailsList.get(x);
View view = inflater.inflate(R.layout.order_details_row, null);
TextView itemName = (TextView) view.findViewById(R.id.order_details_item_name);
TextView quantity = (TextView) view.findViewById(R.id.order_details_item_quantity);
TextView itemTotal = (TextView) view.findViewById(R.id.order_details_item_total);
itemName.setText(orderItemDetails.getProductName());
quantity.setText(String.valueOf(orderItemDetails.getProductQuantity()));
itemTotal.setText(String.valueOf(orderItemDetails.getTotalPrice()));
layout.addView(view);
}
myTestDialog.show();
Note : order_details_recycler_view is the linear layout not recycler view as i changed it to linear layout keeping the id same.
List orderItemDetailsList is the list that was to be passed to the adapter.

This problem is related to RecyclerView as i know, when it is empty it fills layout, unless you give fixed layout_height.
There is trick, which is you check list of items before you create alertDialog. If empty, create alertDialog without RecyclerView, just with warning text. Otherwise create your custom alertDialog.

Dynamic Grid Layout

I want to implement grid, which will be populated dynamically. I want to know what is the best approach to implement this Relative layout(List View) or Grid Layout?

You can generate a GridView dynamically.
GridView would contain of ImageView and TextView as per your need. You will have to use your custom adapter. In it's getView method, populate the ImageView and TextView.
Example:
GridView item.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/txtItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="trebuchet"
android:textColor="#android:color/black"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
Java code:
A POJO class for item:
public class Item
{
String title;
Drawable image;
//getter setter
}
Adapter class:
//getView method in your adapter class
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
View itemView = convertView;
ViewHolder holder = null;
if (itemView == null)
{
final LayoutInflater layoutInflater =
(LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
itemView = layoutInflater.inflate(resourceId, parent, false);
holder = new ViewHolder();
holder.imgItem = (ImageView) itemView.findViewById(R.id.imgItem);
holder.txtItem = (TextView) itemView.findViewById(R.id.txtItem);
itemView.setTag(holder);
}
else
{
holder = (ViewHolder) itemView.getTag();
}
Item item = getItem(position);
holder.imgItem.setImageDrawable(item.getImage());
holder.txtItem.setText(item.getTitle());
return itemView;
}
Now add adapter data in your Activity class and then set that adapter to GridView.
Refer to this and this
Hope it helps.

Simply use GridView with a custom adapter. Each time you want the view to update, call notifyDataSetChanged() on the adapter.

You want GridView. Easy example here. In your case, you will need to make an XML layout for each row to accommodate both your TextView and ImageView. Other answers here address that.

ListView items drawn on top of each other when scrolling (Android)

In a fragment, I have a ListView that has a custom ParseQueryAdapter<T>. The problem may not have anything to do with Parse, although I'm not sure.
As I was testing my app, I noticed something very strange. When I would scroll down my ListView, all the visible ListView items would be drawn on top of the next ListView item as seen in the second image below.
The list initialized properly as such:
As you can see, in my list item layout, I have an ImageView (ParseImageView to be specific) and a TextView. The TextView now displays some notes (don't mind the ID user_name_text_view) and the ImageView displays a placeholder blank profile picture.
When I scrolled down, the list looked like:
Here's my list view layout named fragment_post_view_list_view:
<?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="vertical" >
<ListView
android:id="#+id/post_list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
Here's my list item layout named list_item_post_view:
<?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="wrap_content">
<com.parse.ParseImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignParentLeft="true"
android:background="#drawable/com_facebook_profile_picture_blank_square" />
<TextView
android:id="#+id/user_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/icon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/link_blue" />
</RelativeLayout>
Here's my adapter named PostViewListViewAdapter:
public class PostViewListViewAdapter extends ParseQueryAdapter<Post> {
// call superclass with a query to populate list view
public PostViewListViewAdapter(Context context, final String[] postsObjectIds) {
super(context, new ParseQueryAdapter.QueryFactory<Post>(){
public ParseQuery<Post> create() {
ParseQuery<Post> query = Post.getQuery();
query.whereContainedIn("objectId", Arrays.asList(postsObjectIds));
return query;
}
});
}
// this is similar to getView method in an adapter
#Override
public View getItemView(Post post, View v, ViewGroup parent) {
if(v == null) {
v = View.inflate(getContext(), R.layout.list_item_post_view, null);
}
super.getItemView(post, v, parent);
TextView usernameTextView = (TextView) v.findViewById(R.id.user_name_text_view);
usernameTextView.setText(post.getNotes()); // some string
return v;
}
}
How can I fix this problem?
Is this an issue with XML or Java?
I was following the two tutorials from Parse and the example from the Parse docs:
MealSpotting
Parse Query Adapter
I set the adapter and ListView here:
View rootView = inflater.inflate(R.layout.fragment_post_view_list_view, container, false);
mPostsObjectIds = SOME_STRING[];
PostViewListViewAdapter adapter = new PostViewListViewAdapter(getActivity(), mPostsObjectIds);
ListView listView = (ListView) rootView.findViewById(R.id.post_list_view);
listView.setAdapter(adapter);
I've tried getting rid of the ParseImageView in my list item layout, but my TextViews still draw on top of each other when I scroll.
Edit:
I forgot to mention that the list items display on top of each other after an orientation change.
I tested this on my Galaxy S5 (Android version 4.4.2 and Parse 1.4.1).
In my Activity, I show the Fragment here (called PostViewListViewFragment):
getSupportFragmentManager().beginTransaction().add(android.R.id.content, new PostViewListViewFragment()).commit();

Try below 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:orientation="vertical" >
<ListView
android:id="#+id/post_list_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none" >
</ListView>
</RelativeLayout >

Make Sure your adapter like this:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View rowView = convertView;
// reuse views
if (rowView == null) {
LayoutInflater inflater = context.getLayoutInflater();
rowView = inflater.inflate(R.layout.rowlayout, null);
// configure view holder
ViewHolder viewHolder = new ViewHolder();
viewHolder.text = (TextView) rowView.findViewById(R.id.TextView01);
rowView.setTag(viewHolder);
}
// fill data
ViewHolder holder = (ViewHolder) rowView.getTag();
String s = names[position];
holder.text.setText(s);
return rowView;
}
}
PS:You should watch this Google IO video about Listview,and here is the slides.

First create a ViewHolder class
static class ViewHolder {
protected TextView usernameTextView;
}
Then change your getItemView method like below
public View getItemView (Post post, View convertView , ViewGroup parent)
{
ViewHolder viewHolder = null;
if (convertView == null)
{
LayoutInflater inflator = context.getLayoutInflater();
convertView = inflator.inflate(R.layout.list_item_post_view, null);
viewHolder = new ViewHolder();
viewHolder.usernameTextView = (TextView)convertView.findViewById(R.id.user_name_text_view);
convertView.setTag(viewHolder);
convertView.setTag(R.id.user_name_text_view, viewHolder.usernameTextView);
}
else
{
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.usernameTextView.setText(post.getNotes()); // some string
return convertView;
}

The problem seems to be in your list item layout -
Change it to 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="wrap_content">
<com.parse.ParseImageView
android:id="#+id/icon"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/user_name_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/icon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/link_blue" />
</RelativeLayout>
Probably you have extra background for each list item set that is causing such effect.
Alter and watch.
Hope this gives you idea!

Try changing your list view layout height to match_parent.

Credit to #VedPrakash for helping me fix this.
In case it helps anyone, I fixed the problem by replacing the fragment not adding it. So I changed this line from:
getSupportFragmentManager().beginTransaction().add(android.R.id.content, new PostViewListViewFragment()).commit();
to:
getSupportFragmentManager().beginTransaction().replace(android.R.id.content, new PostViewListViewFragment()).commit();

Android - how to align list view items to be nicely spaced left and right align?

I am trying to add an image to my ListView to make it look more like a button. I would like the images to be a little smaller, maybe 60% of current. And the images to lign up nicely on the right in a column. Here is a screen of what I currently have:
and here is my list view xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16sp"
android:layout_width="match_parent"
android:drawableRight="#drawable/arrow_button"
>
</TextView>
any idea what I am doing incorrectly?
The ListView that contains this TextView is defined like this:
One note, the way I create and work with my Lists is with the ListAdapter, using code like this:
Question q = new Question ();
q.setQuestion( "This is a test question and there are more than one" );
questions.add(q);
adapter = new ArrayAdapter<Question>( this, R.layout.questions_list, questions);
setListAdapter(adapter);
Thanks!

Ahh. You are doing the correct thing using a compound drawable. Not sure if there is a better way to maybe have the spacing in your compound drawable expand, but I know this'll work.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="10dp"
android:textSize="16sp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
<View
android:layout_height="64dip"
android:layout_width="64dip"
android:background="#drawable/arrow_button"
android:layout_centerVertical="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
Basically just pointing out using the align parent right and left. You may want to add some margins or padding to them. Also make sure to vertically center your elements.

With the comment and advice that Frank Sposaro gave, you will be able to position your views correctly.
For your next problem, I advice you to make your own adapter similar to this:
private class CustomAdapter extends ArrayAdapter<Question> {
private LayoutInflater mInflater;
public CustomAdapter(Context context) {
super(context, R.layout.row);
mInflater = LayoutInflater.from(context);
}
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.row, null);
holder = new ViewHolder();
holder.text = (TextView) convertView.findViewById(R.id.mTextView);
holder.image = (ImageView) convertView.findViewById(R.id.mImage);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
//Fill the views in your row
holder.text.setText(questions.get(position).getText());
holder.image.setBackground... (questions.get(position).getImage()));
return convertView;
}
}
static class ViewHolder {
TextView text;
ImageView image;
}
In your onCreate:
ListView mListView = (ListView) findViewById(R.id.mListView);
mListView.setAdapter(new CustomAdapter(getApplicationContext(), questions));
Another example for a ListView with an Adapter can be found here