Weird behavior with buttons and visibility gone - android

I am having a very weird problem with buttons, vertical centering and visibility gone. In my app I have a list of books, and I am using the swipelistview library to create buttons behind each row. I have 3 buttons: return, send reminder and delete. The return and send reminder buttons visibility is set to Visibility.GONE dynamically if the book isn't lended. Now here's my problem. I have the following xml layout for the back of the rows.
<LinearLayout
android:id="#+id/swipelist_backview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:tag="swipelist_backview"
android:background="#101010">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="55px"
android:layout_gravity="center_vertical"
android:id="#+id/swipe_button1"
android:text="#string/markAsReturned"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="#+id/swipe_button2"
android:layout_gravity="center_vertical"
android:text="#string/sendReminder"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="#+id/swipe_button3"
android:layout_gravity="center_vertical"
android:text="#string/delete"/>
</LinearLayout>
Now the expected result from this is that the buttons will be vertically centered in the middle of each row, which does happen if the book is lended, and all the buttons are visible. But if the book isn't lended, the only button shown is delete, and it isn't aligned .
I am also setting the left margin of the delete button to 55 px using the following code:
if(!item.isLended())
{
btnReturn.setVisibility(View.GONE);
btnSendReminder.setVisibility(View.GONE);
LayoutParams lp = new LayoutParams(btnDelete.getLayoutParams());
lp.setMargins(55, 0, 0, 0);
btnDelete.setLayoutParams(lp);
}
I thought this might be removing the verical alignment, but LayoutParams doesn't seem to have a way to set layout-gravity, so it doesn't look like it.

Well, I guess it was the LayoutParams. If anyone is intersted, here's how I solved it:
if(!item.isLended())
{
btnReturn.setVisibility(View.GONE);
btnSendReminder.setVisibility(View.GONE);
LayoutParams lp = new LayoutParams(btnDelete.getLayoutParams());
lp.setMargins(55, 0, 0, 0);
lp.gravity = Gravity.CENTER_VERTICAL;
btnDelete.setLayoutParams(lp);
}

Related

Dynamically changing the position of a button with respect to another button

I had seen a couple of examples for setting the relative position through program (from java) for views in android. But in my particular case i have 2 buttons (which are not views) say "button_tag" and "button_rate" which are made via xml and are arranged such as "button_tag" above "button_rate" by default. If at any point of time is there a mechanism by which i can make "button_tag" below "button_rate" dynamically.
<Button
android:id="#+id/button_tag"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="1dp"
android:background="#drawable/img_whitebackground"
android:gravity="left|center_vertical"
android:paddingLeft="5dip"
android:text="#string/string_tag"
android:onClick="click_addscreen" >
</Button>
<Button
android:id="#+id/button_rate"
android:layout_marginTop="1dp"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="#string/string_rate"
android:gravity="left|center_vertical"
android:paddingLeft="5dip"
android:onClick="click_addscreen"
android:background="#drawable/img_whitebackground" >
</Button>
The xml part of the two buttons are as shown
You can use LayoutParams object and add rules to that object as per your requirement. and then setlayoutparam to your button.
For example:
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(80,80); // size of button in dp
params.addRule(RelativeLayout.LEFT_OF, R.id.btnAdd);
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
params.setMargins(0, 0, 20, 60);
btnMyLocation.setLayoutParams(params);
You can add rules to set position dynamically.
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
p.addRule(RelativeLayout.BELOW, R.id.button_rate);
buttonTag.setLayoutParams(p);

How do I get space between consecutive RelativeLayouts inside a LinearLayout?

I'm trying to create a list of clickable image buttons w/ text that fit inside a HorizontalScrollView. The images/content will be set programmatically. The best way to do this seemed to be a LinearLayout, that then contained a series of RelativeLayouts that contained the views to display the relevant content. However, I'm having trouble getting space between each RelativeLayout. Even though I've set margins in xml and programmatically they seem to be ignored and the RelativeLayout objects are squished together.
Some code:
<RelativeLayout
android:id="#+id/details_image_button"
android:layout_width="75dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:background="#00ff78">
<ImageView
android:id="#+id/loadable_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<TextView
android:id="#+id/details_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#b083ef"
android:text="PH - Info about title"
android:layout_alignParentBottom="true"
/>
//Code below is looped through several times
RelativeLayout imageButtonLayout = (RelativeLayout) inflater.inflate(R.layout.details_image_button, null);
RelativeLayout.LayoutParams imageButtonLayoutParams = new RelativeLayout.LayoutParams(100, 100);
imageButtonLayoutParams.setMargins(10, 10, 10, 10);
imageButtonLayout.setLayoutParams(imageButtonLayoutParams);
The current result that I am getting is a solid green (background color of the RelativeLayout) rather than the expected result of a group of RelativeLayouts with a space between each. How can I best get a margin or buffer between each RelativeLayout?
If your RelativeLayout is inside a LinearLayout, the LayoutParams you need to use would be LinearLayout.LayoutParams:
RelativeLayout imageButtonLayout = (RelativeLayout)
inflater.inflate(R.layout.details_image_button, null);
LinearLayout.LayoutParams imageButtonLayoutParams = new
LinearLayout.LayoutParams(100, 100);
imageButtonLayoutParams.setMargins(10, 10, 10, 10);
imageButtonLayout.setLayoutParams(imageButtonLayoutParams);
LayoutParams come from the parent, not the child.

