Develop Reference

View visibility do not shows after being invisible

I have two views one is a button and the other is LinearLayout.
When i set View.GONE and then to View.VISIBLE the view wont get visible again.
This mechanism was working in the past.
android:id="#+id/selector_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/shape_round_white_1"/>
<include
android:id="#+id/actions_container"
android:layout_width="match_parent"
android:layout_height="48dp"
layout="#layout/wait_request_accept_panel"
android:visibility="visible"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#id/selector_controls"
android:layout_alignEnd="#id/selector_controls"
android:layout_alignLeft="#id/selector_controls">
Now... what i want is to toggle is the elements inside wait_request_accept_panel this is the layout file, I want to toggle elements inside it..
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/wait_container"
android:visibility="invisible"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#drawable/shape_round_white_1">
<!-- Other view elements -->
</RelativeLayout>
<Button
android:id="#+id/btnAccept"
android:layout_width="match_parent"
android:layout_height="48dp"
style="#style/H18b"
android:visibility="visible"
android:background="#drawable/shape_round_white_1"
android:text="#string/str_accept"
android:layout_alignParentTop="true"/>
</RelativeLayout>
As you can se here there is two elements basically a wait_container which shows up when user is waiting, and a Button btnAccept it only change state once: one in the original state which is, wait_container is GONE and button Button which is visible at first time. When I hit btnAcceptthe btn changes to GONE and the wait container changes to VISIBLE
Here is the programatic impementation:
switch (req.getType()) {
case REQ: // this is the initial flow
waitContainer.setVisibility(View.GONE);
acceptBtn.setVisibility(View.VISIBLE);
break;
case ACCEPT: // after hit the accept btn it toggles the two views
acceptBtn.setVisibility(View.GONE);
waitContainer.setVisibility(View.VISIBLE);
break;
}
Init details
waitContainer = (RelativeLayout) view.findViewById(R.id.wait_container);
acceptBtn = (Button) view.findViewById(R.id.btnAccept);
cancelBtn = (Button) view.findViewById(R.id.btnCancel);
Something to take in count is the fact the waitContainer and acceptBtn are included, they came from another xml file, I did that because I wanted to reuse code, but in this moment that's not so important since the current screen is the only that uses the wait_request_accept_panel.xml file.
SOLUTION
The view were always there, but it's alpha channel was modified by an animation when the fragment was starting, I sent by mistake the viewContainer as a parameter to the animation method which i turns animates its alpha channel.

You can try with getVisibility ().
Returns the visibility status for this view.
if(waitContainer.getVisibility()== View.GONE)
{
acceptBtn.setVisibility(View.GONE);
waitContainer.setVisibility(View.VISIBLE);
}

Check the visibility of view after that apply ViSIBLE/GONE have look
if(waitContainer.getVisibility()== View.GONE)
{
waitContainer.setVisibility(View.VISIBLE);
}else{
waitContainer.setVisibility(View.GONE);
}

Android: i want to change color of my Image View

i want to change color of my imageView.
pasted the code below:-
firstly i pasted the footer.xml file
<?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="48dp"
android:background="#f1eeee"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fHome"
android:background="#drawable/colorchanged"
android:src="#drawable/home" /> <!-- your image here -->
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fAttendence"
android:src="#drawable/att" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fTarget"
android:src="#drawable/target" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fReport"
android:src="#drawable/report" />
</LinearLayout>
pasted .png which i used in this file
pasted .png which i used in this file
when i clicked on the imageView i want to set Blue color on it.
can anyone help me for this?

You can use a ColorFilter like below to be triggered on view click:
yourImageView.setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.MULTIPLY);
Note that this will actually change the state of yourImageView instance so, you'll need a variable to keep track of that.

A way to do this is to edit through photoshop those two .png.
The currently "grey" versions could have for example the name
home_button_unselected.png
Edit this image and change from grey to blue or the color you want, save it as
home_button_selected.png
Import them to your project, so now you have those two files. (for each image)
1) Set the default state, i guess that could be "home_button_unselected.png" through xml like this :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fHome"
android:src="#drawable/home_button_unselected" />
Also in an image view you shouldn't have android:background and android:src working together. If you want to know the difference between those two you could google it.
2) Then in your .java file let's say MainActivity.java you have to put an on click listener to that button, that means make it do something when the user clicks.
Declare your button(ImageView) as global variable ( before onCreate() )
private ImageView mHomeButton;
Find the View (in your onCreate() )
mHomeButton = (ImageView) findViewById(R.id.fHome);
fHome is the id of the imageView if you look at the xml above -> "android:id="#+id/fHome"
Set the OnClickListener so when user presses the button the image it changes from "home_button_unselected" to "home_button_selected". (inside onCreate() )
.
mHomeButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
mHomeButton.setImageResource(R.Drawable.home_button_selected); // setting the image to the selected one ( which is blue/selected)
}
});
If you have other buttons you should check first which is selected and if another button is selected, then all other buttons should change to the unselected png

Listview changing size of (reused) views

