Custom tabs in a Android App - android

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>

Related

Highlight selected item on a gridview

I am trying to highlight a selected item on a gridview (dinamically populated with an adapter), but it is not working.
I did research and i even tried to copy exactly the selector of other people and even the way that they put it on the gridview but i am not being able to put it working.
It just doesn't do anything. The background of each item is white (like i wanted), but when i press it (it it is on top of a textview or a imageview (part of the gridview item) it doesn't do anything. If i press out of the imageView or textview, it will do what i want.
EDIT : I have listeners for the images and the textviews, so it might be interfering with this selector ? How could i solve this problem?
Here is the code of the activity where i create the gridview :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.highway_appselection_activity);
gridView= (GridView) findViewById(R.id.HighwayGridView);
gridView.setSelector(new ColorDrawable(Color.BLACK));
Here is the xml of each item of this gridview : (where i define the background as the selector)
<?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:id="#+id/HighwayGridViewItem"
android:orientation="vertical"
android:background="#drawable/highway_appselection_selector"
android:padding="5dp">
<cm.aptoide.lite.HighwayCustomImageView
android:layout_width="72dp"
android:layout_height="72dp"
android:id="#+id/highwayGridViewItemIcon"
android:background="#FFFFFF"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:padding="5dp"
android:clickable="true"/>
<!-- does this need to be my custom image view anymore? CHeck on that-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/highwayGridViewItemName"
android:textColor="#000000"
android:text="texto de teste"
android:textSize="10sp"
android:focusable="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:layout_weight="2"
android:textStyle="bold"
android:paddingRight="5dp"
android:layout_marginLeft="5dp"
android:clickable="true"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/info_icon"
android:padding="5dp"
android:clickable="true"
android:id="#+id/highwayGridViewItemInfoButton"/>
And here is my selector :
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<item android:state_enabled="true" android:state_pressed="true" android:drawable="#color/green_main_color" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#color/green_main_color" />
<item android:state_enabled="true" android:state_selected="true" android:drawable="#color/green_main_color" />
<item android:drawable="#android:color/white" />
I might be missing something, I am new to Android, sorry if there is any rookie mistake.
Create file selector.xml as:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/green_main_color" android:state_pressed="true"/>
<item android:drawable="#color/green_main_color" android:state_selected="true"/>
<item android:drawable="#color/white"/>
</selector>
Put your selector file in drawable folder as drawable/selector.xml and then in your gridView:
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:listSelector="#drawable/list_selector"
android:scrollbars="none" />
try this :
int nPrevSelGridItem = -1;
gridview.setOnItemClickListener(new OnItemClickListener() {
View viewPrev;
#Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
try {
if (nPrevSelGridItem != -1) {
viewPrev = (View) gridview.getChildAt(nPrevSelGridItem);
viewPrev.setBackgroundColor(Color.WHITE);
}
nPrevSelGridItem = position;
if (nPrevSelGridItem == position) {
//View viewPrev = (View) gridview.getChildAt(nPrevSelGridItem);
view.setBackgroundColor(getResources().getColor(R.color.orange));
}
} catch (Exception e) {
e.printStackTrace();
}
}
});

Android style/shade properly ListItem layout

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"/>

How to Make LinearLayout Clickable

