Develop Reference

RecyclerView item with GridLayoutManager shows different view positions

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?

android:layout_centerInParent / RelativeLayout

i have 3 layers, all of them are RelativeLayouts or based on it:
content-class
overlay-class
infobox-layout
In my code i generate an Overlay-object which inflates a infobox-layout. And then i add the Overlayer to the Content-Layer.
My goal is to center (vertical and horizontal) the Info-box in parent (=overlay) but it doesn't work. It's TOP/LEFT. This is the default behavior, I think.
So here is my code.
I add the Overlayer to the Content-Layer like this:
private void openContent (String url,final ContentLayer content) {
overlay = new Overlay(context, url);
content.addView(overlay);
}
Here is the Overlayer:
public class Overlay extends RelativeLayout {
// some stuff
public Overlay(Context context, String url) {
super(context);
this.context = context;
this.url = url;
init(context, null, -1);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
this.setTag(context.getResources().getString(R.string.overlay));
RelativeLayout.LayoutParams lp = new RelativeLayoutout.LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
this.setLayoutParams(lp);
this.setBackgroundColor(context.getResources().getColor(R.color.black));
this.getBackground().setAlpha(80);
isMax = getValueInPrefs();
inflateLayout();
}
private void inflateLayout () {
String service = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(service);
inflater.inflate(R.layout.infobox_wrapper, this, true);
}
// some stuff
}
Last but no least, here is my infobox-layout, called infobox_wrapper.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/epaper_webview_wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"> <!-- DOESN'T WORK!! -->
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/grau_actionbar">
<Button
android:id="#+id/header_button_close"
android:layout_width="50dp"
android:layout_height="50dp"
android:text="X"
android:layout_alignParentRight="true"
android:layout_margin="5dp"/>
<Button
android:id="#+id/header_button_min_max"
android:layout_width="50dp"
android:layout_height="50dp"
android:text="M"
android:layout_toLeftOf="#id/header_button_close"
android:layout_margin="5dp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/webview_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grau_actionbar"
android:layout_below="#id/header">
<WebView
android:id="#+id/epaper_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</RelativeLayout>
I am thankful for any help or hint.

I solved the problem like this:
I deleted android:layout_centerInParent="true" in RelativeLayout(#+id/epaper_webview_wrapper) and set it dynamically in openContent-method:
private void openContent (String url,final ContentLayer content) {
overlay = new Overlay(context, url);
RelativeLayout epaper_webview_wrapper= (RelativeLayout)overlay.findViewById(R.id.epaper_webview_wrapper);
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)epaper_webview_wrapper.getLayoutParams();
lp.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
epaper_webview_wrapper.setLayoutParams(lp);
content.addView(overlay);
}

How to write Adapter of ListView for displaying multiple pie chart in Android

I want to use ListView to display pie charts in every row of ListView.
This is my pie chart class
public class PieChart extends View {
public PieChart(Context context) {
super(context);
}
public PieChart(Context context, AttributeSet attrs){
super(context, attrs);
}
public void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.RED);
canvas.drawArc(new RectF(0, 0, 150, 150), 180, 90, true, paint);
paint.setColor(Color.BLUE);
canvas.drawArc(new RectF(0, 0, 150, 150), 90, 90, true, paint);
}
}
This is my layout for the ListView
<?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:background="#color/background"
android:orientation="vertical" >
<TextView
style="#style/title_bar"
android:text="#string/scenario_reports" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/list_view_item_bg"
android:cacheColorHint="#00000000"
android:divider="#color/list_view_divider"
android:dividerHeight="2dip" >
</ListView>
</LinearLayout>
This is my layout for the row of ListView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<view
android:id="#+id/pie_chart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.bob.hellotest.GameView" />
<TextView
android:id="#+id/scenario_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/pie_chart"
android:padding="10dp"
android:textSize="16sp" />
</RelativeLayout>
This is onCreate method of Activity
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.scenario_report);
}
My question is the Adapter
public View getView(int position, View row, ViewGroup parent) {
LayoutInflater li = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = li.inflate(R.layout.list_view_scenario_pie, parent, false);
View pie = (View) rowView.findViewById(R.id.pie_chart);
TextView name = (TextView) rowView.findViewById(R.id.scenario_name);
????????????????
return rowView;
}
I'm stuck in the Adapter, I don't know how to draw it in the Adapter.
Can anyone help. Cheers!!

Change the layout of the List Row to
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#+id/pie_chart"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/scenario_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/pie_chart"
android:padding="10dp"
android:textSize="16sp" />
</RelativeLayout>
Your getView() should be something like this
public View getView(int position, View row, ViewGroup parent) {
if(row == null) {
row = this.inflator.inflate(layout, null);
}
ViewGroup vg = (ViewGroup)row.findViewById(R.id. pie_chart);
PieChart pieChart = new PieChart(row.getContext);
vg.addView(PieChar);
return row;
}

