Develop Reference

Custom component not rendering properly anymore

I'm new to creating custom components on android and it was a fun, annoying, and very educational experience. I was able to make my quite complex custom component and I'm very happy with it. But after I moved it to a directory and out of it, it doesn't display anything anymore.
My project consist of a lot of fragments and my custom component is used on one of them. So when I moved all those fragments in a directory, AS told me that someone can't find something on my custom component class. So I included the custom component class inside the fragments directory. Everything worked fine but when I tried to use the custom view on a different layout which is not a fragment's, the custom component doesn't display anything. I made every variable of the custom view class to public then moved it outside the fragments folder. Now, it doesn't display anything anymore. Please point out what I've done wrong.
This is custom component class.
public class CheckOutItem extends ConstraintLayout {
public Context ctx;
public Paint mPaint;
public Rect mRect;
int mSquareColor;
public ImageView imgThumbnail;
public TextView lblAbbrev, lblFullName;
public ConstraintLayout lytMain;
public CheckOutItem(Context context) {
super(context);
ctx = context;
init(null);
}
public CheckOutItem(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.checkout_item, this);
ctx = context;
init(attrs);
}
public CheckOutItem(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
ctx = context;
init(attrs);
}
private void init(#Nullable AttributeSet set){
inflate(ctx, R.layout.checkout_item, this);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mRect = new Rect();
if(set == null){
return;
}
TypedArray ta = getContext().obtainStyledAttributes(set, R.styleable.CheckOutItem);
this.imgThumbnail = findViewById(R.id.imgItemThumbnail);
this.lblAbbrev = findViewById(R.id.lblItemAbbrevName);
this.lblFullName = findViewById(R.id.lblItemFullName);
this.lytMain = findViewById(R.id.lytMain);
this.lblAbbrev.setText(ta.getText(R.styleable.CheckOutItem_abbrevText));
this.lblAbbrev.setTextSize(ta.getDimension(R.styleable.CheckOutItem_abbrevTextSize, 1f));
this.lblAbbrev.setTextColor(ta.getColor(R.styleable.CheckOutItem_abbrevTextColor, Color.BLACK));
this.lblFullName.setText(ta.getText(R.styleable.CheckOutItem_fullNameText));
this.lblFullName.setTextSize(ta.getDimension(R.styleable.CheckOutItem_fullNameTextSize, 1f));
this.lblFullName.setTextColor(ta.getColor(R.styleable.CheckOutItem_fullNameTextColor, Color.BLACK));
this.lblFullName.setBackgroundColor(ta.getColor(R.styleable.CheckOutItem_fullNameBackgroundColor, Color.WHITE));
this.lytMain.setBackgroundColor(ta.getColor(R.styleable.CheckOutItem_mainBackgroundColor, Color.LTGRAY));
ta.recycle();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mRect.left = 0;
mRect.right = getWidth();
mRect.top = 0;
mRect.bottom = getHeight();
canvas.drawRect(mRect, mPaint);
}
}
This is my layout.
<?xml version="1.0" encoding="utf-8"?>
<merge 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.support.constraint.ConstraintLayout
android:id="#+id/lytMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/border_bg">
<ImageView
android:id="#+id/imgItemThumbnail"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars[9]"
tools:visibility="gone" />
<TextView
android:id="#+id/lblItemAbbrevName"
android:layout_width="0dp"
android:layout_height="60dp"
android:gravity="center"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblItemFullName"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="1dp"
android:layout_marginEnd="1dp"
android:gravity="center"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblItemAbbrevName"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</merge>
This is my attrs.xml.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CheckOutItem">
<attr name="thumbnail" format="string"/>
<attr name="abbrevText" format="string"/>
<attr name="abbrevTextSize" format="dimension"/>
<attr name="abbrevTextColor" format="color|reference"/>
<attr name="fullNameText" format="string"/>
<attr name="fullNameTextSize" format="dimension"/>
<attr name="fullNameTextColor" format="color|reference"/>
<attr name="textStyle">
<enum name="normal" value="0"/>
<enum name="bold" value="1"/>
<enum name="italic" value="2"/>
</attr>
<attr name="fullNameBackgroundColor" format="color|reference"/>
<attr name="mainBackgroundColor" format="color|reference"/>
</declare-styleable>
</resources>
This is how I use it.
<com.example.android.projectname.CheckOutItem
android:id="#+id/coi2"
android:layout_width="102dp"
android:layout_height="102dp"
android:layout_margin="7.8dp"
app:abbrevText="MP"
app:abbrevTextColor="#color/black"
app:abbrevTextSize="12sp"
app:fullNameBackgroundColor="#color/colorAccent"
app:fullNameText="Make Payment"
app:fullNameTextColor="#color/white"
app:fullNameTextSize="8sp"
app:mainBackgroundColor="#color/transparent"
app:thumbnail="" />

