Hi I am new to android development. I want to create onclick effects to textview. When I click on the textview it will blink or something effects make. I tried it with change color, but it's not working. How can I make blink effect on textview onclick ??
please help me with example code. thanks in advance :)
The easiest way is to set this background in the TextView:
android:background="?attr/selectableItemBackground"
And if you want to set a different color for the background, set that attr as foreground instead of background.
try this. it worked for me.
android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"
create a xml with name something like txt_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
</selector>
then add in texview xml
android:background="#drawable/txt_bg"
android:clickable="true"
hope it will help.
try below code:-
<Button
android:id="#+id/action"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:layout_margin="5dp"
android:background="#drawable/btn_click"
android:gravity="center"
android:textColor="#color/white"
android:textSize="12sp" />
btn_click.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_hover" android:state_pressed="true"/>
<item android:drawable="#drawable/button"/>
</selector>
or below also
btn_hover.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#000000" />
<gradient
android:angle="270"
android:centerColor="#1a000000"
android:endColor="#33000000"
android:startColor="#android:color/transparent" >
</gradient>
<corners android:radius="5dp" />
</shape>
btn.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:color="#000000"
android:width="1dp"
/>
<gradient
android:angle="270"
android:centerColor="#android:color/transparent"
android:endColor="#android:color/transparent"
android:startColor="#android:color/transparent" >
</gradient>
<corners android:radius="5dp" />
</shape>
btn_click.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_hover" android:state_pressed="true"/>
<item android:drawable="#drawable/btn"/>
</selector>
public class TesteBlinkActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
blink();
}
private void blink(){
final Handler handler = new Handler();
new Thread(new Runnable() {
#Override
public void run() {
int timeToBlink = 1000; //in milissegunds
try{Thread.sleep(timeToBlink);}catch (Exception e) {}
handler.post(new Runnable() {
#Override
public void run() {
TextView txt = (TextView) findViewById(R.id.usage);
if(txt.getVisibility() == View.VISIBLE){
txt.setVisibility(View.INVISIBLE);
}else{
txt.setVisibility(View.VISIBLE);
}
blink();
}
});
}
}).start();
}
Related
I want to create loader in android as same as attached gif
Thanks in advance
Without Plane in your Image I prefer to use ProgressBar
but I will Be More Easy to user SeekBar As Progress Bar
so let`s make it in Simplest way
in Layout XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:hardwareAccelerated="false"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#32aaef"
android:id="#+id/sbHeight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:max="100"
android:progress="0"
android:progressDrawable="#drawable/seekbar_as_progress"
android:thumb="#drawable/plane"
/>
</LinearLayout>
And where seekbar_as_progress is
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape
android:shape="line"
android:useLevel="true">
<stroke
android:width="3dp"
android:color="#c9c9c9"
android:dashGap="20dp"
android:dashWidth="3dp" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape
android:shape="line"
android:useLevel="true">
<stroke
android:width="6dp"
android:color="#ffffff"
android:dashGap="20dp"
android:dashWidth="4dp" />
</shape>
</clip>
</item>
</layer-list>
and #drawable/plane is plane Icon
And In Your Activity
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// DountChart view = new DountChart(this);
setContentView(R.layout.empty);
final SeekBar sbHeight = findViewById(R.id.sbHeight);
sbHeight.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
sbHeight.setOnTouchListener(new View.OnTouchListener(){
#Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});
final int[] progress = {0};
final Handler ha=new Handler();
ha.postDelayed(new Runnable() {
#Override
public void run() {
//call function
if (progress[0] != 100){
AppLogger.log("Prog",progress[0]+"");
progress[0]= progress[0]+1;
sbHeight.setProgress(progress[0]);
ha.postDelayed(this, 100);
}
}
}, 100);
}
and that`s All
I have a selector where I set a circle as the background for the state_selected = true but I want to change the color when I click on the object. How can I do it?
This is how my drawables are set up:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#D0021B"/>
<stroke android:width="2dp" android:color="#910012" />
<size
android:width="50dp"
android:height="50dp" />
<corners android:radius="50dp" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/black" android:state_selected="false" />
<item android:drawable="#drawable/nav_circle" android:state_selected="true" />
</selector>
You can do it programmatically:
public static void colorDrawable(View view, int color) {
Drawable wrappedDrawable = DrawableCompat.wrap(view.getBackground());
if (wrappedDrawable != null) {
DrawableCompat.setTint(wrappedDrawable.mutate(), color);
setBackgroundDrawable(view, wrappedDrawable);
}
}
#TargetApi(Build.VERSION_CODES.JELLY_BEAN)
public static void setBackgroundDrawable(View view, Drawable drawable) {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
view.setBackgroundDrawable(drawable);
} else {
view.setBackground(drawable);
}
}
if you want to change the color at the moment it is pressed, you can use state_pressed.
<item android:state_pressed="true"
android:drawable="#color/pressedColor"/> <!-- pressed state -->
<item android:state_focused="true"
android:drawable="#color/pressedColor"/> <!-- focused state -->
<item android:drawable="#color/colorPrimary"/>
you can also use another drawable under the android:drawable attribute
<item android:state_pressed="true"
android:drawable="#drawable/button_solid"/>
however, if you want to change the background drawable when it is pressed, you can change the button background to a different xml drawable
button.setBackground(getDrawable(R.drawable.selectorDrawable2));
Maybe this will help you :
i=(ImageView)findViewById(R.id.image);
i.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
i.getBackground().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP);
}
});
ImageView xml code :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/nav_circle"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="#+id/image" />
what i basically wanna do is this:
When i click on the button i want its Text color to appear in a different color.
What i tried is this:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/red" />
<item
android:state_pressed="false"
android:color="#000" />
</selector>
and then i did use this selector as drawable on the button android:textColor
but this doesn solve it since it only changes its color while i press the button.
I want it like this:
Default: black
on click: blue
on click again: black
any ideas how to do that? :S
this is my shape for the button (if it matters):
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-1dp"
android:insetLeft="-1dp"
android:insetRight="-1dp">
<selector>
<item android:state_pressed="false">
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/background_grey"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/pq_blue"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
</item>
</selector>
</inset>
thx in advance
EDIT
so i tried to do it programatically and tied the folowing just to see if it changes color´s ..but yea..it doesn´t (it seems like my onCLick event doesnt work):
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.listview_item, container, false);
final Button likeButton = (Button)rootView.findViewById(R.id.btLike);
likeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
String test = "tester";
if(BUTTON_STATE==BUTTON_STATE_ONCE){
likeButton.setTextColor(getResources().getColor(R.color.pq_blue));
BUTTON_STATE = BUTTON_STATE_TWICE;
}else{
likeButton.setTextColor(getResources().getColor(R.color.red));
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
return rootView;
}
}
NOTE: i do all tht stuff in onCreateView since im in a Fragment of my ActionBarActivity(with tabs) if im doing it in the onCreate i get a null pointer exception at findViewById ( since it searches for the ID in my mainActivity, if im right?)
so yea..any ideas?
Your textselector.xml -
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/red" /> <!--selected text colour-->
<item
android:state_focused="true"
android:color="#color/red" />
<item
android:color="#color/blue" /> <!--unselected text colour-->
</selector>
Your button in layout.xml -
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exit"
android:textColor="#drawable/textselector" <!-- SET textselector HERE -->
android:background="#drawable/button_color"/>
You can use this code to do it programmatically:
myButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
ColorStateList myList=myButton.getTextColors();
int myColor=myList.getDefaultColor();
switch(myColor)
{
case Color.BLACK:
myButton.setTextColor(Color.BLUE);
break;
case Color.BLUE:
myButton.setTextColor(Color.BLACK);
break;
}
}
});
If You want to have a behaviour like:
First Click: Button text black
Second Click: Button text blue
third Click: button text black again
I don´t think it´s possible with the selector, also not with state focused. Because if any other view will be clicked, the button is not focused anymore and will loose the textcolor, goes back to default. You have to do it in a programmatically way:
First, set the default textColor to what You want: black inside Your xml. So than You have the color on no press. make a globa variabel to save the state:
private int BUTTON_STATE = 0;
private final int BUTTON_STATE_ONCE = 0;
private final int BUTTON_STATE_TWICE = 1;
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
if(BUTTON_STATE==BUTTON_STATE_ONCE){
button.setTextColor(Color.BLUE);
BUTTON_STATE = BUTTON_STATE_TWICE;
}else if(BUTTON_STATE==BUTTON_STATE_TWICE){
button.setTextColor(Color.BLACK);
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
That´s just a possible solution, there are many ways..
EDIT
for Your code:
Create that global variables like i did in my example above, and use them in the if/else statement:
likeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if(BUTTON_STATE==BUTTON_STATE_ONCE){
likeButton.setTextColor(getResources().getColor(R.color.pqBlue));
BUTTON_STATE = BUTTON_STATE_TWICE;
}else if(BUTTON_STATE==BUTTON_STATE_TWICE){
likeButton.setTextColor(getResources().getColor(R.color.pqBlack));
BUTTON_STATE = BUTTON_STATE_ONCE;
}
}
});
Try adding text_effect.xml drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/white" /> <!-- pressed -->
<item android:color="#color/black" /> <!-- default -->
</selector>
add this line in button control
android:textColor="#drawable/text_effect"
It will work. Enjoy:)
If you do not mandatorily need a simple Button, you could use a ToggleButton that is made for binary-state handling... With a ToggleButton your selector would look like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/red" />
<!-- Default State -->
<item android:color="#000" />
</selector>
It seems like you wanna implement something like toggle button.
Instead of button u can use toggle button.
Though if you wanna use button only then u need to do some changes in your java code as well as xml code also
Create a file def_btn.xml it will look like this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/background_grey"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
Create another file press_btn.xml it will look like this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<solid
android:color="#color/pq_blue"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="30dp"
/>
<stroke
android:width="1dp"
android:color="#ffb4b4b4"
/>
</shape>
Inside your activity declare a private boolean variable(say isPressed) by default isPressed is false. & for default button background will be def_btn.xml
Now write following in button's onClick event.
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
isPressed = !isPressed;
if(isPressed){
btn.setBackgroundResource(R.drawable.def_btn);
}else{
btn.setBackgroundResource(R.drawable.press_btn);
}
}
});
That's it..
How are you? I am new at Android programming. so far I have run a single app on my mobile phone using 4.1 API 16.
My question is when releasing a click event the button image in the following code should be restored to previous state.
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
x = x + 1;
edittext.setText("" + x);
button.setBackgroundResource(R.drawable.buttonpressed1);
}
});
you can also use drawable touch states. an example showing color change on press:
in your button xml use android:background="#drawable/touchstates"
and touchstates.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<stroke android:color="#cc0099CC" android:width="1dip" />
<solid android:color="#660099CC" />
</shape>
</item>
</selector>
For normal performance you must use selector like background property of Button view
put all of this files to folder drawable
selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_pressed" android:state_pressed="true" />
<item android:drawable="#drawable/br_unpressed" />
</selector>
bg_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="#dimen/circle_padding"
android:color="#android:color/transparent" />
<solid android:color="#android:color/white" />
</shape>
bg_unpressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="#dimen/circle_padding"
android:color="#android:color/transparent" />
<solid android:color="#android:color/black" />
</shape>
and in layout set button background android:background="#drawable/selector"
There is a full solution for you:
ImageButton guessButton;
guessButton = (ImageButton) findViewById(R.id.Knorr_Game_Guess_Button);
guessButton.setOnTouchListener(new View.OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
if (event.getAction() == MotionEvent.ACTION_DOWN)
{
v.setBackgroundResource(R.drawable.ic_picture1);
}
else if (event.getAction() == MotionEvent.ACTION_UP)
{
v.setBackgroundResource(R.drawable.ic_picture2);
}
return false;
}
});
It works:)
If you want to capture the release of a button, you need to use OnTouchListener
Here is an example:
yourButton.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN) {
//What happens when preessed
} else if (event.getAction() == MotionEvent.ACTION_UP) {
//What happens when released }
}
};
Hope this helped!
You need to use a selector. The selector needs to be a drawable file which is assigned to the background of your button. An example of a selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused -->
<item
android:state_focused="true"
android:drawable="#drawable/rounded_button_focused"
/>
<!--pressed -->
<item
android:state_pressed="true"
android:drawable="#drawable/rounded_button_pressed"
/>
<item
android:drawable="#drawable/rounded_button_unfocused"/>
</selector>
The selector will basically assign the correct background depending on the state of your button. If the button is pressed then it will assign the file "rounded_button_pressed" to the background of the button. The rounded_button_pressed is another drawable file for example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#color/WhiteSmoke"
android:endColor="#color/LightGrey"
android:angle="270"/>
<stroke
android:width="2dp"
android:color="#color/CornflowerBlue" />
<corners
android:radius="4dp"
/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
Hope it solves your problem
I have been trying to edit a FragmentedTabHost's background colors to mess around with it a bit and I am quite clueless as to why I can changed the "unselected" state but not the "selected" state.
So what I have is a main drawable called "tabs" and inside I have references to two others "tab_selected" and "tab_unselected". I applied this background pretty much everywhere I could find to see if it worked but I got to the point where I think the best place to put it is in the TabWidget tag.
The selected state remains with the grayish color of the normal tab but the other one actually changes.
I don't know if I should be changing code elsewhere, as I already changed in the code it self by saying:
mTabHost.setBackgroundResource(R.drawable.tabs);
And still no progress...
Below is the code:
tabs.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/tab_selected" />
<item android:state_selected="false"
android:drawable="#drawable/tab_unselected" />
</selector>
tab_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#7fff00" />
</shape>
</item>
<item android:top="20dp">
<shape android:shape="rectangle">
<solid android:color="#7fff00" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<gradient android:startColor="#7fff00"
android:endColor="#7fff00"
android:angle="270" />
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
</shape>
</item>
</layer-list>
tab_unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#86B4CF" />
</shape>
</item>
<item android:top="20dp">
<shape android:shape="rectangle">
<solid android:color="#86B4CF" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<gradient android:startColor="#86B4CF"
android:endColor="#6792AB"
android:angle="270" />
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
</shape>
</item>
</layer-list>
And finally the FragmentedHost:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".Home"
android:orientation="vertical"
android:background="#drawable/global_background">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_date"
style="#style/header"/>
</LinearLayout>
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#drawable/tabs"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
There is a method called setOnTabChangedListener. i hope this will help you
mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
#Override
public void onTabChanged(String tabId) {
setTabColor(mTabHost);
}
});
setTabColor(mTabHost) Function :
public static void setTabColor(TabHost tabhost) {
for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++) {
tabhost.getTabWidget().getChildAt(i)
.setBackgroundColor(Color.parseColor("#434a54")); // unselected
}
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab())
.setBackgroundColor(Color.parseColor("#22262c")); // selected
}
Thank you both for your answers although I decided to go another way around.
As instead of using FragmentedTabHost I decided to use ActionBar Tab because it is the most recomended.
To do this I created this class:
public class ActionBarTabListener implements ActionBar.TabListener {
public Fragment fragment;
public ActionBarTabListener(Fragment fragment) {
this.fragment = fragment;
}
#Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
//do what you want when tab is reselected, I do nothing
}
#Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.replace(R.id.fragment_placeholder, fragment);
}
#Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.remove(fragment);
}
}
Changed my main class (the one holding all the tabs):
public class EntryDetails extends ActionBarActivity {
private Entry entry;
//private FragmentTabHost mTabHost;
private TextView tv_date;
private ActionBar ab;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_entry_details);
ab = getSupportActionBar();
ab.setTitle("Ecz :: Entry Details");
ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
entry = getIntent().getExtras().getParcelable("e");
/* TAB ITCHES */
Bundle i = new Bundle();
i.putParcelableArrayList("i", ArrayListHelper.OrderItchesByTime(entry.getItches()));
Fragment f = new TabItches();
f.setArguments(i);
ActionBar.Tab tab = ab.newTab().setText("Itches").setTabListener(new ActionBarTabListener(f)).setTag(i);
ab.addTab(tab);
/* TAB TREATMENTS */
i = new Bundle();
i.putParcelableArrayList("t", ArrayListHelper.OrderTreatmentsByTime(entry.getTreatments()));
f = new TabTreatments();
f.setArguments(i);
tab = ab.newTab().setText("Treatments").setTabListener(new ActionBarTabListener(f)).setTag(i);
ab.addTab(tab);
tv_date = (TextView) findViewById(R.id.tv_date);
tv_date.setText(entry.getDate());
}
}
Then I changed my XML in my EntryDetails.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".Home"
android:orientation="vertical"
android:background="#drawable/global_background">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_date"
style="#style/header"/>
</LinearLayout>
<LinearLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
So now I only have the linearlayout and no more tabhost.
To give you more insight I place below the code to my TabItches:
public class TabItches extends ListFragment{
private ArrayList<Itch> itches;
public ListAdapter itchesAdapter;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.tab_layout_itches, container, false);
this.setRetainInstance(true);
itches = this.getArguments().getParcelableArrayList("i");
itchesAdapter = new ItchAdapter(getActivity(), itches);
setListAdapter(itchesAdapter);
return view;
}
}
To edit the appearance of my tabs now I had to do more things!
This code belongs in "#style"
<style name="Appy" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppyActionBar</item>
<item name="actionBarStyle">#style/AppyActionBar</item>
<item name="android:actionBarTabStyle">#style/AppyActionBarTab</item>
<item name="actionBarTabStyle">#style/AppyActionBarTab</item>
</style>
<!-- ActionBar styles -->
<style name="AppyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/AppyBlue</item>
<!-- Support library compatibility -->
<item name="background">#color/AppyBlue</item>
</style>
<style name="AppyActionBarTab" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/actionbar_tab_background</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_tab_background</item>
<item name="android:gravity">center</item>
</style>
Only take into account "AppyActionBarTab" code bits please!
actionbar_tab_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#color/AppyDeeperBlue"/>
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/actionbar_tab_background_selected"/>
<item android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/actionbar_tab_background_selected_pressed"/>
</selector>
actionbar_tab_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#color/AppyBlue" android:width="5dp"/>
<solid android:color="#color/AppyDeeperBlue"/>
</shape>
</item>
</layer-list>
actionbar_tab_selected_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#B8D0DE" android:width="5dp" />
<solid android:color="#color/AppyDeeperBlue"/>
</shape>
</item>
</layer-list>
I based my self on posts here all throughout StackOverFlow if I manage to find them again I will reference them.
Right now I am struggling with changing the divider's color in API 10 and I cannot seem to get around it! :D
I hope the answer is complete enough, if any problem just write and I will try to answer accordingly!!
EDIT
Fixed my problem with divider's color. What you need to do is change the divider's drawable.
action_tab_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/AppyBlue" />
<stroke android:width="5dp"
android:color="#color/AppyBlue"/>
</shape>
and now you need to apply this to the style
<style name="Appy" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppyActionBar</item>
<item name="actionBarStyle">#style/AppyActionBar</item>
<item name="android:actionBarTabStyle">#style/AppyActionBarTab</item>
<item name="actionBarTabStyle">#style/AppyActionBarTab</item>
<item name="android:actionBarDivider">#drawable/actionbar_tab_divider</item>
<item name="actionBarDivider">#drawable/actionbar_tab_divider</item>
</style>
Notice that we are overwriting in the "parent" style, not inside either of the two above!
Thank you for reading :)