Develop Reference

How to slide a view out of another view

I have a fragment with a navigation menu at the top-left corner. At the start of the activity, I want to gradually slide a view (let's call it black_view) out of the menu icon.
Here's a rough breakdown of how I want the animation to be in accordance with the images below:
Activity starts as the first image with black_view being invisible.
black_view gradually slides out from behind the menu icon length by length until it gets to the point of the second image.
>>>
What I've tried:
I tried achieving this by using a TranslateAnimation. However, the whole length of black_view shows up at the start of the animation and this is not what I want. I also saw a couple of sliding animation code snippets like this and this, but they all follow the TranlateAnimation model (with the whole length of black_view showing instantly).
How can I achieve this?
PS: If there's any important detail that I failed to add, kindly let me know.

It can be done easily with Slide transition from Transition API. Just use TransitionManager.beginDelayedTransition method then change visibility of black view from GONE to VISIBLE.
import androidx.appcompat.app.AppCompatActivity;
import androidx.transition.Slide;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;
public class MainActivity extends AppCompatActivity {
private ViewGroup parent;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
parent = findViewById(R.id.parent);
parent.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {
#Override
public boolean onPreDraw() {
parent.getViewTreeObserver().removeOnPreDrawListener(this);
animate();
return true;
}
});
}
private void animate() {
View textView = findViewById(R.id.text);
Transition transition = new Slide(Gravity.LEFT);
transition.setDuration(2000);
transition.setStartDelay(1000);
TransitionManager.beginDelayedTransition(parent, transition);
textView.setVisibility(View.VISIBLE);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Button" />
<FrameLayout
android:id="#+id/parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/button">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:text="hello world"
android:textColor="#fff"
android:textSize="22sp"
android:visibility="gone" />
</FrameLayout>
</RelativeLayout>
Result:
All classes here are from androix package so code is backward compatible.

How to make ImageButton behave as ToggleButton

I want my Android button to have some properties:
Have Android HoloLight style
Behave as an ImageButton - have an image as its content, not text
Behave as a ToggleButton - toggle on/off status
So my codes currently look something like these:
My xml file:
<ImageButton
android:id="#+id/button"
style="#android:style/Widget.Holo.Light.Button.Toggle"
android:layout_width="70px"
android:layout_height="70px"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="#drawable/icon" />
My java file:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_file);
Button button = (ImageButton) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Log.v(log, "button pressed");
if (skillsButton.isSelected()) {
Log.v(log, "button is unselected");
button.setSelected(false);
} else {
Log.v(log, "button is selected");
button.setSelected(true);
}
}
});
}
As I run my code and click the button, I can see that my button has an image as its description, and looks like an Android HoloLight ToggleButton, but it does not turn on and off as I pressed it (the blue light does not turn on).
I can see that the isSelected() status of the button is changing on LogCat though.
Is there a solution to what I want?
Also, as far as I have tried, the "color" of an Android HoloLight themed button is fixed to light gray. Is there a way to change this color to another one, preferably white?

This is what I did so I can have 2 or 3 Buttons with images that toggle and are in a RadioGroup so only one can be selected at a time.
Make it a ToggleButton
<ToggleButton
android:id="#+id/button"
style="#android:style/CustomButton" // Note the style
android:layout_width="70px"
android:layout_height="70px"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp" />
Create a style that it references above in res/styles
<style name="CustomButton" parent="#android:style/Widget.CompoundButton"> // you can change the parent here depending on what you need
<item name="android:background">#drawable/icon</item>
<item name="android:textOff"></item>
<item name="android:textOn"></item>
// add other properties if you need
</style>
In mine the #drawable/cold_button references a selector because it changes when pressed but your can simply be an image for the background

My recommendation is to provide tow drawable for your button. One for one state and one for off state that the "on" state drawable has a right side blue and "off" state button has a left side blue. After that you have to set OnTouchListener on your button like below:
#Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_DOWN){
float x=event.getX();
if(x<=v.getWidth()/2){
v.setBackgroundResource(R.drawable.off);
state=0;
}else{
v.setBackgroundResource(R.drawable.on);
state=1;
}
}
return false;
}

Align icon and the title in Listview item