I have a linearlayout like this
<LinearLayout
android:id="#+id/optionlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/divider"
android:orientation="vertical" >
</LinearLayout>
I want to add another xml view into this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/option"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!--
<View
android:layout_width="match_parent"
android:layout_height="0.5dip"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#2fd275"
/>
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp" >
<ImageView
android:id="#+id/option_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/logout" />
<TextView
android:id="#+id/option_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"
android:visibility="gone" />
<TextView
android:id="#+id/option_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:text="Signout"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#616161" />
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="0.5dip"
android:background="#d3d3d3" />
</LinearLayout>
via the code
for (int i = 0; i < opt.length; i++) {
View view = inflater.inflate(R.layout.option_item, optionlist,
false);
view.setBackgroundResource(R.drawable.optionlist);
view.setTag(opt_image[i]);
view.setClickable(true);
view.setFocusable(true);
view.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// ADD your action here
int res = (Integer) v.getTag();
switch (res) {
case R.drawable.logout:
signout();
break;
}
}
});
final TextView tv = (TextView) view.findViewById(R.id.option_name);
final ImageView iv = (ImageView) view
.findViewById(R.id.option_image);
tv.setText(opt[i]);
iv.setImageResource(opt_image[i]);
optionlist.addView(view);
}
Now on click of the layout i want to load this xml file as below...but i am not able to get the backgroud loaded on the click event. Please give suggestion what am I doing wrong?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/holo_green_dark" android:state_focused="true"/>
<item android:drawable="#color/holo_green_dark" android:state_enabled="false" android:state_pressed="true"/>
<item android:drawable="#color/white"/>
</selector>
First get id of LinearLayout from xml and then perform onClickListener on it instead of whole View
View view = inflater.inflate(R.layout.option_item, optionlist, false);
LinearLayout layout = view.findViewByIt(R.id.optionlist);
layout.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// ADD your action here
int res=(Integer) v.getTag();
switch(res)
{
case R.drawable.logout: signout();
break;
}
}
});
try this.. hope it works..
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#ff0000" />//ur onclick desired color
<item android:state_focused="false"
android:drawable="#android:color/transparent" />focused color
</selector>
just create new xml and add this code in drawable and set ur linear layoyut backgrout as its name like android:background="#drawable/createdxmlname"
<LinearLayout
android:id="#+id/optionlist"
android:layout_below="#id/divider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/createdxmlname"
android:clickable="true">
android:clickable="false"
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:clickable="false"
android:layout_width="40dp"
android:layout_height="40dp"
android:text="Cinema"
android:textSize="13sp"
android:layout_marginRight="10dp" />
<Button
android:clickable="false"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="Check in"
android:textSize="13sp" />
</LinearLayout>
Create in drawable an pressed_layout.xml with the following content
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
And in your layout add it as background resource:
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/pressed_layout"
android:clickable="true">
</LinearLayout>
layout.setclickble="true" in XML file and
layout.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View arg0) {
// TODO Auto-generated method stub
}
});
We can also use onClick in XML of layout,and use that method in java file,like if onClick="next",then in java file we have to use the method .
public void next()
{
// do something
}

Changing background of drawable instance in ListView

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);
}

How to make a Relativelayout clickable?

I have a layout like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:addStatesFromChildren="true"
android:clickable="true"
android:duplicateParentState="true"
android:focusable="true"
android:paddingBottom="10dip" >
<ImageView
android:id="#+id/imagView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:focusable="false"
android:background="#drawable/imageView_bg"
android:focusableInTouchMode="false" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="18dip"
android:background="#drawable/button_bg"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left|center_vertical"
android:paddingLeft="25dip"
android:textColor="#ffffff"
android:textSize="20dip" />
</RelativeLayout>
button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_pressed"
android:state_pressed="true"/>
<item android:drawable="#drawable/btn_normal"/>
</selector>
imageView_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/img_pressed"
android:state_pressed="true"/>
<item android:drawable="#drawable/img_normal"/>
</selector>
The image view and button have pressed images.when the user clicks on the view ,wants to press both imageview and button(Showing pressed images).But it does not show pressed images. How to achieve this? Where is the problem?
Thanks in advance
RelativeLayout rl = (RelativeLayout)findViewById(R.id.mainLayout);
rl.setOnClickListener(new View.OnClickListener(){
public void onClick(View v) {}
});
I think it solves the problem
((RelativeLayout)findViewById(R.id.mainLayout)).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
ViewGroup viewGroup = (ViewGroup) view;
for (int i = 0; i < viewGroup .getChildCount(); i++) {
View viewChild = viewGroup .getChildAt(i);
viewChild.setPressed(true);
}
}
});
Simple.Place RelativeLayout inside the FrameLayout.

Categories

Resources