I need to place three elements inside RelativeLayout:
scaled image in ImageView on the right side with the top and bottom margins
TextEdit in the left top corner
LinearLayout in the rest of the space (below the title and to the left of the image)
The problem happens when the image is scaled in ImageView. I want it fits the entire parent's height considering margins. After scaling uniformly to fit the parent's height I want ImageView wraps the image's width. But as the result there are some unfilled horizontal spaces in ImageView.
The problem looks similar to one solved here. But in my case all tests with android:adjustViewBounds and android:scaleTypes didn't work. I suppose there is a problem because of margins and RelativeLayout use.
Here is the extract from my xml file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#id/albums_slideshow"
android:adjustViewBounds="true"
android:layout_marginTop="71.33dp"
android:layout_marginBottom="88.67dp"
android:scaleType="centerInside"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/music_img_album_noimage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/music_module_screen_title_margin_left"
android:layout_marginTop="#dimen/music_module_screen_title_margin_top"
android:text="#string/music_string"
style="#style/ScreenTitleFont"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignTop="#id/albums_slideshow"
android:layout_toLeftOf="#id/albums_slideshow">
...
</LinearLayout>
</RelativeLayout>
Has anyone met this problem and found the answer?
this is what i have come up with
and this is the xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="music string" android:background="#android:color/white"
/>
<LinearLayout android:id="#+id/albums_list"
android:layout_width="wrap_content" android:layout_height="fill_parent"
android:layout_alignParentLeft="true" android:layout_below="#id/album_text"
android:layout_marginTop="71.33dp"
android:orientation="vertical" android:background="#android:color/white"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="albums list"
/>
</LinearLayout>
<ImageView android:id="#+id/albums_slideshow"
android:layout_height="fill_parent" android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="88.67dp"
android:layout_alignTop="#id/albums_list"
android:scaleType="centerInside"
android:layout_centerInParent="true" android:background="#android:color/darker_gray"
android:src="#drawable/icon"/>
</RelativeLayout>
let me know for improvements
Related
I am trying to use a linear layout as a row for my recyclerView/adapter, basically my row has 3 elements: an image, a textView and a checkButton with some text.
What I want is the image occupying like 50% of the width plus 40 height, so I set the weight of the image to 2.
Next I need to have another 50% layout that has the other 2 elements, and I want at the top right of the image the textView and at bottom the checkbox.
I already implemented this before with relative layouts, but the content didn't adapt to different devices, so I tried the linear layout and the weight property.
So this is what I have at the moment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:contentDescription="photo " />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/plantName"
android:layout_below="#+id/plantName"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
Here is the image of what I have at the moment:image
As I explained, I need the image to occupy the 50% width and the green text to be side on side with the photo at the right.
The checkbox must be below, any help??
Thanks
Try this,
<?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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_weight="0.5"
android:contentDescription="photo "
android:src="#drawable/placeholder" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<TextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/colorBlack"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginTop="5dp"
android:text="CheckBox"
android:textSize="15dp" />
</RelativeLayout>
</LinearLayout>
To me, it would have to be set with a Relative layout. Then for the elements to "adapt to different devices" you would need to set android:layout_width and height to wrap_content or fill_parent depending on what you want to achieve.
Set image weight to 50% which is .5, anything you add on that layout will be horizontal, so to solve that just add another layout at .5 weight and set it vertical.
You can try something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="photo " />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
</LinearLayout>
I'm trying to align a button not right at the bottom of the screen but at a slight distance above the bottom line. How can I do that? I've tried centering the button vertically and horizontally and it works, but I need to either move the button a little below the center or a little above the bottom line.
I need to move the "PLAY" button a little lower on the screen. Additionally, I also need to scale the button down a bit, to like 80% of its current size. How can I do that?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="acevix.gladiators3.MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/splash"
android:id="#+id/imageView"
android:scaleType="centerCrop"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:adjustViewBounds="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="50dp"
android:id="#+id/button3"
android:background="#drawable/play" />
</RelativeLayout>
Use this codes,
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
Try this;
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"/>
</RelativeLayout>
Update Code
Use this : android:layout_below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logo"
android:layout_width="200dp"
android:layout_height="80dp"
android:layout_centerInParent="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/logo"
android:layout_centerInParent="true"
android:layout_marginTop="30dp" />
</RelativeLayout>
For different screen resolutions you can use
intuit/sdp
add this line to your gradle file
compile 'com.intuit.sdp:sdp-android:1.0.3'
I have code:
<LinearLayout
android:orientation="horizontal"
android:weightSum="2"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
When I try use this code, widths of left and right layouts is different.
I need create two LinearLayouts in row with same width.
If left layout have biggest width, then right layout must change width as left width. If right layout have biggest width, then left layout must change width as right width.
Parent layout must have layout_width="wrap_content", NOT "match_parent".
How I can do sizes of left and right layouts same?
Use [Percentange Relative Layout][1]http://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html
On first LinearLayout you have missed line:
xmlns:android="http://schemas.android.com/apk/res/android"
Add this and there will be no problems.
I have a very simple layout where I'm attempting to center an imageView in the middle of the screen but aligned to the top. I've attempted to use the following however it does not seem to be working and im unsure why: the imageView appears in the upper left hand corner instead of being centered and aligned to the top.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
I'm attempting to center an imageView in the middle of the screen but aligned to the top..
Use android:layout_centerHorizontal="true" instead of android:layout_centerVertical="true" in the ImageView. So following should be your XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/backspace_icon" />
</RelativeLayout>
Hope it helps.
Alright, what I'm trying to do is: setting an imageview to be on the right and the 3 textviews will be located on the left relative to the image. With the following XML code, the imageview is on the left and the 3 textviews are located in the right of the imageview.
Here's the look of it now:
As I said, I want the image to be aligned on the right side, and the 3 textviews on the left of the image.
So here's the current xml: http://pastebin.com/r68S1QKv
If I change the LinearLayout to RelativeLayout (so I can use alignParentRight = true), the textviews stack on each other and are not displayed vertically.
Suggestions, please?
EDIT: Looks like I haven't clarify the wanted look, here's an illustration of what I want:
Use This Code.Use RelativeLayout as parent & assign android:layout_alignParentRight="true" to his child this set your all view to right side.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_marginRight="20dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/row_title"
style="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey1" />
<TextView
android:id="#+id/row_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey2" />
<TextView
android:id="#+id/row_postcode_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey3" />
</LinearLayout>
<ImageView
android:id="#+id/icon"
android:layout_marginRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
What you can do - is to make outer RelativeLayout, make you image alignParentRight=true, put text views in a separate linear layout (with vertical orientation), align your LinearLayout with text views to the left edge of the image view (layout_toLeftOf="#+id/img_id").
Here is what I manage to do following this approach:
<?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"
android:orientation="horizontal">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#+id/img"
android:orientation="vertical"
android:id="#+id/text_container">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text1"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text2"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text3"/>
</LinearLayout>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/icon"
android:id="#+id/img"/>
</RelativeLayout>