I came across a strange issue, below is my layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:src="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<ImageView
android:id="#+id/image"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="text"
android:layout_below="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
TextView is not below ImageView as expected, it's below the original position of ImageView.
If i set layout_height of RelativeLayout to 200dp or match_parent, it works fine.
How do i solve this?
Simple solution for you is to use android:layout_height="match_parent" in your root layout.
If you are using wrap_content for your root layout, android:layout_centerInParent and android:layout_below will not work properly.
Either use height as match_parent or static.
choice 1 :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">
choice 2 :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
choice 3:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text" />
</LinearLayout>
Now its upto you to use which solution.
If you want your Relative Layout to Wrap Content and Your Second Image view Apply with layout_centerInParent then you need to give marginTop to Text View.
Try with below code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="?attr/colorPrimary" />
<ImageView
android:id="#+id/imageTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageTest"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:text="text"
android:textSize="22sp" />
</RelativeLayout>
Here is Screen Shot.
Thank for everyone answered.
I have got a solution at last. It is not a very good solution, but it works fine.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/background"
android:src="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<RelativeLayout
android:layout_height="warp_content"
android:layout_width="match_parent"
android:layout_alignTop="#+id/background"
android:layout_alignBottom="#+id/background">
<ImageView
android:id="#+id/image"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="text"
android:layout_below="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</RelativeLayout>
The top answer is actually not necessarily true. You do not need to give the element a margin top for it to be below the image view. In my situation, I have a RelativeLayout with an ImageView and a ListView. I wanted ImageView to be above ListView but the ListView to cover the area below the ImageView. And I achieved it by setting layout_alignParentTop to the ImageView and adding layout_below to the ListView.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="io.menuloop.menuloopandroid.MainActivity">
<ImageView android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/yourStory" android:src="#drawable/ic_face_black_24dp" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/yourStory"
android:layout_centerHorizontal="true" android:id="#+id/listView" />
</RelativeLayout>
Related
I have seen a different post related to this topic already before posting this question so I can definitely say that this question is not a duplicate. I have a different problem which I couldn't fix or find a solution to it.
Problem: I have created a Vertical Seekbar using new <SeekBar> </SeekBar> view. It does look fine when I see the preview in Android Studio but on the device, the SeekBar doesn't fill the height of the screen. I have rotated the SeekBar view with 90deg and try to set the height:match_parent and width:wrap_content but it isn't working at all as I expected. So I set the height to some hard-coded value and it looked fine. The only problem is, I will have to check the height of the view in which it is getting populated and set the height of the SeekBar problematically, which I want to avoid.
slider.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/roundcorner"
android:backgroundTint="#color/design_default_color_primary"
android:gravity="center"
android:layout_gravity="center"
android:elevation="5dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textColor="#fff"
android:text="#string/RangeValue"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
<FrameLayout
android:layout_weight="1"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:id="#+id/seeker"
android:layout_width="wrap_content" <!-- Set this to 400dp and it looks fine -->
android:layout_height="match_parent"
android:rotation="270"
android:layout_gravity="center"/>
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_round_done_24px"
android:layout_gravity="center"
android:padding="16dp" />
</LinearLayout>
Update
Thank you Reaz for your answer
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/maingrid"
android:background="#color/colorAccent"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:id="#+id/radarCanvas"
android:layout_width="300dp"
android:layout_height="300dp"
android:orientation="vertical">
</LinearLayout>
<include
android:layout_alignParentBottom="true"
layout="#layout/biosignals"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!--- this is where i am including slider layout -->
<include
android:layout_alignParentRight="true"
layout="#layout/slider"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="24dp" />
</RelativeLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
You are setting weight inside the Framelayout when the orientation is vertical and at the same time the height of FrameLayout is set to match_parent. If you are setting like this there will be no effect of the weight. Try setting the height to 0dp it will work for sure.
<FrameLayout
android:layout_weight="1"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="0dp">
<SeekBar
android:id="#+id/seeker"
android:layout_width="wrap_content" // set this to 400dp and it looks fine
android:layout_height="match_parent"
android:rotation="270"
android:layout_gravity="center"/>
</FrameLayout>
This is my result
You need to get rid of your FrameLayout which is limiting the width of the SeekBar. I tried to implement the layout like the following and I think it should fit in your case as well.
Another important thing you should notice that, because of your rotation, the width and height are interchanged in the view for your SeekBar. Hence I made the layout_width="match_parent". Hope that helps!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="5dp">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:padding="16dp"
android:text="100"
android:textAlignment="center" />
<SeekBar
android:id="#+id/seeker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:rotation="270" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:padding="16dp"
android:src="#android:drawable/star_on" />
</RelativeLayout>
Here is the result that I have got.
<RelativeLayout
android:layout_width="400dp"
android:layout_height="200dp"
android:layout_gravity="center">
<SeekBar
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:maxHeight="4dp"
android:minHeight="4dp"
android:progress="50"
android:progressDrawable="#drawable/custom_seek_bar"
android:rotation="270"
android:thumb="#drawable/seekbar_thumb" />
</RelativeLayout>
Use this code, you will get desired result
I want the ExpandableListView to fill the screen and I want to out the inner RelativeLayout below the ExpandableListView, but the ExpandableListView will fill the whole screen and I can't see the RelativeLayout.
What am I doing wrong?
I have this layout
<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:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="#dimen/all_pages_padding_top"
tools:context="driver.mci.ir.mcicardriver.activity.MessagesActivity">
<ExpandableListView
android:id="#+id/messagesListView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorBackground"
android:layout_gravity="right|top">
</ExpandableListView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/messagesListView"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<ImageButton
android:id="#id/imageView3"
android:layout_width="#dimen/login_icon_size"
android:layout_height="#dimen/login_icon_size"
android:scaleType="fitXY"
android:src="#drawable/sendmessage"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
/>
<EditText
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_toStartOf="#+id/imageView3" />
</RelativeLayout>
</RelativeLayout>
Try this optimized layout:
<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:layout_width="match_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/all_pages_padding_top"
tools:context="driver.mci.ir.mcicardriver.activity.MessagesActivity"
>
<ImageButton
android:id="#id/imageView3"
android:layout_width="#dimen/login_icon_size"
android:layout_height="#dimen/login_icon_size"
android:layout_alignParentBottom="true"
android:scaleType="fitXY"
android:src="#drawable/sendmessage"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
/>
<EditText
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/imageView3"
android:layout_toStartOf="#+id/imageView3"
/>
<ExpandableListView
android:id="#+id/imageView3"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_above="#id/messagesListView"
android:background="#color/colorBackground"
android:layout_gravity="right|top"
/>
</RelativeLayout>
It's flatter (I got you rid of the extra nested layout). Therefore, more performant.
Try this,
Remove the ** in the layout I just used to highlight the lines
Quite not sure anybody can edit this comment to improve:
You gave the height for ExpandableListView as android:layout_height="match_parent" and after u r trying to put a layout with property below so its already taken the full height. But here I gave the bottom layout has to be the Relative layout the ExpandableListView has to come above the relative layout
<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:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="#dimen/all_pages_padding_top"
tools:context="driver.mci.ir.mcicardriver.activity.MessagesActivity">
<ExpandableListView
android:id="#+id/messagesListView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorBackground"
**android:layout_above="#+id/textLayout"**
android:layout_gravity="right|top">
</ExpandableListView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
**android:id="#+id/textLayout"**
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<ImageButton
android:id="#id/imageView3"
android:layout_width="#dimen/login_icon_size"
android:layout_height="#dimen/login_icon_size"
android:scaleType="fitXY"
android:src="#drawable/sendmessage"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
/>
<EditText
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_toStartOf="#+id/imageView3" />
</RelativeLayout>
I want to achieve my layout with image-view and relative layout as like as picture shows here.
I tried with this code but not works.
<RelativeLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textview_ratting"
android:layout_margin="5dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"/>
</RelativeLayout>
This worked for me...Provide negative paddingTop equal to half of the size of the imageview .
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="70dp"
android:background="#color/colorAccent" />
<ImageView
android:id="#+id/widget_title_icon"
android:paddingTop="-70dp"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
android:contentDescription="#string/action_settings"
android:scaleType="fitStart"
android:src="#mipmap/ic_launcher" />
</FrameLayout>
We normally use FrameLayout for this case:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:background="#color/colorAccent"/>
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#mipmap/ic_launcher"/>
</FrameLayout>
We can also play with android:paddingTop="-10dp" as you like.
See FrameLayout definition:
Child views are drawn in a stack, with the most recently added child
on top.
Hope this will help....
android:layout_marginTop="-35dp" -35dp is the half of your image size (70dp/2) but margin in the reverse direction so use "-" sign.
<RelativeLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textview_ratting"
android:layout_margin="5dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageView"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="-35dp"
android:src="#drawable/icon"/>
</RelativeLayout>
used FrameLayout, using frameLayout you can do it.
For this, you should use FrameLayout. FrameLayout provides a layered layout to overlap items in UI. Example:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center|center_horizontal"
android:background="#color/colorAccent" />
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_marginBottom="100dp"
android:layout_gravity="center|center_horizontal"
android:src="#mipmap/ic_launcher" />
</FrameLayout>
Arpan has already proposed a similar answer. He is using padding and margin of both elements, whereas this one uses layout gravity and relative margin of ImageView. Doing this will always place the contents in the center of the screen on all devices.
ImageView(android:layout_marginBottom) = 0.5 * RelativeLayout(android:layout_height)
Please use circleimageview and relativelayout as a child of framelayout.
<FrameLayout 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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="0dp"
android:paddingBottom="0dp"
android:paddingTop="0dp">
</RelativeLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cir_img_ptv"
android:layout_width="#dimen/cir_img_diameter_ptv"
android:layout_height="#dimen/cir_img_diameter_ptv"
android:layout_gravity="center|top"
android:layout_marginTop="#dimen/cir_img_top_margin_ptv"
android:scaleType="centerCrop"
android:src="#drawable/profile_user"
app:civ_border_color="#color/white"
app:civ_border_width="#dimen/cir_img_stroke_ptv"
app:civ_fill_color="#color/white"
app:civ_border_overlay="true"/>
</FrameLayout>
Try this code,
activity_main.xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relCustomerEditProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginTop="100dp">
<LinearLayout
android:id="#+id/linRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="50dp"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/imgBackground"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:layout_alignBottom="#+id/relProfile"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_black"></RelativeLayout>
<RelativeLayout
android:id="#+id/relProfile"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_centerHorizontal="true">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgViewProfilePhoto"
android:layout_width="90dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
android:background="#drawable/red"></de.hdodenhof.circleimageview.CircleImageView>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
Hereby,I am attaching screenshot,
Hope, it helps you!!
Why is my image view (orange) not centered in the horizontal linear layout (blue) even though its layout_centerHorizontal is set to true:
<LinearLayout 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" android:orientation="vertical"
tools:context=".MainActivity" tools:deviceIds="wear_square"
android:weightSum="1">
<TextView android:id="#+id/text" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/hello_square" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#6dbdff"
android:layout_weight="0.30"
android:weightSum="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:layout_centerHorizontal="true"
android:background="#ff5831"
android:layout_weight="0.37" />
</LinearLayout>
</LinearLayout>
You cannot use layout_centerHorizontal for a child of a Linear layout... this is the proper implementation. Notice how i use the gravity attribute. (the one you're using would work if it was a direct child of a RelativeLayout
(Edit to work...)
<LinearLayout 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" android:orientation="vertical"
tools:context=".MainActivity" tools:deviceIds="wear_square"
android:weightSum="1">
<TextView android:id="#+id/text" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="HELLO" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#6dbdff"
android:layout_weight="0.30"
android:weightSum="1">
<View android:layout_width="0dp" android:layout_height="10dp"
android:layout_weight="0.315"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:background="#ff5831"
android:layout_weight="0.37" />
</LinearLayout>
</LinearLayout>
Alternative, in case you don't want to put things on either side of the image...
<LinearLayout 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" android:orientation="vertical"
tools:context=".MainActivity" tools:deviceIds="wear_square"
android:weightSum="1">
<TextView android:id="#+id/text" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="HELLO" />
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#6dbdff"
android:layout_weight="0.30"
android:weightSum="1">
<ImageView
android:layout_width="200dp"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal"
android:background="#ff5831" />
</FrameLayout>
</LinearLayout>
Not sure you need the 2nd LinearLayout, so here goes.
<LinearLayout 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" android:orientation="vertical"
tools:context=".MainActivity" tools:deviceIds="wear_square"
android:weightSum="1">
<TextView android:id="#+id/text" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/hello_square" />
<ImageView
android:layout_width="wrap_content"
android:src="#ff5831"
android:layout_height="0dp"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal"
android:layout_weight="0.37" />
</LinearLayout>
For now, I'made the src of the image the color you want to see. IF you replace it with an actual bitmap refernce, it will be centered and properly sized based on the bitmap you use and parent restraints
if I delete the android:layout_weight="0.37" line (which was added by
Android Studio) then the image view vanishes, why is that?
With this line, the imageView will know how to size itself based on the parent. Without, because the imageView has no image, so it cannot size itself based on the image bitmap to show (which is missing) and the parent that contains it. Add an image to show and it will come back.
Final advice,
Totally read this article about how android draws views. Its really really great info.
![I had coded it in linear layout (code given below) but want to know how to do the same using relative layout, or is that just a bad idea given the layout?
linear layout -
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
/>
<TextView
android:text="You're invited!"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="45sp"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:background="#009688"/>
<TextView
android:text="Bonfire at the beach"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:textSize="24sp"
android:background="#009688"/>
][1]When using relative layout my ImageView does not appear on the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"
/>
</RelativeLayout>
Its because you are using android:layout_height="0dp"
Please use android:layout_height="wrap_content"
Change your ImageView's height like this.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:src="#drawable/ocean"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"
/>
You can only use layout_weight in LinearLayout.
Try this.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertizal">
<ImageView
android:src="#drawable/ocean"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/ocean"/>
android:layout_height="0dp" This is wrong in your ImageView
Change this to
android:layout_height="match_parent"
or
android:layout_height="wrap_content"
Basically you set your height as 0. So nothing to show.
Edit :
Also you can remove this android:layout_weight="1". No need for weight in RelativeLayout