You are inflating your layout twice
public CheckOutItem(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.checkout_item, this);
...
Remove the second inflate in init
private void init(#Nullable AttributeSet set){
// inflate(ctx, R.layout.checkout_item, this); // remove this line
...

Custom View with two TextViews

I want to create a custom view with 2 TextViews, with possibility change text and text appearances from xml. This view should have two state - normal and selected (TextViews style should be different for each state).
I need some example for it.

Custom views are pretty basic and there are examples all over the internet. For something simple like two text views, it's usually easiest to extend LinearLayout.
Here is the LinearLayout with two text views, arranged side by side.
res/double_text.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/left_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"/>
<TextView
android:id="#+id/right_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"/>
</LinearLayout>
Next we define a styleable resource block so we can add custom attributes to our custom layout.
res/values/attrs.xml
<resources>
<declare-styleable name="DoubleText">
<attr name="leftText" format="string" />
<attr name="rightText" format="string" />
<attr name="android:ems" />
</declare-styleable>
</resources>
Next the class file for DoubleText custom view. In here we pull out the custom attributes and set each of the TextViews.
DoubleTextView.java
public class DoubleTextView extends LinearLayout {
LinearLayout layout = null;
TextView leftTextView = null;
TextView rightTextView = null;
Context mContext = null;
public DoubleTextView(Context context) {
super(context);
mContext = context;
}
public DoubleTextView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DoubleText);
String leftText = a.getString(R.styleable.DoubleText_leftText);
String rightText = a.getString(R.styleable.DoubleText_rightText);
leftText = leftText == null ? "" : leftText;
rightText = rightText == null ? "" : rightText;
String service = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater li = (LayoutInflater) getContext().getSystemService(service);
layout = (LinearLayout) li.inflate(R.layout.double_text, this, true);
leftTextView = (TextView) layout.findViewById(R.id.left_text);
rightTextView = (TextView) layout.findViewById(R.id.right_text);
leftTextView.setText(leftText);
rightTextView.setText(rightText);
a.recycle();
}
public DoubleTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mContext = context;
}
#SuppressWarnings("unused")
public void setLeftText(String text) {
leftTextView.setText(text);
}
#SuppressWarnings("unused")
public void setRightText(String text) {
rightTextView.setText(text);
}
#SuppressWarnings("unused")
public String getLeftText() {
return leftTextView.getText().toString();
}
#SuppressWarnings("unused")
public String getRightText() {
return rightTextView.getText().toString();
}
}
Finally, using the custom class is as simple as declaring it in a layout file.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity">
<TextView
android:id="#+id/main_text"
android:text="Hello World!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/custom"/>
<example.com.test.DoubleTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:leftText="Text Left"
app:rightText="Text Right"
android:layout_below="#+id/main_text"/>
</RelativeLayout>
Easy peasy.

How to transfer android's properties to my compound view

I want to create a Compound view which consists of an ImageView a TextView and an EditText
I found this lovely tutorial on how to do that, and my compound view looks great
Now I want to copy all the properties a TextView has , all the properties the EditText has and all the properties the ImageView
so that i can style them via xml inside my custom view.
<declare-styleable name="MyCustomView">
<attr name="mcv_label" format="string" />
<attr name="mcv_fieldText" format="string" />
<attr name="mcv_fieldHint" format="string" />
<attr name="mcv_label_id" format="reference" />
<attr name="mcv_field_id" format="reference" />
</declare-styleable>
And am of course able to define them in xml
the point is I want to do
<com.lenabru.myapp.widget.MyCustomView
style="#style/tableRowStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
mcv:mcv_label_id="#+id/tvLabel"
android:text="#string/someText" <=== this line
/>
without aliasing all the properties into mcv stylable
is it possible to do ?
MyCustomView.java
public class MyCustomView extends TableRow{
private EditText editText;
private TextView label;
private ImageView image;
private int labelId;
private int formFieldId;
public FormField(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
initAttributes(context,attrs, 0);
}
public FormField(Context context) {
super(context);
initAttributes(context,null, 0);
}
private void initAttributes(Context context, AttributeSet attrs, int defStyle) {
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.form_field, this,true);
label = (TextView)findViewById(R.id.label);
editText = (EditText)findViewById(R.id.editText);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FormField, defStyle, 0);
if(a.hasValue(R.styleable.MyCustomView_mvc_label_id)) {
labelId = a.getResourceId(R.styleable.FormField_ff_label_id, 0);
if(labelId!=0) {
label.setId(labelId);
}
}
a.recycle();
}
}

declare-styleable drawableTop