Im designing my interfaces for my research project on android. So I added facebook kind side navigation listview. But when the itesms are added to the list view it will not get align center horizontally..I need to get the icon origin and the title in a same horizontal line. Please be kind enough to provide me a solution for my problem. Below provided my code. I'm sorry about my english.
Here is an image of my current interface. Please refer settings button. The settings word is bit upside. I need both icon and settings word aligh horizontally in same line.
image is here http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash4/485944_4792129535506_1863888545_n.jpg
slide.xml - all the items for the listview are included here
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/item_one"
android:icon="#drawable/settings"
android:title="#string/item_one"
android:top="30dp"
>
</item>
<item
android:id="#+id/item_two"
android:icon="#drawable/ic_launcher"
android:title="#string/item_three">
</item>
<item
android:id="#+id/item_three"
android:icon="#drawable/ic_launcher"
android:title="#string/item_three">
</item>
<item
android:id="#+id/item_four"
android:icon="#drawable/ic_launcher"
android:title="#string/item_four">
</item>
<item
android:id="#+id/item_five"
android:icon="#drawable/ic_launcher"
android:title="#string/item_one">
</item>
<item
android:id="#+id/item_six"
android:icon="#drawable/ic_launcher"
android:title="#string/item_two">
</item>
<item
android:id="#+id/item_seven"
android:icon="#drawable/ic_launcher"
android:title="#string/item_three">
</item>
<item
android:id="#+id/item_eight"
android:icon="#drawable/ic_launcher"
android:title="#string/item_four"
>
</item>
</menu>
slidemenu.xml - the listview is here
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="260dip"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#2c323f"
>
<ImageView
android:id="#+id/menu_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
/>
<ListView
android:id="#+id/menu_listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
android:background="#2c323f"
android:fadingEdge="none"
android:overScrollMode="never"
android:listSelector="#454b5d"
android:divider="#layout/divider"
android:dividerHeight="1sp"
android:cacheColorHint="#2c323f"
/>
</LinearLayout>
<FrameLayout
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>
here is my activity class
package com.coboltforge.slidemenuexample;
import com.coboltforge.slidemenu.SlideMenu;
import com.coboltforge.slidemenu.SlideMenu.SlideMenuItem;
import com.coboltforge.slidemenu.SlideMenuInterface.OnSlideMenuItemClickListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends Activity implements OnSlideMenuItemClickListener {
private SlideMenu slidemenu;
private final static int MYITEMID = 42;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/*
* There are two ways to add the slide menu:
* From code or to inflate it from XML (then you have to declare it in the activities layout XML)
*/
// this is from code. no XML declaration necessary, but you won't get state restored after rotation.
// slidemenu = new SlideMenu(this, R.menu.slide, this, 333);
// this inflates the menu from XML. open/closed state will be restored after rotation, but you'll have to call init.
slidemenu = (SlideMenu) findViewById(R.id.slideMenu);
slidemenu.init(this, R.menu.slide, this, 333);
// this can set the menu to initially shown instead of hidden
// slidemenu.setAsShown();
// set optional header image
slidemenu.setHeaderImage(getResources().getDrawable(R.drawable.ic_launcher));
// this demonstrates how to dynamically add menu items
SlideMenuItem item = new SlideMenuItem();
item.id = MYITEMID;
item.icon = getResources().getDrawable(R.drawable.ic_launcher);
item.label = "Dynamically added item";
slidemenu.addMenuItem(item);
// connect the fallback button in case there is no ActionBar
Button b = (Button) findViewById(R.id.buttonMenu);
b.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
slidemenu.show();
}
});
}
public void onSlideMenuItemClick(int itemId) {
switch(itemId) {
case R.id.item_one:
Toast.makeText(this, "Item one selected", Toast.LENGTH_SHORT).show();
break;
case R.id.item_two:
Toast.makeText(this, "Item two selected", Toast.LENGTH_SHORT).show();
break;
case R.id.item_three:
Toast.makeText(this, "Item three selected", Toast.LENGTH_SHORT).show();
break;
case R.id.item_four:
Toast.makeText(this, "Item four selected", Toast.LENGTH_SHORT).show();
break;
case MYITEMID:
Toast.makeText(this, "Dynamically added item selected", Toast.LENGTH_SHORT).show();
break;
}
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()) {
case android.R.id.home: // this is the app icon of the actionbar
slidemenu.show();
break;
}
return super.onOptionsItemSelected(item);
}
}

the settings word is bit upside. I need both icon and settings word
aligh horizontally in same line
I'm guessing you use this library. The problem is that you can't access the layout file that is used for the row view of the sliding menu adapter to modify it. But you can easily solve this if you copy the library's code(which consists of very few files) and put it directly in your project. Then modify the slidemenu_listitem.xml file like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/menu_icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginBottom="10dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="5dip"
android:layout_marginTop="10dip" />
<TextView
android:id="#+id/menu_label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginBottom="10dip"
android:layout_marginTop="10dip"
android:textSize="24dp" />
</LinearLayout>
Of course, you can always make a feature request to the user how made the library to modify it so you can insert your own layout file in the library(and wait for that to happen).