How to display two lines of text per choice for a Single Choice List in Android?

This is a great tutorial on how to get a Single Choice List in Android to work, but I need one more thing: I want two lines of text instead of one. So, it would look like this:
|-----------------------------|
| FIRST LINE OF TEXT      (o) | <- this is a "RadioButton". Ideally,
| second line of text         | it would be centered vertically.
|-----------------------------|
This SO question is related, but I'm an Android newb, so it's a little over my head. Can anyone break it down for me so that I can use it in the context of the tutorial I linked above?

You need to create the custom layout for this.
for display list as it like
this is your layout file
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/mylistview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
this is your custom list view style
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text view 1"/>
<TextView
android:id="#+id/text2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text view 2"/>
</LinearLayout>
<RadioButton android:id="#+id/radiobtn"
android:width="wrap_content" android:height="wrap_content" />
</LinearLayout>
now you have to implement any adapter like BaseAdapter,ArrayAdapter etc.
and use this custom list view in that
like this way
private class CustomAdapter extends ArrayAdapter<Order> {
private ArrayList<Model> items;
public OrderAdapter(Context context, int textViewResourceId, ArrayList<Model> items) {
super(context, textViewResourceId, items);
this.items = items;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.custom_list, null); // here you have to implement custom_list.xml file
}
Model m = items.get(position);
if (m != null) {
TextView text1 = (TextView) v.findViewById(R.id.text1);
TextView text2 = (TextView) v.findViewById(R.id.text2);
RadioButton rb = (RadioButton) v.findViewById(R.id.radiobtn);
text1.setText(m.text1);
text1.setText(m.text2);
rb.setChecked(m.isChecked);
}
return v;
}
}
here is your Model class for your list item
private class Model{
String text1;
String text2;
boolean isChecked;
}

Reading the source code of simple_list_item_single_choice.xml, we can figure out how to make a custom widget that implements Checkable, like this:
File simple_list_item_2_single_choice.xml
<?xml version="1.0" encoding="utf-8"?>
<customwidgets.CheckedLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckedTextView
android:id="#+id/text3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:checkMark="?android:attr/listChoiceIndicatorSingle" />
</customwidgets.CheckedLinearLayout>
That is, we add as many TextViews as we need and make last one to be a CheckedTextView.
Then, in our custom CheckedLinearLayout we find which one is the Checkable child of the layout and dispatch each method of Checkable we implement to that child, like this:
File CheckedLinearLayout.java
package customwidgets;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Checkable;
import android.widget.LinearLayout;
/**
* Useful class inside a ListView that needs to have checkable items,
* such as radio buttons (single_choice) or check boxes (multiple_choice).
*/
public class CheckedLinearLayout extends LinearLayout implements Checkable {
private Checkable checkedView;
public CheckedLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean isChecked() {
return checkedView == null ? false : checkedView.isChecked();
}
#Override
public void setChecked(boolean checked) {
if (checkedView != null) checkedView.setChecked(checked);
}
#Override
public void toggle() {
if (checkedView != null) checkedView.toggle();
}
#Override
protected void onFinishInflate() {
super.onFinishInflate();
int count = getChildCount();
for (int i = count - 1; i >= 0; i--) {
View view = getChildAt(i);
if (view instanceof Checkable) {
checkedView = (Checkable) view;
break;
}
}
}
}
Of course, in the desired xml file of the layout, we set the ListView to be single choiced:
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="singleChoice" >
</ListView>

Custom layout based on existed layout

I'm trying to create custom layout for android. It normally draws on screen, but without inner views. Draws only my group_box.xml. How i can get access from my custom layout to inner views (TextView with id test) or how to draw they?
main.xml
<my.example.GroupBox
android:layout_width="match_parent"
android:layout_height="40sp">
<TextView android:text="TEST"
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</my.example.GroupBox>
group_box.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/groupbox">
<LinearLayout style="#style/groupboxContent"
android:id="#+id/content"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<TextView style="#style/groupboxLabel"
android:id="#+id/caption"
android:text="#string/visit"/>
</RelativeLayout>
GroupBox.java
public class GroupBox extends LinearLayout {
public GroupBox(Context context) {
super(context);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.group_box, this);
}
public GroupBox(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.group_box, this);
}
}

you can access to the elements via setters and getters.
put this in your GroupBox.java
caption = (TextView) findViewById(R.id.caption);
public void setLabel(CharSequence text) {
caption.setText(text);
}
add an id to your control in xml:
<my.example.GroupBox
android:layout_width="match_parent"
android:layout_height="40sp"
android:id="mycontrol">
<TextView android:text="TEST"
android:id="#+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</my.example.GroupBox>
then find your control in the main activity and do this:
yourcontrol = (GroupBox) findViewById(R.id.mycontrol)
yourcontrol.setLabel("test");