I need one layout over another layout (they can have any heights), like this:
When screen become smaller, I need that brown layout become lower, like this:
I have this code to do this:
<?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">
<FrameLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<FrameLayout
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
</FrameLayout>
On small heights it works fine, but on big screens I have this:
Can you help me please with this?
you could benefit from CoordinatorLayout here to do such effects
Use Linear layout with percentage weights, so that percent of screen covered will always be same despite of resolution as in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_weight ="0.6"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<LinearLayout/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight ="0.6"
android:layout_gravity="bottom|center_horizontal"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
</LinearLayout/>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<FrameLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:background="#dd6600">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="One"/>
</FrameLayout>
<FrameLayout
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginTop="70dp"
android:background="#bbbbbb">
<TextView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:text="Another"/>
</FrameLayout>
Use RelativeLayout and add android:layout_marginTop="70dp" to second child of RelativeLayout. You can change margin as per your requirement.
Related
How do I make LinearLayout in Android Studio at the bottom of the page. The result from the code below
I want the highlighted darken layout to be at the bottom of the page.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainPage"
android:orientation="vertical"
android:background="#ffffff">
<Button
android:id="#+id/taptoscan"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/barcode"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tap to Scan"
android:fontFamily="#font/antic"
android:layout_gravity="center"
android:textSize="18sp"/>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>
In the above code I tried the below and did not worked.
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom"
You can use RelativeLayout at the outside. Something like this, and then ADD new one LinearLayout after that.
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#ffffff"
android:orientation="vertical"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/taptoscan"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:background="#drawable/barcode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/antic"
android:text="Tap to Scan"
android:textSize="18sp" />
</LinearLayout>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:gravity="bottom"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Use Frame Layout as base layout to do it in the best way, it's gonna work definitely
Just use layout_gravity="bottom" in the LinearLayout which you want at bottom and
Just like this :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#ffffff"
android:orientation="vertical"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/taptoscan"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:background="#drawable/barcode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/antic"
android:text="Tap to Scan"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
The approach below would help you achieve your design specifications with zero overlappings. Basically, there are four key steps:
Change your root layout to a RelativeLayout.
Inside the RelativeLayout, add a LinearLayout that would contain your Button and your TextView.
Inside the same RelativeLayout, add the LinearLayout that you intend to pin to the bottom of the screen.
Make sure yoU set the first LinearLayout on top of the second by using the android:layout_above="" attribute.
Now, here's the code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
android:layout_above="#+id/bottomView">
<Button
android:id="#+id/taptoscan"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/barcode"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tap to Scan"
android:fontFamily="#font/antic"
android:layout_gravity="center"
android:textSize="18sp"/>
</LinearLayout>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomView"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I hope this helps.
I have two views (com.github.mikephil.charting.charts.BarChart and LinearLayout), the content inside one view is approx 600 dp high, the other once has 500 dp. Width of both views is fill_parent.
I would like to position them both into the center of the screen (so they overlaps).
Unfortunately, Android's layout alignment is very unintuitive and hit or miss for me and I'm not able to achieve that.
Can you please help?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#11FFFFFF">
<com.github.mikephil.charting.charts.BarChart
android:id="#+id/chart"
android:layout_width="match_parent"
android:layout_height="500dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="150dp"
android:includeFontPadding="false"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="HITS"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="150dp"
android:includeFontPadding="false"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="MISSED"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I want to position both Views inside this RelativeLayout in the center of the screen, overlapping
Put in the 2 views you wanna to place in center inside a RelativeLayout, then add android:layout_centerInParent="true" into the 2 views.
For example it look like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.BarChart
....all other stuff
android:layout_centerInParent="true" > //..add this
<LinearLayout
..... all other stuff
android:layout_centerInParent="true" > //..add this
</LinearLayout>
</RelativeLayout>
Define your main layout as ConstraintLayout and then constraint all sides of both elements to their parent.
Something like this:
<?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">
<LinearLayout
android:layout_width="600dp"
android:layout_height="600dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<com.github.mikephil.charting.charts.BarChart
android:layout_width="500dp"
android:layout_height="500dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.github.mikephil.charting.charts.BarChart>
</android.support.constraint.ConstraintLayout>
With this code your BarChart is above your LinearLayout.
In my experience it's most of the times best practice to use the lightest container possible, which in this case is probably a FrameLayout, so I would use that instead of RelativeLayout and use android:layout_gravity="center" in the subviews like this for example:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.BarChart
android:layout_gravity="center" >
<LinearLayout
android:layout_gravity="center" >
</LinearLayout>
</FrameLayout>
I am adding few image views inside a horizontal LinearLayout which is again inside a HorizontalScrollView. But the linear layout is not scrolling. Below is my code. Can someone guide me where exactly my xml formation is going wrong?
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
</LinearLayout>
</HorizontalScrollView>
I would suggest use Constraint Layout As Parent and Inside it Use Nested Scroll View With Linear Layout
Here is a sample code, modify according to your need.
<?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"
tools:context="suraj.iitgandhinagar.Login">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:layout_editor_absoluteX="72dp"
tools:layout_editor_absoluteY="0dp"
tools:ignore="MissingConstraints">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="36dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="272dp"
android:layout_height="237dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:src="#drawable/unnamed"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="59dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>
Take a look at this situation. if you use the linear layout as match_parent then don't get the layout width. Use wrap_content. If its don't work then set the fixed size for your image.
<HorizontalScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</HorizontalScrollView>
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!!
![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