Android layouts not displaying as intended

I need to create one full screen android activity programatically as shown in the image below:
The two buttons should remain at the bottom of the screen.
Dummy content will consist of different components (textviews, radio buttons, checkboxes...) and will be populated dynamically.
This is the code I have so far:
//Main Layout
FrameLayout lLayout = new FrameLayout(this);
lLayout.setBackgroundColor(Color.parseColor("#0099cc"));
lLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
//Navigation layout
LinearLayout l = new LinearLayout(this, null, R.style.ButtonBar);
LayoutParams bottomLayout = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
l.setLayoutParams(bottomLayout);
l.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
l.setBackgroundColor(Color.parseColor("#66000000"));
l.setOrientation(LinearLayout.HORIZONTAL);
LayoutParams buttLayout = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
//previous section button
previousButton = new Button(this);
previousButton.setLayoutParams(buttLayout);
previousButton.setText("Previous section");
previousButton.setOnClickListener(this);
l.addView(previousButton);
//next section button
Button nextButton = new Button(this);
nextButton.setLayoutParams(buttLayout);
nextButton.setText("Next section");
nextButton.setOnClickListener(this);
l.addView(nextButton);
//add components
TextView tView = new TextView(this);
tView.setText("Dummy text");
tView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
lLayout.addView(tView);
lLayout.addView(l);
setContentView(lLayout);
Here is what the code produces:
Tthere are several points that do not work as intended:
1. Buttons are at the top and not the bottom.
2. Buttons do not spread out nicely
3. TextView I added as a test is shown behind the buttons. I will have many different widgets on the screen and expect them to be larger than one screen. I would like to have a scroll option but with all those widgets not to be seen behind the two buttons that are supposed to be at the bottom of the screen.
The following xml is exactly what you would need:
<?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" >
<LinearLayout
android:id="#+id/dynamiclayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/navigationlayout"
android:orientation="vertical" >
</LinearLayout>
<RelativeLayout
android:id="#+id/navigationlayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Previous Section" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Next Section" />
</RelativeLayout>
</RelativeLayout>
Now programatically inflate dynamiclayout and add all your dynamic views into it.
Your root view is a FrameLayout, which is intended for only one child View. It is also frequently used to create overlapping Views, as all of a FrameLayout's children will be drawn in the same place on screen.
Replace your FrameLayout with a RelativeLayout. Make sure you update your LayoutParams references to use RelativeLayout.LayoutParams. You will also need to set the navigation LinearLayout to align with the parent View's bottom like so:
RelativeLayout.LayoutParams lps = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
lps.addRule(RelativeLayout.LayoutParams.ALIGN_PARENT_BOTTOM, true);
Though I really would suggest using XML. It will make your life far simpler.

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>

Avoid layout to be resized on margin changed

I'm programmatically changing the margin of a layout inside a framelayout. My goal is to make a sliding view like the Facebook app. Is it possible to avoid this layout to be resized? This is my layout moving:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#00a2ff"
android:gravity="center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ivGPSSearching"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/actionbar_gps_searching" />
</LinearLayout>
<ImageView
android:id="#+id/ivStarsFilter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:src="#drawable/actionbar_star" />
</LinearLayout>
I don't want the left LinearLayout to be resized. I hope you will understand what I want :)
Thanks
To achieve something similar we extended a HorizontalScrollView - just overriding onInterceptTouchEvent and onTouchEvent to always return false.
Then you just need to put your menu in the left side and the content on the right (the content must match the screen width).
Finally setup the initial HorizontalScrollView scroll and bind to a button click a event to change the scroll position(horizontalScrollView.scrollTo or horizontalScrollView.smoothScrollTo).
I hope this helps.
The below is an example code for using TranslateAnimation and set listener for the animation and in
#Override
public void onAnimationEnd(Animation animation)
{
//Just set the layout params for your view (layout) which is animated,
//to make your view shift to the new position
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutWidth, LayoutHeight);
params.leftMargin = 100; //for example you want to shift 100 px from left
params.rightMargin = -Layoutwidth; //this will avoid your view
//from shrinking and make it as wide as its width was, and - negative value will
//move it towards right
otherLayout.setLayoutParams(params);
}
I hope it make you people clear how to move your view after animation
I've been scratching my head around this for the last few hours as well.
Turns out that if you change both opposite margins, the views inside the ReleativeLayout will not be resized nor moved around:
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
lp.setMargins(0, - yOffset, Integer.MIN_VALUE, yOffset);
This is crazy but it works...

Categories

Resources