I try implement compound view for my dashboard activity. It's Button with TextView. Need for my theme.
I have attr.xml file
<declare-styleable name="DashboardButton">
<attr name="drawableTop" format="reference"/> <!-- i want set android:drawableTop of button-->
<attr name="btnText" format="string" /> <!-- text about button functionality-->
<attr name="tvText" format="string" /> <!-- additional information -->
</declare-styleable>
also have dashboard_button.xml layout
<?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" >
<Button
android:id="#+id/btn"
style="#style/DashboardButton"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<TextView
style="#style/btn_add_info"
android:id="#+id/txtView"
android:text="0"/>
</RelativeLayout>
also have custom component DashboardButton
public class DashboardButton extends RelativeLayout {
private TextView txtView;
private Button btn;
public DashboardButton(Context context) {
super(context);
}
public DashboardButton(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.dashboard_button, this);
loadViews(attrs);
}
public DashboardButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
LayoutInflater inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.dashboard_button, this);
loadViews(attrs);
}
private void loadViews(AttributeSet attrs) {
txtView = (TextView) findViewById(R.id.txtView);
btn = (Button) findViewById(R.id.btn);
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.DashboardButton);
txtView.setText(a.getString(R.styleable.DashboardButton_tvText));
btn.setText(a.getString(R.styleable.DashboardButton_btnText));
//i think issue here but can't understand what i should do
Drawable topDrawable = a.getDrawable(R.styleable.DashboardButton_drawableTop);
btn.setCompoundDrawables(null, topDrawable, null, null);
a.recycle();
}
public void setTxtViewText(CharSequence text) {
txtView.setText(text);
}
}
and finally i have
<my.package.name.DashboardButton
android:id="#+id/Btn"
style="#style/DashboardButton"
app:btnText="#string/my_function"
app:tvText="#string/add_info"
app:drawableTop="#drawable/function_logo">
</my.package.name.DashboardButton>
All work fine, except app:drawableTop drawable not load at run time, I dont see drawable. Can you help me by advice?

You need to set the bounds for your drawable:
topDrawable.setBounds( new Rect( 0, 0, w, h ) );
or alternatively use:
btn.setCompoundDrawablesWithIntrinsicBounds(null, topDrawable, null, null);

How to put a horizontal divisor line between edit text's in a activity

I'm making an activity to configure my app, and I have to divide the sections of my configuration window with a line. I used this: divider_horizontal_bright, from this example:
http://android.cryx.li/doku.php?id=know:settings:start
However it doesn't work! When I test on my android phone, it doesn't show a horizontal line. Why?
I am using Android 2.1

Try this link....
horizontal rule
That should do the trick.
The code below is xml.
<View
android:layout_width="fill_parent"
android:layout_height="2dip"
android:background="#FF00FF00" />

If this didn't work:
<ImageView
android:layout_gravity="center_horizontal"
android:paddingTop="10px"
android:paddingBottom="5px"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="#android:drawable/divider_horizontal_bright" />
Try this raw View:
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#000000" />

For only one line, you need
...
<View android:id="#+id/primerdivisor"
android:layout_height="2dp"
android:layout_width="fill_parent"
android:background="#ffffff" />
...

How about defining your own view? I have used the class below, using a LinearLayout around a view whose background color is set. This allows me to pre-define layout parameters for it. If you don't need that just extend View and set the background color instead.
public class HorizontalRulerView extends LinearLayout {
static final int COLOR = Color.DKGRAY;
static final int HEIGHT = 2;
static final int VERTICAL_MARGIN = 10;
static final int HORIZONTAL_MARGIN = 5;
static final int TOP_MARGIN = VERTICAL_MARGIN;
static final int BOTTOM_MARGIN = VERTICAL_MARGIN;
static final int LEFT_MARGIN = HORIZONTAL_MARGIN;
static final int RIGHT_MARGIN = HORIZONTAL_MARGIN;
public HorizontalRulerView(Context context) {
this(context, null);
}
public HorizontalRulerView(Context context, AttributeSet attrs) {
this(context, attrs, android.R.attr.textViewStyle);
}
public HorizontalRulerView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setOrientation(VERTICAL);
View v = new View(context);
v.setBackgroundColor(COLOR);
LayoutParams lp = new LayoutParams(
LayoutParams.MATCH_PARENT,
HEIGHT
);
lp.topMargin = TOP_MARGIN;
lp.bottomMargin = BOTTOM_MARGIN;
lp.leftMargin = LEFT_MARGIN;
lp.rightMargin = RIGHT_MARGIN;
addView(v, lp);
}
}
Use it programmatically or in Eclipse (Custom & Library Views -- just pull it into your layout).

Use This..... You will love it
<TextView
android:layout_width="fill_parent"
android:layout_height="1px"
android:text=" "
android:background="#anycolor"
android:id="#+id/textView"/>