I need a button on bottom of an image with the parameter android:adjustViewBounds="true".
This is what I'm looking for:
But this is what I'm getting:
This is the code I'm using:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/idImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true" //i really need this parameter because the height of each image is different
android:src="#drawable/homero" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="See more"/>
</RelativeLayout>
If you want your ImageView and Button to be overlapping, they either need to reference each other, or have the same layout alignment.
In this example, aligning your Button to the bottom of your ImageView will resolve this.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/idImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/homero" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/idImg"
android:text="See more"/>
</RelativeLayout>
The way you currently have it, your button is trying to get to the bottom of your RelativeLayout. Because your RelativeLayout has a height of wrap_content, it just keeps growing as the button tries to get to the bottom, eventually filling the screen!
Related
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 wanted to make two equally-sized radio buttons with a custom background, text, and an image to the right of the text. Because of how different these are from a standard "Button", I made them using a clickable "RelativeLayout".
The text and the image are of different heights, but I want each one to be centered vertically in the button. I also want the combination of the text+image to be centered horizontally in the button. This second part is what I'm having trouble with; it's off-center, close to the left side. In the image below, the left side is what I want, but the right side is what's happening. The image on one of the buttons (the one with the longer text) is resized to be smaller, too... Though there is still plenty of space on the right side of the button.
Here is my code:
<LinearLayout
android:baselineAligned="false"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/my_button"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/button_textview"
android:text="#string/button_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/button_imageview"
android:layout_centerVertical="true"
android:src="#drawable/my_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_textview">
</ImageView>
</RelativeLayout>
<RelativeLayout
... same thing for the second button ...
</RelativeLayout>
</LinearLayout>
What am I doing wrong?
Use this as your button:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="MyButton"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/my_image"/>
</LinearLayout>
Now, you can place it in other parent views. To apply layout attributes to above button, place those attributes in the outer <LinearLayout> tag of above button.
Alternative:
You can set custom images to be drawn on sides(Left,Right,Top,Bottom) of a TextView using attributes like:
android:drawableLeft="#drawable/my_image"
Turns out the solution was adding
android:paddingRight="0dip"
strangely enough, even though I didn't put any padding there in the first place.
I am trying to create an Activity for an Android app with two imageViews aligned side-by-side. my current layout config is as follows:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:paddingTop="15dip" android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:scaleType="fitStart"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
The first image will be a square (lets say 100x100) and the second image will be rectangular (300x100) - and I want them to be aligned next to each other but always be scaled to fit within the width of the device - is this possible just with layout config?
The current config just shows the first image the entire width (and almost height) of the screen and the second image is not shown at all. I have tried changing wrap_content with fill_parent and hardocding widths but that has just resulted in the both images being shown but the first image on top of the second image (both anchored left).
Thanks
UPDATED AGAIN:
I have updated my layout to look like this now including the ScrollView as recommended but no joy:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="top"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<!-- Header for activity - this has the countdown in it -->
<ScrollView android:id="#+id/ScrollView01" android:layout_height="wrap_content" android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right"
android:background="#drawable/dark_bg" android:orientation="horizontal">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="2"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/daysText"/>
</LinearLayout>
</ScrollView>
<!-- main body for the rest of the info -->
<LinearLayout android:orientation="horizontal" android:gravity="center"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/light_bg">
</LinearLayout>
</LinearLayout>
Using the layout_weight as suggested has given both the images the right ratios and appear to be scaled perfectly, however, I am still having the problem whereby they are both anchored to the far left of the screen, so the first image is actually overlaid on top of the second image, rather than having them side by side.
Below is a screenshot of the Eclipse display:
try using layout_weight for both of the ImageView components. So something like:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="15dip"
android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
i added android:layout_weight="1" to each of them. Read up on layout_weight for LinearLayout definitions, it's very useful!
You can try creating a horizontal ScrollView with a layout_width of a pixel value greater than the two ImageViews combined, rather than fill_parent. Then place your LinearLayout inside of it.