I am all for reusing views in listview. I always set visibility, contents, witdth etc. of all controls again in getView Unfortunately it seems ListView fails to recalculate height.
Picture one shows the initial item showed:
Picture two shows how item one is rendered after we scrolled away and back into it
The background linearlayout height (the black area) made me think that in picture two, Android is reusing a view that just showed a much heigher item (e.g. the second item). But why does it not recalibrate/reset/recalclulate itself (it is in "wrap_content" mode in its XML) when reused as view for the first item which content (text + image) is not as heigh?
In truth I am not sure what is happening. The problem only manifests itself if I have image in the view. I have tried organize the bitmap/image loading in different ways (sample code underneath) with different things commented out, but that does not seem to make much difference. I am really at a loss here as to the reason.
override_listitem_news.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:background="#android:color/black"
>
<TextView
android:id="#+id/listitem_news_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="22sp"
android:padding="5dip"
android:text="#string/newsItemTitle"/>
<TextView
android:id="#+id/listitem_news_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="italic"
android:textSize="15sp"
android:padding="5dip"
android:text="#string/newsItemDate"/>
<TextView
android:id="#+id/listitem_news_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="normal"
android:textSize="15sp"
android:padding="5dip"
android:autoLink="web"
android:text="#string/newsItemDesc"
android:background="#android:color/darker_gray"
/>
<ImageView
android:id="#+id/listitem_news_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Here is code where I load image in getView
ViewTreeObserver vto = image.getViewTreeObserver();
vto.addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
image.getViewTreeObserver().removeGlobalOnLayoutListener(this);
image.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
SharedCode.sharedUtilScaleImage_Width(image);
}
}
);
image.setTag(data.image_file_name + data.image_file_url);
Bitmap bit = null;
bit = SharedCode.sharedGetFileFromOffline(thisActivityContext, "news", data.image_file_name, MyGetKindOfFile.ImageAsBitmap).bitmap;
if (bit != null) {
image.setImageBitmap(bit);
image.setVisibility(View.VISIBLE);
}
else {
image.setImageBitmap(null);
image.setVisibility(View.GONE);
}
image.setPadding(0, 0, 0, 0);
image.setBackgroundColor(data.backgroundColorInt);

For what it is worth, problem appeared to be related to the imageview. Just for reference, I will write here how I solved it.
In getView I fixed the imageview width to screen width (instead of "wrap-content" and/or parent view width - earlier code used OnGlobalLayoutListener for parent width)
I switched over to using SetDrawable instead of SetImageBitmap. It is odd, but this difference was actual very important in solving the odd space around the imageview after scrolling an item/row in/out of view.
My research did also indicate that others had problems using wrap_content in listview for cases similar to mine, but I was not able to find anyone who had experienced exact same problems as me.

Align a Button with an Image inside another Layout

Apologies for the confusing header. My problem is explained better in the following image:
I need the green Button to be aligned with the top of the Image, but the Image is inside another Layout. Is this possible?
It can be done in code if necessary; XML is not required. I am targeting Android 2.2 and newer.
EDIT:
My current implementation is to simply set the MarginTop-property of the Button, but this is inconvenient when I need to change the sizes of the text inside the LinearLayout, which I plan to do depending on the screen size.
I think it can be solved by somehow finding the Y coordinate of the Image, perhaps by adding the heights of the TextViews, and then setting this as the MarginTop for the Button, but this sounds cumbersome. Is there really no other option?
The LinearLayout is going to be placed inside a ViewPager (with multiple views, all having an image in the same position), which is why I can't do it the way preeya explains.

It's possible but more complicated than including the button into the same layout. If you definitely don't want to do that, you can't use XML (which is always faster). You have to do 3 steps in your code:
1.) Wait until the view is drawn
private void waitForViewToBeDrawn(){
// get your layout
final RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.mainLayout);
ViewTreeObserver vto = mainLayout.getViewTreeObserver();
// add a listener
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
public void onGlobalLayout() {
// you also want to remove that listener
mainLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
// go on to next step
getPositionOfImageView();
}
});
}
That approach works best for me, but if you have troubles - here are some alternatives.
There are also [more solutions][2] out there when you use API level 11 and higher...
2.) Get the top-position of your imageView
private void getPositionOfImageView(){
ImageView imageView = (ImageView) findViewById(R.id.imageView);
// Top position view relative to parent (Button and ImageView have same parent)
int topCoordinate = imageView.getTop();
adjustButton(topCoordinate);
}
3.) Add or adjust the button in order to be aligned with the image
public void adjustButton(int topCoordinate){
Button button = (Button) findViewById(R.id.button);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.topMargin = topCoordinate;
button.setLayoutParams(params);
}
This step would be smoother by using API 11: button.setTop(topCoordinate)
Of course you can shorten all of it and put it in a singele method, just thought that 3 steps are better to explain. Hope that code helps to get started!

U can use linearlayout for displaying image & button as follows :
<RelativeLayout 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"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/longText"
android:gravity="center"
android:text="Some very long text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/subtitle"
android:layout_below="#+id/longText"
android:text="subtitle" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_below="#+id/subtitle"
android:layout_toLeftOf="#+id/subtitle"
android:layout_height="wrap_content"
android:text="button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/button1"
android:layout_below="#+id/subtitle"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>

Text over button on Android like in the Apollo Music Player

I'm a novice on the Android platform when it cames to development. However I'm going further from basic Views and I'd like to create something like the following buttons:
This is what I want to achieve. I first tought that a Button with a custom background would have sufficed. However I don't know any way to make that small darker line with the text inside. All of the image reacts like a button and gets highlighted when you touch it.
Can you help me?

If you look at the source code for Apollo you can see ArtistsFragment is not made up of Buttons but rather an inflated RelativeLayout created by a subclass of the SimpleCursorAdapter class.
Since any view can have an OnClickListener you can make any create a layout to look however you want and still have it act like a button:
// Or load it as an item from an existing layout.
View myView = this.getLayoutInflater().inflate(R.layout.anything);
myView.setOnClickListener(new OnClickListener(){
public void onClick(View arg0) {
// Do stuff.
}
});

Every segment with an image could be a Layout with the background set to the appropriate image. Then, you just put the button inside of the layout.

You have to use Framelayout or RelativeLayout. For example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/your_drawabele" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="your_text" />
</FrameLayout>