You can use the
android:gravity="center" (or top/bottom/left/right depending your needs)
of your textview to align text where you want.
layout_gravity sets the gravity (alignment) of the View or Layout
inside its parent. If you have a text view inside a linear layout,
then setting the layout_gravity of the text view will alter its
alignment in the layout. gravity sets the alignment of the content of
the view or layout it is applied on. If you want your text (in the
text view) to be left aligned, center, or right aligned, then modify
the gravity attribute of the text view.
From: http://thinkandroid.wordpress.com/2010/01/14/how-to-position-views-properly-in-layouts/

ListItem should change bg color, color of text and images on it while pressed

I have a ListView, where each item has a custom LinearLayout with a bg image, a textView and 2 imageViews.
Now I need that while the user is touching the item, all of those switch to the "pressed" state:
the bg image of the LiearLayout must be replaced with another one
the TextView should change textColor
both ImageViews in the item should switch to alternative images
Normally such stuff would be done using an xml resource with selector inside, e.g. the LinearLayout would use a drawable with selector inside for background, the TextView a drawable with selector and colors for textColor, and ImageViews use selector with images inside for src.
The problem is that the pressed state is only detected by the LinearLayout and not by the child views (?), so only the background image changes.
I've tried implementing this using OnTouchListener, but then comes the problem that I can't securely get access to Views inside the list item.
I tried caching the view which I return in getView() of the list item to then later change the images and text color. This works usually, but e.g. if one of the list items opens another activity, then the view somehow gets lost and the highlighted state stays indefinitely. I've tried debugging and it works correctly if I step thru with the debugger.
Also, reusing the cachedView seems to bring no good and messes things up completely, so I'm just inflating a new view for the list item each time (this must be inefficient).
Just in case, here is the code of the custom list item item i'm using for the custom list adapter:
public class MyListItem extends AbstractListItem
{
private int iconResource, iconHighlightedResource;
private int textResource;
private View.OnClickListener onClickListener;
private LinearLayout currentView;
private ImageView imgIcon;
private TextView txtText;
private ImageView imgArrow;
private boolean bIsHighlighted;
public MyListItem(int iconResource, int iconHighlightedResource, int textResource, View.OnClickListener onClickListener)
{
this.iconResource = iconResource;
this.iconHighlightedResource = iconHighlightedResource;
this.textResource = textResource;
this.onClickListener = onClickListener;
}
public View getView(View cachedView)
{
this.currentView = buildView();
populateView();
update();
return this.currentView;
}
private LinearLayout buildView()
{
LayoutInflater inflater = (LayoutInflater)App.get().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
return (LinearLayout)inflater.inflate(R.layout.my_menu_item, null);
}
private void populateView()
{
this.imgIcon = (ImageView)this.currentView.findViewById(R.id.img_menu_item_icon);
this.txtText = (TextView)this.currentView.findViewById(R.id.txt_menu_item_text);
this.txtText.setText(this.textResource);
this.txtText.setTypeface(App.fontCommon);
this.imgArrow = (ImageView)this.currentView.findViewById(R.id.img_menu_item_arrow);
this.currentView.setOnClickListener(this.onClickListener);
this.currentView.setOnTouchListener(this.highlighter);
}
private View.OnTouchListener highlighter = new View.OnTouchListener()
{
#Override
public boolean onTouch(View v, MotionEvent event)
{
int nAction = event.getAction();
int nActionCode = nAction & MotionEvent.ACTION_MASK;
switch (nActionCode)
{
case MotionEvent.ACTION_DOWN:
bIsHighlighted = true;
update();
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
bIsHighlighted = false;
update();
break;
}
return false;
}
};
private void update()
{
if (this.bIsHighlighted)
{
updateForHighlightedState();
}
else
{
updateForNormalState();
}
}
private void updateForHighlightedState()
{
Resources r = App.get().getResources();
this.currentView.setBackgroundResource(R.drawable.button_beveled_m_call_to_action_taking_input);
this.imgIcon.setImageResource(this.iconHighlightedResource);
this.txtText.setTextColor(r.getColor(R.color.white));
this.imgArrow.setImageResource(R.drawable.arrow_highlighted);
}
private void updateForNormalState()
{
Resources r = App.get().getResources();
this.currentView.setBackgroundColor(r.getColor(R.color.white));
this.imgIcon.setImageResource(this.iconResource);
this.txtText.setTextColor(r.getColor(R.color.text_dark));
this.imgArrow.setImageResource(R.drawable.arrow);
}
}
Here is the layout file (xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/white"
android:gravity="center_vertical"
android:padding="5dp" >
<ImageView
android:id="#+id/img_menu_item_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/info" />
<TextView
android:id="#+id/txt_menu_item_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24dp"
android:text="Menu item"
android:textColor="#color/text_dark"
android:layout_marginLeft="5dp" />
<ImageView
android:id="#+id/img_menu_item_arrow"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/arrow" />
</LinearLayout>

After lots of experimenting finally this worked:
Every child view inside the list item layout must have android:duplicateParentState="true".
Then all of them can just use selector drawables. No extra effort inside the code is required.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/my_item_bg"
android:gravity="center_vertical"
android:padding="5dp" >
<ImageView
android:id="#+id/img_menu_item_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/selector_info"
android:duplicateParentState="true" />
<TextView
android:id="#+id/txt_menu_item_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24dp"
android:text="Menu item"
android:textColor="#drawable/selector_color_my_button_text"
android:layout_marginLeft="5dp"
android:duplicateParentState="true" />
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/selector_arrow"
android:duplicateParentState="true" />
</LinearLayout>

You should create custom drawable selectors, and set them as the background to your listview element.
Step#1, create another layout (named: layout_selected for this example), with the appropriate background color for your pressed state (like the layout file you supplied, but with the background attribute of the linear set to another color).
Then you will define a drawable selector, which will be placed in your drawable folder), defining which background should be use in which instance. This will look something like this:
<!-- pressed -->
<item android:drawable="#drawable/layout_selected" android:state_pressed="true"/>
<!-- focused -->
<item android:drawable="#drawable/layout_normal" android:state_focused="true"/>
<!-- default -->
<item android:drawable="#drawable/layout_normal"/>
Finally, to use this in your list, when you set the layout for your adapter, set it to the selector we just created, instead of your standard layout.
Maybe a little hard to explain, but you want to use 'Drawable Selectors' to accomplish what you want.

