Adding a View to RelativeLayout changes its size - android

I have a RelativeLayout called "Dress" with LayoutParams of WRAP_CONTENT. All that is inside it is an ImageView, so it is the same size as the ImageView. When I add one more view to the RelativeLayout in OnCreate, like this:
photoSorter = new MultitouchImagesView(this.getApplicationContext());
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
((ViewGroup) findViewById(id.Dress)).addView(photoSorter, params);
The RelativeLayout called Dress changes size, to take up the whole RootView, basically the whole activity, minus the actionbar.
I take a screenshot of the Dress Layout. So when photoSorter is in the RootLayout (NOT the Dress Layout) like this:
photoSorter = new MultitouchImagesView(this.getApplicationContext());
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
addContentView(photoSorter, params);
Layout Dress is correct size and I get this screenshot which is what I want:
But I need PhotoSorter in the Dress Layout so that I can include it in my screenshot and not have the black strips. When I add the photoSortr to the Dress Layout like this:
photoSorter = new MultitouchImagesView(this.getApplicationContext());
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
((ViewGroup) findViewById(id.Dress)).addView(photoSorter, params);
It makes the Dress Layout take up the whole screen so the screenshot of the Dress Layout looks like this:
Here is my code to take a screenshot:
public Bitmap takeScreenshot() {
View v = findViewById(R.id.Dress);
v.setDrawingCacheEnabled(true);
return v.getDrawingCache();
}
Here is my XML for the activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:longClickable="true"
android:onClick="deleteImage"
android:background="#android:color/transparent"
tools:context=".MainActivity" >
<RelativeLayout
android:id="#+id/Dress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent" >
<ImageView
android:id="#+id/imageViewDress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:background="#00CED1"
android:padding="10dp"
android:scaleType="centerInside" />
</RelativeLayout>
<com.edmodo.cropper.CropImageView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/CropImageView"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Also When I added com.edmodo.cropper.CropImageView to the DressLayout, it made the Dress Layout take up the whole activity as well. So adding anything to the Dress Layout is making it bigger.
How can I add photoSorter to the Dress Layout without making Dress Layout take up the whole activity size?
Thanks.

I managed by trying things out in XML. The key is to align Dress with imageViewDress, I could align the other sides to be more thorough, not just bottom.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:longClickable="true"
android:background="#android:color/transparent"
tools:context=".DressingRoomActivity" >
<RelativeLayout
android:id="#+id/DressBig"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/imageViewDress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside" />
<RelativeLayout
android:id="#+id/Dress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_alignBottom="#+id/imageViewDress"
android:layout_centerInParent="true" >
</RelativeLayout>
</RelativeLayout>
<com.edmodo.cropper.CropImageView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/CropImageView"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
This XML, then add photoSorter to Dress programmatically, then take a screenshot of DressBig.

The following should work
<RelativeLayout android:id="#+id/Dress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="...">
<ImageView
android:id="#+id/imageViewDress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
android:scaleType="fitXY" />
EDIT:
You can add the below rule to your params so it's laid out over the other content if that's what you want. This is my third attempt at trying to figure out what you're asking for so if it's not what you need, you'll have to figure it out yourself seeing as you are being lazy and won't do a sketch to try and explain clearly how you want it laid out
params.addRule(RelativeLayout.CENTER_IN_PARENT);

Related

(android) an scrollview that gets programmatically filled loses title

