I'm using LinearLayout to place two ImageView horizontally. I have image placed on ImageView. Now I need to add an small image over the image on ImageView. I have seen a lot of post but all of them deals with Relativelayout or Framelayout. Here is the XML code segment that I have used.
<LinearLayout
android:id="#+id/relativeLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgmode31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:maxHeight="180dp"
android:maxWidth="140dp"
android:scaleType="fitXY"
android:src="#drawable/i5" >
</ImageView>
<ImageView
android:id="#+id/imgmode32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:longClickable="false"
android:maxHeight="180dp"
android:maxWidth="280dp"
android:scaleType="fitXY"
android:src="#drawable/i1" >
</ImageView>
</LinearLayout>
Any help will be highly appreciated.
This is exactly what a linear layout is supposed to prevent. You may however be able to override the positioning of the next element using negative padding. The problem with that is what happens on different screen densities.
I think this is what a surface view is meant for. It provides a transparent drawing surface over the entire screen allowing you to draw in top of other views.
One last idea would be to place your first image in a frame layout inside your linear layout. Then you could add your superimposed image to the frame layout using padding to position it.
you can do it easily with relative layout
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/i5"
android:id="#+id/imgmode31"
android:maxHeight="180dp"
android:maxWidth="140dp">
</ImageView>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitXY"
android:longClickable="false"
android:adjustViewBounds="true"
android:src="#drawable/i1"
android:id="#+id/imgmode32"
android:maxHeight="180dp"
android:maxWidth="280dp">
</ImageView>
</RelativeLayout>
if you want ImagView to overlap each other then make their Height and Width same and you can also bring any of the ImageView at front in runtime
A LinearLayout places elements linearly, one next to the other. If you want to place an element on top of another, then you need to resort to a FrameLayout or RelativeLayout.
If you change your LinearLayout to a FrameLayout you should see the two ImageViews overlapping.
Related
that is my problem in relative-layout:
i have some image views that some part of each imageview is out of
display with negative margin.
i design this layout in a display dimension that shown in left side
and that is OK.
but in other display demensions some parts of views that i dont want
to be shown will be shown [like right image]. (or in smaller
displays some parts not shown).
so. i want just wanted box of layout will be visible in different
display sizes and be scaled according to display dimensions.
Sorry i know the problem is involved ;)
i need just visible part of layout scaled in various display sizes, also want views be separate to animate them.
that is one arrows sample code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="4000dp"
android:layout_height="300dp"
android:rotation="15"
android:src="#drawable/rectangle"
android:layout_row="0"
android:layout_column="0"
android:id="#+id/img_rct_header"
android:layout_marginBottom="108dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="-100dp"
android:layout_marginTop="-160dp"
android:layout_marginRight="-120dp"
android:clipChildren="false"
android:scaleType="fitXY" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="135dp"
android:rotation="195"
android:src="#drawable/arrow_tall"
android:id="#+id/img_arw_in_sore"
android:scaleType="fitXY"
android:layout_marginTop="815dp"
android:clipChildren="false"
android:layout_marginRight="-8450dp"
android:layout_marginLeft="25dp"
android:visibility="gone" />
<ImageView
android:layout_width="500dp"
android:layout_height="150dp"
android:rotation="195"
android:src="#drawable/arrow_svg"
android:id="#+id/img_arw_in_tafsir"
android:scaleType="fitXY"
android:layout_marginBottom="-50dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="161dp"
android:layout_marginTop="360dp"
android:layout_marginRight="-1150dp"
android:clipChildren="false"/>
<ImageView
android:layout_width="500dp"
android:layout_height="150dp"
android:rotation="195"
android:src="#drawable/arrow_svg"
android:scaleType="fitXY"
android:id="#+id/img_arw_out_tafsir"
android:layout_marginBottom="0dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="-272dp"
android:layout_marginTop="240dp"
android:layout_marginRight="55dp"
android:clipChildren="false"/>
<ImageView
android:layout_width="4000dp"
android:layout_height="320dp"
android:rotation="15"
android:src="#drawable/rectangle"
android:layout_row="0"
android:layout_column="0"
android:id="#+id/img_rct_footer"
android:layout_marginBottom="-800dp"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_marginLeft="-100dp"
android:layout_marginTop="550dp"
android:layout_marginRight="-120dp"
android:clipChildren="false"
android:scaleType="fitXY" />
</RelativeLayout>
thanks for your help ;)
Your layout is pretty complex. If all you want is to have this as a background that will look the same in different screen sizes, I'd suggest that you draw that background separately, save it as a high quality png, and then put it in one ImageView, without all the hassle of margins and rotation.
You must set the background of layout to that picture in order not to show it in dp.
The dp size is like the pixel of screen and its getting smaller and bigger in other devices try using the value match_parent instead of 4000dp
The best way is to use apps like picsart or picsay. Just put all the pictures in one picture edit the picture then make that the background of the whole layout with these values
layout_width="match_parent"
layout_height="match_parent"
but if you want to animate them you must add the layout to another layout
and give them layout_weight
I have 2 layouts in my xml, a CircularImageView and a ImageView, and the ImageView must appear on top of the CircularImageView.
I've tried:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_kids_register_ll_kid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:orientation="horizontal">
<RelativeLayout
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_toRightOf="#+id/fragment_kids_row_img_kids"
android:layout_marginLeft="-26dp"
android:layout_marginTop="-22dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/fragment_kids_row_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#color/md_black_1000"
android:textSize="24sp" />
<TextView
android:id="#+id/fragment_kids_row_tv_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="1 ano e 4 meses"
android:textColor="#808080"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
And it is getting cut off:
I need the image to be shown exactly at that position in the picture, but not "cropped", what I am missing here ?
BTW, this component is part of a RecyclerView row.
EDIT ---
I forgot to mention, the image is just a placeholder to show the Avatar, but the image is dinamically populated !
Thanks !
The padding (16dp) that you are applying to the first relativeLayout makes you think that there is more place and that you can move up the imageView. Actually the margin is like a gap, it doesn't extend your layout.
This is the solution I suggest , using a FrameLayout
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_gravity = "center"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"
android:layout_gravity="right|top" />
</FrameLayout>
EDIT : You don't have to use a frameLayout, you can use a relativeLayout if you want to set different margins. The point here is really to make your containing layout bigger so you can place the imageview easily.
If you want one image to be on top of another, why you use android:layout_toRightOf?
Remove it and second image should cover first one.
Also you can try to remove margins at second image and use centerInParent, centerVertically or centerHorizontally.
Or maybe I didn't got all the problem ) then pls provide more details. Thanks.
Have you tried Using an image editor like Paint/Photoshop and merging the two images? Then you can just display one image in your view.
try using a linear layout with the orientation set to vertical.
I'm fairly new to Android Studios so sorry if this may come of as a stupid question.
I'm trying to put two buttons on the top of my screen. I want them to be in the top left and right corner like in this image.
However this is what they look like.
I don't want any space between the top of the screen and the two buttons. This is my code..
LinearLayout
<LinearLayout
android:layout_marginTop="0dp"
android:id="#+id/LinearLayout02"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="50dp"
android:id="#+id/settingsBTN"
android:layout_weight="1"
android:src="#drawable/HomeBTNunpressed"/>
<View android:layout_width="3dp"
android:layout_height="50dp"
android:background="#android:color/black"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="50dp"
android:id="#+id/homeBTN"
android:layout_weight="1"
android:src="#drawable/settingsBTNunpressed"/>
</LinearLayout>
First of all in parent don't use fillParent(Deprecated) rather use MatchParent.
Second if using linear layout and specifying weight for view and in your case you want to devide space equally then specify width 0dp and weight 1 to both and weightsum 2.
Third use any layout containing ImageView at center and specify background color to whatever you want
You are using Image Button, and image gets resized in aspect ratio so don't fit accordingly.
Actually you are using Image Button so that border is actually of button.Instead of using image button you can use Image View and make it clickable in your code.I have used my own Image here but you can use your own Image in your xml.
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/settingsBTN"
android:layout_weight=".5"
android:layout_marginTop="0dp"
android:background="#B6B6B6"
android:src="#drawable/username_icon"/>
<View android:layout_width="3dp"
android:layout_height="50dp"
android:background="#android:color/black"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight=".5"
android:layout_marginTop="0dp"
android:background="#B6B6B6"
android:src="#drawable/username_icon"/>
</LinearLayout>
I had a Android application built in which I had 3 ImageViews placed horizontally across a LinearLayout, they were placed with a android:layout_width="0dp" and android:layout_weight="1" such that they had an even spread in the layout.
Now I have to switch to use a RelativeLayout (because I want to overlap another image and that can't be done with a LinearLayout) so I want to start with replicating the same effect of having the 3 ImageViews evenly spread/scaled across the parent layout, but I'm not sure how to achieve this.
I feel like I need to make use of the android:scaleType... maybe center crop:
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Which sounds good but I can't seem to get it to work right... Any thoughts on how I would achieve this even spread of ImageViews across my RelativeLayout?
Snippet of code right now:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:tag="circle"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:tag="square"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragcircle"
android:adjustViewBounds="false"
android:src="#drawable/square" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:tag="triangle"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragsquare"
android:adjustViewBounds="false"
android:src="#drawable/triangle" />
Note: I can't find a question with the same constraints as this one on SO. There are a number of questions like:
Android: how evenly space components within RelativeLayout?
and
android RelativeLayout, equal spacing?
But if you check out the details you'll see that they are people who have not considered the LinearLayout as an option for equal spacing and switching layout types ends up being the solution. I have, I was using it, but it does not work for me because I need to overlap an image:
Note the example, I have 3 ImageViews with basic shapes, but I also have a 4th ImageView (it starts hidden) which is overlapping the middle one. This is why I must use a RelativeLayout
I think you're going to want to go back to your original LinearLayout to meet all of your needs here.
If the size of your fourth image must match one of your existing image then either you'd want to create a resource that is a composite of the two images to swap to when it needs to be overlaid or replace your center ImageView with a RelativeLayout or FrameLayout that contains the ImageView. When you need to add the fourth image, add it to that layout.
Something like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<FrameLayout
android:id="#+id/centerimagewrapper"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/dragsquare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tag="square"
android:src="#drawable/square" />
<ImageView
android:id="#+id/arrow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/arrow"
android:visibility="invisible" />
</FrameLayout>
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:src="#drawable/triangle" />
You could hide the icon you want to place on existing images and keep your previous LinearLayout to achieve this. Each component of your LinearLayout would be a custom layout (inflated):
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<ImageView
android:id="#+id/img"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:src="img1_src"
/>
<ImageView
android:id="#+id/imgOverlap"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:src="img2_src"
android:visibility="gone"
/>
</RelativeLayout>
It appears not possible to use "layout_weight" in a RelativeLayout.
You could also consider a GridView and set its number of columns; each item of the GridView would be the inflated layout above.
you could also do it programatically and tell them to be 33% of the screen width. Look at DisplayMetrics and the attributes of each ImageView if you want to achieve this.
Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="#drawable/circle"
android:tag="circle" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/triangle"
android:scaleType="fitXY"
android:tag="triangle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/dragtriangle"
android:layout_toRightOf="#id/dragcircle"
android:src="#drawable/square"
android:scaleType="fitXY"
android:tag="square" />
</RelativeLayout>
I'm working an a layout which I will have a bitmap centered, and I'd like the left & right margin bitmaps to scale (horizontally) to fill the screen, such that my center item can be a decorated titlebar, and the left & right are filler bitmaps that match the center bitmaps background, and thus stretching horizontally.
But what I'm seeing is there is a space between the bitmaps. The left & right scale, but there is a space between them.
Eg what I'm getting is:
http://www.58seconds.com/getting.png
What I want is:
http://www.58seconds.com/want.png
Any ideas?
Here is a snippet of the Layout code I use:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="1dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjleftfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/command_selection_topImage"
android:layout_width="wrap_content"
android:layout_height="45sp"
android:src="#drawable/top_image"
android:layout_gravity="top"
android:gravity="top"
android:layout_weight="0"
/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjrightfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
</LinearLayout>
Have you thought about creating a 9-patch with your single title bar image? If you have your "stretched" parts on either side of the actual title it will stretch to fit whatever you want without resorting to layout trickery.
Try creating two images, one as a background and scaleType to FIT_CENTER, then set the other one to lay on top and just move to the center.
Here's a nice clean way of doing this, that is pretty much exactly what Lucas was talking about, but in xml:
<FrameLayout android:id="#+id/navbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/titlebar_repeat">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/titlebar_logo" android:layout_gravity="center" />
</FrameLayout>
In this case titlebar_repeat is just a single pixel wide, and titlebar_logo is just the text with a transparent background. In your case, since you don't seem to want highly stylized text, you could probably just make the ImageView a TextView instead if you like.