I would suggest to add ViewHolder pattern for listview. This will optimize your listview drawing & creating UI.
Also in that we can use setTag to save instance of row. In that you can handle touch event.

How to make the drawableLeft of a Android Button keep rotating?

I need to create a button where there is a icon in the left and a text in the right. After pressing the button, I want to see there is an animation of rotating image at the place of the left icon in the button.
I know how to rotate a image with ImageView, but it is not helpful to my current requirement.
I tried to use AnimationDrawable, but it did not work either, there is no animation but only the first png file shown. It is then same whatever I use the background or leftDrawable of the button to run the AnimationDrawable. The code is as below:
package com.example.layout;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.Button;
public class TestLinearlayoutActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
#Override
public void onStart() {
super.onStart();
Button locationTitleButton = (Button) findViewById(R.id.LocationTitleButton);
//locationTitleButton.setBackgroundResource(R.drawable.loading);
locationTitleButton.setCompoundDrawablesWithIntrinsicBounds(R.drawable.loading, 0, 0, 0);
Drawable[] locationTitleButtonDrawables = locationTitleButton.getCompoundDrawables();
AnimationDrawable animDrawable = (AnimationDrawable) locationTitleButtonDrawables[0];
//AnimationDrawable animDrawable = (AnimationDrawable) locationTitleButton.getBackground();
animDrawable.start();
}
}
//loading.xml:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/loc1" android:duration="200" />
<item android:drawable="#drawable/loc2" android:duration="200" />
<item android:drawable="#drawable/loc3" android:duration="200" />
<item android:drawable="#drawable/loc4" android:duration="200" />
</animation-list>
// layout file, main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal" android:padding="0dp"
android:layout_height="wrap_content" android:gravity="fill_horizontal" android:layout_margin="0dp">
<Button android:id="#+id/LocationTitleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dip"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_weight="1"
android:ellipsize="end"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="Add location"
android:textStyle="bold" />
<Button android:textColor="#FF000000"
android:layout_weight="0"
android:id="#+id/AddLocationButton"
android:text="Search"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-8dp" />
</LinearLayout>

You can try using an AnimationDrawable.

I have also face this issue and I have tried all above solution but no one have worked for me. I have found solution here. Android document says that don't call start() in the onCreate(Bundle) method of activity call it in onWindowFocusChanged(boolean) function. So I do it like this :
#Override
public void onWindowFocusChanged(boolean hasFocus){
if(hasFocus){
final AnimationDrawable d=(AnimationDrawable) mBtnView.getCompoundDrawables()[0];
d.start();
}
}

Use a LinearLayout (orientation horizontal). Treat that as your button by giving it a button drawable selector as it's background drawable. Inside it, put an ImageView and a TextView. Use an OnClickListner on the LinearLayout, as if it were a button. Then animate the ImageView.