I have this layout:
<?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="fill_parent"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:background="#000"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal|center_vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:gravity="center_horizontal"
android:scaleType="centerInside"
android:text="#string/highScores"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fff" />
<View
android:layout_width="1dp"
android:layout_height="20dp"></View>
<TableLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal">
</TableLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
I fill the 'container' TableLayout with elements like this:
layout.addView(buildTitleRow());
for (int i = 0; i < users.length(); i++) {
JSONObject parent = (JSONObject) users.get(i);
layout.addView(buildRowFrom(parent, i + 1));
}
buildTitleRow:
private TableRow buildTitleRow(){
TableRow result = new TableRow(this);
int color = Color.parseColor("#ffff00");
View view = new View(this);
view.setMinimumWidth(10);
result.addView(view);
view = new View(this);
view.setMinimumWidth(10);
result.addView(view);
//the same for other views
return result;
}
buildRowFrom:
private TableRow buildRowFrom(final JSONObject element, int counter) throws JSONException {
TableRow result = new TableRow(this);
String rowName = element.getString("name");
int color = Color.parseColor("#00ff00");
if(rowName.equals(userName)){
color = Color.parseColor("#ffffff");
}
TextView textView = new TextView(this);
textView.setText(counter + ".");
textView.setTextColor(color);
result.addView(textView);
//some other views
return result;
}
this really works well just until the scrolling needs to take place...
Once there are more elements than the height of the screen the table remains scrollable (luckily) but the original 'title' Textview doesn't show up anymore (you can't scroll up towards it anymore)
Does anyone know how to tweak the layout to keep it visible once more elements are added than the size of the screen?
Thanks a lot,
S.
I've tried your code and found find something wrong in your xml layout.
The attribute android:layout_gravity will change the layout's own gravity. So if set this attribute to a LinearLayout with center and its android:layout_height is wrap_content(means that the real height of the 'LinearLayout' will exceed the screen's height) and fill ScrollView(its height is the screen's height) with it, the LinearLayout will align to center of its parent ScrollView.
If you want to keep the content of 'LinearLayout' centered, you can set android:fillViewport="true" to ScrollView and then the LinearLayout will fill the parent and you can use android:gravity="center" on the LinearLayout. Reference
But there is still some thing need to be changed. In your java code, View view = new View(this) this line will new a View and then you add it into TableLayout. But this TableLayout will be full of View because of the description of View below.
* The base class implementation of measure defaults to the background size,
* unless a larger size is allowed by the MeasureSpec. Subclasses should
* override {#link #onMeasure(int, int)} to provide better measurements of
* their content.
You can use a concrete view like TextView instead of it.
I don't know if I have clarified it. I think if you remove the attribute android:layout_gravity of LinearLayout, it will work.
I'm glad if it would help.
I did the adaptations Paul suggested + change android:layout_height of the ScrollView to "wrap_content" to keep the inner LinearLayout centered when the android:layout_gravity="center" was removed from it (see complete layout below).
I wouldn't have found it without Paul's suggestion and explanation so I'll accept his answer as answer, this answer is just for the sake of completeness...
I'm not expecting this question to get that much of attention anyways ;-)
Thanks Paul :-D
<?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="fill_parent"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:background="#000"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:gravity="center_horizontal"
android:scaleType="centerInside"
android:text="#string/highScores"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fff" />
<View
android:layout_width="1dp"
android:layout_height="20dp"></View>
<TableLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal">
</TableLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Using LayoutInflater makes overlay transparent

First post here so apologize in advance for any mistakes.
I am trying to add some buttons as an overlay to a camera preview, and everything is working as expected except that the buttons get transparent no matter what I try when I want them to be opaque.
This is how I inflate the layout:
LayoutInflater inflater = getLayoutInflater();
View controls = inflater.inflate(R.layout.test, null);
LayoutParams layoutParamsControl = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
this.addContentView(controls, layoutParamsControl);
And this is how the xml file for the controls look like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_capture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="Capture" />
<Button
android:id="#+id/button_mapview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="Map" />
</FrameLayout>
</LinearLayout>
My question is does anyone know why my buttons become transparent and how to fix it?
Try to add color as background like android:background="#ffffff" and accordingly add the text color which will be visible like android:textColor="#000000".

RelativeLayout width and height fill_parent doesn't work

This is my layout which is an info window, and its shown where there is new info to show to the user.
The layout should take the whole screen with some transparent background color, and a small text layout:
<?xml version="1.0" encoding="utf-8"?>
<!-- info fragment - used by the fragment to provide info on a specific fragment -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.coapps.pico"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background_dark_green" >
//this is the only layout i see in the result. not it's parent's layout...
<RelativeLayout
android:id="#+id/fragment_info_relativelayout_info"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="#drawable/background_info_window"
android:clickable="true" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:layout_margin="5dp" >
<!-- The info textView -->
<com.coapps.pico.NillanTextView
android:id="#+id/fragment_info_textview_info"
style="#style/text_shadow_black"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="left"
android:text="Some Text "
android:textColor="#android:color/white"
app:isBold="true" />
</ScrollView>
<!-- Tap to close -->
<com.coapps.pico.NillanTextView
android:id="#+id/fragment_info_textview_tap_to_close"
style="#style/text_shadow_black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="right"
android:paddingRight="5dp"
android:text="#string/button_tap_to_close"
android:textColor="#android:color/white"
app:isBold="true" />
</RelativeLayout>
</RelativeLayout>
I'm adding this layout to another ViewGroup like this:
/**
* Show the info window
*/
public void show()
{
//if the window is not visible
if (!isVisible())
//add window's view
rootView.addView(infoWindowView);
}
this code add the info window into its root view container in the last index.
in result i only see the second RelativeLayout which contains the text but i don't see its parent root layout which supposed to be transparent...
Any ideas why ?
Update:
This is my container:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the main layout of the application -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_basic_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</RelativeLayout>
I also had problems with a view in Relative layout that was dependent on the Relative layout's size.
I solved this problem problematically by updating the inner view size
private void update viewSize()
if(rootContainer == null || rootContainer.getLayoutParams() == null)
return;
rootContainer.measure(View.MeasureSpec.makeMeasureSpec(ScalingUtil.getScreenSize().getWidth(), View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(ViewGroup.LayoutParams.WRAP_CONTENT, View.MeasureSpec.EXACTLY));
RelativeLayout.LayoutParams oldLayoutParams = (RelativeLayout.LayoutParams) rootContainer.findViewById(R.id.deals_card_center_bg).getLayoutParams();
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(rootContainer.getMeasuredWidth(), rootContainer.getMeasuredHeight());
layoutParams.setMargins(oldLayoutParams.leftMargin, oldLayoutParams.topMargin, oldLayoutParams.rightMargin, oldLayoutParams.bottomMargin);
rootContainer.findViewById(R.id.deals_card_center_bg).setLayoutParams(layoutParams);
How to not have the parent expand
Instead of match_parent on the child, align it to the sibling that dictates the height.
<RelativeLayout ...>
<View
android:id="#+id/element_that_should_match_its_parents_height"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/element_that_dictates_height" />
<View
android:id="#+id/element_that_dictates_height"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
Worked for me, hope it helps. The second View is usually some ViewGroup, that varies in height.
Try change
<RelativeLayout
android:id="#+id/fragment_info_relativelayout_info"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="#drawable/background_info_window"
android:clickable="true" >
to
<RelativeLayout
android:id="#+id/fragment_info_relativelayout_info"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#drawable/background_info_window"
android:clickable="true" >
Anyway, why the need of nested RelativeLayout ?
I see how do you add the view, so try also this:
infoWindowView.setLayoutParams(
new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
rootView.addView(infoWindowView);

how to avoid overlapping of dynamically positioned views

how to avoid overlapping of dynamically positioned views?
I have a RelativeLayout , and i am adding views dynamically(at runtime) at particular position(x,y coordinates) but the problem is the views are overlapping.
How to avoid this.
Thanks in advance.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/rl_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/ll_mainBottom"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</ScrollView>
javacode
ll_main = (RelativeLayout) findViewById(R.id.rl_main);
if (views[3].equals("textView")) {
TextView tv_new = new TextView(TenMinActivity.this);
// location
int x = Integer.parseInt(views[12]);
int y = Integer.parseInt(views[13]);
String bgColor = "#" + views[4];
String fgColor = "#" + Views[5];
tv_new.setBackgroundColor(Color.parseColor(bgColor)); // Bg Color
tv_new.setTextColor(Color.parseColor(fgColor)); // Text color
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
width, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = x;
params.topMargin = y;
ll_main.addView(tv_new, params);
}else if(views[3].equals("edittext")){
....
}
Give
android:paddingLeft=""
and to each element so that the ones to the left most of the screen will have bit of space. and the ones to the right,give
android:paddingBottom=""
First,check the first 2 elements that is the name text and your text field after that you can proceed to the rest.
I can guide you better,if you post your code
Check this,
<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"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Name"
android:textSize="18sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView1"
android:layout_alignParentTop="true"
android:layout_marginLeft="21dp"
android:layout_toRightOf="#+id/textView1"
android:ems="10"
android:padding="10dp"
android:paddingl="10dp" >
<requestFocus />
</EditText>
</RelativeLayout>
You need to learn how layouts work, first try to make the same layout in xml. Then you will learn that this kind of layout can easily be made using LinearLayout.
You can use parent LinearLayout and add sublayouts to it. Now you say if you use LinearLayout all subviews are shown vertically. It shows vertically because you are adding them one by one. If you take a RelativeLayout and add your TextView and EditText to it and then add that RelativeLayout to your LinearLayout, you will get the desired result.
<LinearLayout>
<RelativeLayout>
<TextView />
<EditText />//use layout_margin or layout_toLeftOf for moving to to right
</RelativeLayout>
<RelativeLayout>
<TextView/>
<EditText/>
</RelativeLayout>
</LinearLayout>
Please use Layout params like layout_below layout_above toRightof and ToLeftof when you add a view to container relative layout
https://stackoverflow.com/a/5191159/1911784
you an use below code to add views in your layout
RelativeLayout.LayoutParams newParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
TextView text2 = new TextView(context);
newParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
newParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
newParams.addRule(RelativeLayout.ALIGN_BOTTOM, text1.getId());
text2.setLayoutParams(newParams);
layout.addView(text2);
where layout is your main layout.
you can use other params as well - like rightof, leftof etc

How can i set my image to the bottom of the screen in android using xml code

hi i have displayed a PNG image on screen in android by using XML code:
android:src="#drawable/grass"
but it is showing image at top of the screen ,now i want that image at bottom of the screen.
make sure your layout file is taking full of your screen by setting match_parent or fill_parent for both layout_height and layout_width.
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/grass"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/grass"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
EDIT
Programmatically
ImageView pic;
RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
param.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
pic = (ImageView) findViewById(R.id.pic);
pic.setLayoutParams(param);

Categories

Resources