I have an activity with events organised in a timeline. But it looks ugly.
I want to design a more beautiful timeline like this one.
Is there any simple way or a library to draw lines between elements like in my example?
<ScrollView
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/text_data"
android:layout_above="#+id/button_trimite"
android:id="#+id/scroll_timeline"
android:layout_marginBottom="7dp"
>
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/timelineTable"
>
</TableLayout>
</ScrollView>
This is my xml. But my TableLayout is generated dynamically because I need to sort my events.
for (final Event e : events) {
if(e.getDate().equals(dataComp)) {
//tablerow with event entry
final TableRow row = new TableRow(getActivity());
row.setLayoutParams(new TableRow.LayoutParams(
TableRow.LayoutParams.MATCH_PARENT,
TableRow.LayoutParams.WRAP_CONTENT));
if (indexForDrawable % 2 == 0)
row.setBackgroundResource(R.drawable.marcaj_event_albastru);
else
row.setBackgroundResource(R.drawable.marcaj_event_portocaliu);
TextView txtEvent = new TextView(getActivity());
txtEvent.setText(" "+ e.getHour() +"-"+e.getType()+"-"+e.getTitle());
txtEvent.setTextColor(Color.BLACK);
txtEvent.setTextSize(TypedValue.COMPLEX_UNIT_DIP, trEvent);
txtEvent.setTypeface(Typeface.create(tf, Typeface.BOLD));
row.addView(txtEvent);
row.setClickable(true);
final String date = e.getDate(), hour = e.getHour(), title = e.getTitle(),
type = e.getType(), descriere = e.getDescriere();
final int finalResource = resource;
final int finalIndexForDrawable = indexForDrawable;
row.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
row.setBackground(getActivity().getResources().getDrawable(finalResource));
showPopup2(date, hour, type, title, descriere, row, finalIndexForDrawable);
}
});
timelineTable.addView(row, new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT));
indexForDrawable++;
}
else {
//tablerow with date
final TableRow row = new TableRow(getActivity());
row.setLayoutParams(new TableRow.LayoutParams(
TableRow.LayoutParams.MATCH_PARENT,
TableRow.LayoutParams.WRAP_CONTENT));
TextView txtEvent = new TextView(getActivity());
// txtEvent.setText("\n" + dataSplit1[0]+months.indexOf(dataSplit11));
txtEvent.setText("\n" + e.getDate().substring(0, 5));
txtEvent.setTextSize(TypedValue.COMPLEX_UNIT_DIP, trDate);
row.addView(txtEvent);
timelineTable.addView(row, new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT));
dataComp = e.getDate();
//tablerow with event entry
final TableRow row3 = new TableRow(getActivity());
row3.setLayoutParams(new TableRow.LayoutParams(
TableRow.LayoutParams.MATCH_PARENT,
TableRow.LayoutParams.WRAP_CONTENT));
if (indexForDrawable % 2 == 0)
row3.setBackgroundResource(R.drawable.marcaj_event_albastru);
else
row3.setBackgroundResource(R.drawable.marcaj_event_portocaliu);
TextView txtEvent3 = new TextView(getActivity());
txtEvent3.setText(" "+ e.getHour() +"-"+e.getType()+"-"+e.getTitle());
txtEvent3.setTextColor(Color.BLACK);
txtEvent3.setTextSize(TypedValue.COMPLEX_UNIT_DIP, trEvent);
txtEvent3.setTypeface(Typeface.create(tf, Typeface.BOLD));
row3.addView(txtEvent3);
row3.setClickable(true);
final String date3 = e.getDate(), hour3 = e.getHour(), title3 = e.getTitle(),
type3 = e.getType(), descriere3 = e.getDescriere();
timelineTable.addView(row3, new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT));
indexForDrawable++;
}
You may have to create your own custom adapter but I am using array adapter for your reference. Also giving item layout for list view, hope you will manage your code accordingly.
items.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#android:color/black" />
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="7dp"
android:layout_centerVertical="true"
android:layout_marginLeft="7dp"
android:background="#drawable/dot" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:padding="20dp"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
dot.xml which is a drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<stroke
android:width="1dp"
android:color="#android:color/black" />
<solid android:color="#android:color/white" />
And in acivity you can use adapter like this:
list.setAdapter(new ArrayAdapter<String>(this, R.layout.item, R.id.textView1, items));
Hope this helped!
If you just want a line displayed i recommend you to create a Drawable for this.
Heres a little example:
Layout file
<?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"
android:background="#drawable/line">
</LinearLayout>
and the line.xml Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="3dp">
<shape >
<stroke android:width="1dp" android:color="#android:color/holo_purple"/>
</shape>
</item>
<item android:left="4dp">
<shape>
<solid android:color="#ffffff"/>
</shape>
</item>
</layer-list>
The Layer-list may also be changed to use up additional Drawables as the ones you are already using.
An example using draw-9 might look like this:
line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<nine-patch android:src="#drawable/point" android:dither="true"/>
</item>
<!-- <item android:left="3dp">
<shape >
<stroke android:width="1dp" android:color="#android:color/holo_purple"/>
</shape>
</item>
<item android:left="4dp">
<shape>
<solid android:color="#ffffff"/>
</shape>
</item> -->
</layer-list>
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="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:background="#drawable/line" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:background="#drawable/line"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:layout_gravity="center_horizontal"
android:background="#drawable/line" />
</LinearLayout>
and my point.9.png
to apply a draw-nine-patch you must mark the parts to be streched with black color on the borders.
Related
I am creating an APP that has several boxes based off some database data. These boxes need to display specific information, of course, in a specific format.
Programatically, I have tried over the last couple days... RelativeLayout, LinearLayout, GridLayout, and even TableLayout and can't get the proper results.
This is the layout I am trying to achieve....
Here is the basic portion of the code I have so far...
// Create Main Box for spacing
RelativeLayout acctrl = new RelativeLayout(this);
RelativeLayout.LayoutParams acctrlp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, 225);
acctrlp.setMargins(15, 5, 15, 5);
acctrl.setBackgroundResource(R.drawable.main_account_box);
acctrl.setId(R.id.rlAcctId);
acctrl.setClickable(true);
acctrl.setOnClickListener(acctclick);
acctrl.setOnLongClickListener(acctlongclick);
// Account New Ball & Count
RelativeLayout rlNew = new RelativeLayout(this);
RelativeLayout.LayoutParams rlpNew = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
rlpNew.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
rlpNew.addRule(RelativeLayout.CENTER_IN_PARENT);
rlNew.setId(R.id.rlNewId);
ImageView ivNew = new ImageView(this);
RelativeLayout.LayoutParams ivpNew = new RelativeLayout.LayoutParams(168,168);
ivpNew.addRule(RelativeLayout.CENTER_HORIZONTAL);
ivpNew.addRule(RelativeLayout.CENTER_IN_PARENT);
ivNew.setBackgroundResource(R.drawable.acct_msg_ball_blue);
rlNew.addView(ivNew,ivpNew);
TextView tvNewCount = new TextView(this);
RelativeLayout.LayoutParams tvpNewCount = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
tvpNewCount.addRule(RelativeLayout.CENTER_HORIZONTAL);
tvpNewCount.addRule(RelativeLayout.CENTER_VERTICAL);
tvNewCount.setId(R.id.tvNewCountId);
tvNewCount.setTextColor(COLOR.Black);
tvNewCount.setPadding(0, -5, 0, 0);
tvNewCount.setTextSize(25);
tvNewCount.setText(String.valueOf(acct.get_new()));
rlNew.addView(tvNewCount,tvpNewCount);
TextView tvNewTitle = new TextView(this);
RelativeLayout.LayoutParams tvpNewTitle = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
tvpNewTitle.addRule(RelativeLayout.CENTER_HORIZONTAL);
tvpNewTitle.addRule(RelativeLayout.BELOW,R.id.tvNewCountId);
tvNewTitle.setTextColor(COLOR.Black);
tvNewTitle.setTextSize(10);
tvNewTitle.setPadding(0, 5, 0, 0);
tvNewTitle.setText("new");
rlNew.addView(tvNewTitle,tvpNewTitle);
acctrl.addView(rlNew);
// Account Name
TextView tvName = new TextView(this);
RelativeLayout.LayoutParams tvpName = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
tvpName.addRule(RelativeLayout.ALIGN_PARENT_TOP);
tvpName.addRule(RelativeLayout.RIGHT_OF,R.id.rlNewId);
tvpName.addRule(RelativeLayout.LEFT_OF,R.id.tvCountId);
tvName.setId(R.id.tvNameId);
tvName.setTextColor(COLOR.Black);
tvName.setPadding(5, 0, 5, 5);
tvName.setTextSize(25);
tvName.setText(acct.get_name());
tvName.setEllipsize(TextUtils.TruncateAt.END);
tvName.setSingleLine();
acctrl.addView(tvName, tvpName);
// Account Position
TextView tvPos = new TextView(this);
RelativeLayout.LayoutParams tvpPos = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
tvpPos.addRule(RelativeLayout.RIGHT_OF,R.id.rlNewId);
tvpEmail.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
tvpPos.addRule(RelativeLayout.LEFT_OF,R.id.tvCountId);
tvPos.setId(R.id.tvPosId);
tvPos.setTextColor(COLOR.Black);
tvEmail.setPadding(5, 5, 5, 0);
tvEmail.setTextSize(15);
tvEmail.setText(acct.get_pos());
tvEmail.setEllipsize(TextUtils.TruncateAt.END);
tvEmail.setSingleLine();
acctrl.addView(tvPos, tvpPos);
Not sure if this is the best way to go after all this. It uses a RelativeLayout for the overall box. It then uses another RelativeLayout to get the ball and the two different height TextViews centered in it on the left. I haven't even started on the TOTAL JOBS section but that will probably need ANOTHER internal RelativeLayout or LinearLayout to achieve the centering of the diff height TextViews.
Other than the confusing complexity, the current problems involve the ball...
1) I can't get the ball to center vertically in the box... no matter what I try. This code puts it in the upper left corner.
2) I had to "fudge" the centering of the two different height TextViews within the ball using some negative padding based of of CENTER_VERTICAL. Not sure if that is the best way to achieve it.
Any suggestions on how to fix what I have an ideally obtain these results would be greatly appreciated... I am pulling out my hair with this one. Like I said, I tried a variety of different Layout commands, but it seems the farther I get into them, I am missing some key element with positioning, centering or overlaying.
Thanks...
There is xml code for required UI with image
SampleActivity.java
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.SpannableString;
import android.text.style.ForegroundColorSpan;
import android.text.style.RelativeSizeSpan;
import android.widget.TextView;
public class SampleActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sample_layout);
TextView textView = (TextView) findViewById(R.id.tvinitial);
String newName = "New";
SpannableString ss1 = new SpannableString(newName);
ss1.setSpan(new RelativeSizeSpan(0.6f), 0, newName.length(), 0); // set size
ss1.setSpan(new ForegroundColorSpan(Color.WHITE), 0, newName.length(), 0);
textView.setText("");
textView.append("15");
textView.append("\n");
textView.append(ss1);
}
}
Drawable XML
circle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="35dp" />
<solid android:color="#4cc9df" />
<stroke android:width="1dp" android:color="#4cc9df" />
</shape>
</item>
</selector>
round_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#android:color/white" />
<stroke android:width="1dp" android:color="#android:color/white" />
</shape>
</item>
</selector>
sample_layout.xml
<?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="#e9e9e9"
android:orientation="vertical"
android:layout_gravity="center_vertical"
android:padding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/round_corner"
android:padding="10dp">
<ImageView
android:id="#+id/arrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:background="#null"
android:src="#drawable/ic_loc_arrow"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#+id/arrow"
android:layout_marginLeft="10dp">
<TextView
android:id="#+id/tvinitial"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_centerVertical="true"
android:background="#drawable/circle"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:padding="5dp"
android:text="#string/new_name"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/tvinitial">
<TextView
android:id="#+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:fontFamily="sans-serif-condensed"
android:text="ADAM JUNE"
android:textColor="#474747"
android:textSize="25sp"
android:textStyle="normal"/>
<TextView
android:id="#+id/second_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="25dp"
android:fontFamily="sans-serif-condensed"
android:text="Accountant"
android:textColor="#474747"
android:textSize="16sp"
android:textStyle="bold"/>
</FrameLayout>
</RelativeLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#+id/arrow"
android:layout_toLeftOf="#+id/right_layout">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed"
android:gravity="center"
android:text="TOTAL JOBS"
android:textColor="#3881a4"
android:textSize="14sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed"
android:gravity="center"
android:text="125"
android:layout_marginTop="10dp"
android:textColor="#3881a4"
android:textSize="50sp"
android:textStyle="bold"/>
</FrameLayout>
</FrameLayout>
<View
android:id="#+id/right_layout"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_below="#+id/arrow"/>
</RelativeLayout>
</LinearLayout>
ic_loc_arrow.png
ic_loc_arrow.png
Mobile ScreenShot
Mobile ScreenShot
I hope this will resolve your issue.
I have a calendar that looks like this:
The Class that draws this Calendar is called MonthView and is a TableLayout:
class MonthView extends TableLayout{...}
The function that creates the calendar is shown below:
TextView btn;
TableRow tr;
void DisplayMonth(boolean animationEnabled){
...
for(int i = 0; i < 6; i++){
if(day > cal.getActualMaximum(Calendar.DAY_OF_MONTH))
break;
tr = new TableRow(context);
tr.setWeightSum(0.7f);
for(int j = 0; j < 7; j++){
btn = new TextView(context);
...
}
}
The function that changes the color of the background day is below:
public void changeBackgroundDay(List<Class> classes){
for(int i = 0; i < getChildCount; i++){
TableRow row = (TableRow)getChildAt(i);
for(int j = 0; j < row.getChildCount(); j++){
TextView t = (TextView)row.getChildAt(j);
for(int tam = 0; tam < classes.size(); tam++){
Class class = classes.get(tam);
// ---- THIS IS THE PART THAT I WANT TO CHANGE ----//
if(class.getTypePlanning().equals("null"){
t.setBackgroundColor(Color.parseColor("#777777");
}
else if(class.getTypePlanning().equals("R")){
t.setBackgroundColor(Color.parseColor("#2477B2");
}
// -----------------------------------------------//
...
}
}
}
}
I want to, instead of just changing the background color of the TextView, draw 4 circles on this TextView. In some cases, it can be drawn just 2 or 3. For example, like is shown in the pictures:
I've tried to make a Layer list with items that contains shape and color and defined this Layer list as the background of the TextView, but it didn't work really well.
The Layer list xml is below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layerlist"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<item android:id="#+id/itemnaoplanejado"
android:bottom="1dp" android:right="1dp">
<shape android:shape="oval" android:visible="false">
<size android:width="2dp"
android:height="2dp"/>
<solid android:color="#777777"/>
</shape>
</item>
<item android:id="#+id/itemplanejado"
android:bottom="1dp" android:left="1dp">
<shape android:shape="oval" android:visible="false">
<size android:width="2dp"
android:height="2dp"/>
<solid android:color="#8CC9F3"/>
</shape>
</item>
....
</layer-list>
On the function changeBackgroundDay I do this:
public void changeBackgroundDay(List<Class> classes){
...
if(class.getTypePlanning().equals("null"){
LayerDrawable layerDrawable = (LayerDrawable) getResources().getDrawable(R.drawable.layerlistday);
layerDrawable.findDrawableByLayerId(R.id.itemnotplanned).setVisible(true, false);
t.setBackground(layerDrawable);
}
}
Any ideas?
Thanks in advance.
Tyr this
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/num_txt"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="0dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="My name is NON"
android:textColor="#FFFFFF"
android:textSize="10dp" />
</RelativeLayout>
</RelativeLayout>
save in drwable bg_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#FF0000" android:width="5dip"/>
<solid android:color="#FF0000"/>
</shape>
Edited Code -----
<?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="match_parent" >
<TextView
android:id="#+id/num_txt"
android:layout_width="185dp"
android:layout_height="185dp"
android:layout_alignParentTop="true"
android:layout_marginTop="163dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="My name is NON"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dp"
android:textSize="10dp" />
<TextView
android:id="#+id/TextView02"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/TextView01"
android:layout_marginRight="90dp"
android:layout_marginTop="122dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="My name is NON"
android:textColor="#FFFFFF"
android:textSize="10dp" />
<TextView
android:id="#+id/TextView01"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignTop="#+id/num_txt"
android:layout_toRightOf="#+id/num_txt"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="My name is NON"
android:textColor="#FFFFFF"
android:textSize="10dp" />
</RelativeLayout>
I have a drawable resource drawable/badge.xml which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="#000" />
</shape>
...and is used inside a layout file layout/badge.xml which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="18dp"
android:layout_height="18dp" >
<View
android:id="#+id/badge"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/badge" />
<TextView
android:id="#+id/badge_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:textColor="#fff"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
Inside a BaseExpandableListAdapters getChildView method there is this code:
...
LinearLayout badgeContainer = (LinearLayout) convertView.findViewById(R.id.badge_container);
for (String property : properties) {
RelativeLayout badge = (RelativeLayout) inflater.inflate(R.layout.badge, badgeContainer, false);
badge.setLayoutParams(new LinearLayout.LayoutParams(50, 50));
((TextView) badge.findViewById(R.id.badge_text)).setText(course.property);
badge.findViewById(R.id.badge).getBackground().setColorFilter(getColorResourceByProperty(property), PorterDuff.Mode.DST);
badgeContainer.addView(badge);
}
...
So what I'm trying to do is change the background color of the drawable badge for each property, but this code still yields in all badges to have a black background. What am I doing wrong? I've also tried many other PorterDuff modes without results.
After fighting some more I got it working like this:
drawable/circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#fff" />
</shape>
layout/badge.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/badge_text"
android:layout_width="16dp"
android:layout_height="16dp"
android:gravity="center_vertical|center_horizontal"
android:background="#drawable/circle"
android:textColor="#color/white"
android:textSize="12sp"
android:layout_marginLeft="1dp"
android:textStyle="bold" />
and inside the adapter:
LinearLayout badgeContainer = (LinearLayout) convertView.findViewById(R.id.badge_container);
for (int i = 0; i < course.properties.length; i++) {
TextView badge = (TextView) inflater.inflate(R.layout.badge, badgeContainer, false);
badge.setText(course.properties[i]);
int colorID = context.getResources().getIdentifier("property_" + course.properties[i], "color", context.getPackageName());
badge.getBackground().setColorFilter(context.getResources().getColor(colorID), Mode.MULTIPLY);
badgeContainer.addView(badge);
}
I'm build a android app with a tabhost and It works well. The problem is that I want to customize the tabhost with a selector xml file but I dont know how I do.
My tabhost is this:
http://i.stack.imgur.com/xYMuh.png
And I would like to have this:
http://i.stack.imgur.com/UJu1K.png
My code of MainActivity as I create the tabs through a layout:
// Tab1
View tab1 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
TextView title1 = (TextView)tab1.findViewById(R.id.titleTab);
title1.setText("¿Qué hacer?");
ImageView img1 = (ImageView)tab1.findViewById(R.id.iconTab);
img1.setImageResource(R.drawable.what);
mTabHost.addTab(mTabHost.newTabSpec("que hacer").setIndicator(tab1),
HacerFragment.class, null);
// Tab2
View tab2 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
TextView title2 = (TextView)tab2.findViewById(R.id.titleTab);
title2.setText("¿A dónde ir?");
ImageView img2 = (ImageView)tab2.findViewById(R.id.iconTab);
img2.setImageResource(R.drawable.where);
mTabHost.addTab(mTabHost.newTabSpec("donde").setIndicator(tab2),
DestacadoFragment.class, null);
// Tab3
View tab3 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
TextView title3 = (TextView)tab3.findViewById(R.id.titleTab);
title3.setText("Lee tu mapa");
ImageView img3 = (ImageView)tab3.findViewById(R.id.iconTab);
img3.setImageResource(R.drawable.read);
mTabHost.addTab(mTabHost.newTabSpec("mapa").setIndicator(tab3),
LectorFragment.class, null);
// Tab4
View tab4 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
TextView title4 = (TextView)tab4.findViewById(R.id.titleTab);
title4.setText("Captura");
ImageView img4 = (ImageView)tab4.findViewById(R.id.iconTab);
img4.setImageResource(R.drawable.capture);
mTabHost.addTab(mTabHost.newTabSpec("captura").setIndicator(tab4),
CapturaFragment.class, null);
And my tab_indicator.xml (each tab):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:background="#color/tabhost_background"
android:padding="5dp" >
<ImageView android:id="#+id/iconTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/buscar24" />
<TextView android:id="#+id/titleTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/iconTab"
style="#drawable/tab_selector" />
</RelativeLayout>
Thanks!!
tab_indicator.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_selector"
android:padding="5dp" >
<ImageView
android:id="#+id/iconTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:clickable="false"
android:focusable="false"
android:background="#drawable/image_selector" />
<TextView
android:id="#+id/titleTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/iconTab"
android:layout_centerHorizontal="true"
android:clickable="false"
android:focusable="false"
android:text="HELLO" />
</RelativeLayout>
background_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected_thick_bg" android:state_selected="true"> </item>
<item android:drawable="#drawable/unselected_light_bg" android:state_selected="false">
</item>
</selector>
image_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected_thick_image" android:state_selected="true"> </item>
<item android:drawable="#drawable/unselected_light_image"
android:state_selected="false"> </item>
</selector>
Here is the problem: the text view border is smaller than the cell size in the column that contains "Looooooong Teeeeext"
I use this background drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#1e11d5"/>
</shape>
and This layout for the table
<LinearLayout android:id="#+id/ll_country"
android:layout_height="fill_parent" android:layout_width="fill_parent">
<ScrollView android:id="#+id/ScrollView11"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:fillViewport="true">
<HorizontalScrollView
android:layout_width="fill_parent" android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/layout_table"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="5dip">
<!-- <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:stretchColumns="0,1" android:id="#+id/country_table">
</TableLayout> -->
</LinearLayout>
</HorizontalScrollView>
</ScrollView>
</LinearLayout>
this is the code that generates the table
for (int current = 0; current < 100 ; current++) {
row = new TableRow(this);
TextView t;
for(int i =0 ; i < 20 ; i++){
t = new TextView(this);
t.setTextSize(20);
t.setText(" text "+i+" ");
t.setBackgroundDrawable(border);
if((i== 4) && (current == 5)){
t.setText(" looooooong teeeeext ");
}
//t.setWidth(20);
t.setTextColor(Color.BLACK);
row.addView(t,LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
t.setBackgroundDrawable(border);
}
table.addView(row, new TableLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
}
layout_table.addView(table, new TableLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
Can you also show how you are generating the border drawable? I would suggest using
t.setBackgroundResource(R.drawable.border)
instead of
t.setBackgroundDrawable(border)
and see if this fixes the problem.