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>
Related
The list of things expected in the outout
1.a linear layout to the buttom of the activity as shown in the expected image
2.a recycler view above the linear layout to achieve the scrolling funtionality as shown in the expected image
The problem can be solved if I give the height to the recycler view.But in this case the layout won't be responsive to the samller sized screens
How can I achieve it?
xmlfile.xml
<?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:numberpicker="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:orientation="vertical"
tools:context=".CartPage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:padding="20dp">
<ImageView
android:id="#+id/back_icon"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:src="#drawable/ic_arrow_back_black_24dp" />
<TextView
android:id="#+id/product_buy"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/back_icon"
android:fontFamily="#font/carter_one"
android:text="My Cart"
android:textColor="#color/black"
android:textSize="20sp"
tools:ignore="RtlCompat" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/product_recycler"
android:layout_width="match_parent"
android:layout_height="400sp"
android:padding="0dp" />
// this is the buttom recycler
<LinearLayout
android:layout_alignParentBottom="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/buttom"
android:gravity="bottom|end"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_gray"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="#+id/details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_gray"
android:fontFamily="sans-serif"
android:lineHeight="28dp"
android:padding="5dp"
android:text="Price Details"
android:textColor="#color/grey_400"
android:textSize="18sp"
tools:ignore="RtlCompat" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
If you wish to tell your RecyclerView to fill the left over space of your LinearLayout you have to use the following layout_height and layout_weight on your RecyclerView:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/product_recycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="0dp" />
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.
I've placed three buttons as below,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard"
android:id="#+id/standard_map"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="satellite"
android:id="#+id/satellite"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hybrid"
android:id="#+id/hybrid"/>
</LinearLayout>
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.google.android.gms.maps.MapFragment"
map:cameraTargetLat="13.0827"
map:cameraTargetLng="80.2707"
map:cameraBearing="112.5"
map:cameraTilt="65"
map:cameraZoom="20"/>
</LinearLayout>
The output yield is as below:
image explaining the problem
The orientation of the inner Linear Layout is horizontal and that's perfectly fine. I need the buttons to be aligned in centre (Vertically centred). Even when I use android:gravity="centre", it aligns the buttons horizontally centred which is of no use. I need the buttons to be vertically centred in an Horizontal Linear Layout.
As far as I understand your Question, you want to make middle button
in center, so I have done some changes, please update your code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/standard_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard"
android:layout_weight="1"/>
<Button
android:id="#+id/satellite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="satellite"
android:layout_weight="1"
/>
<Button
android:id="#+id/hybrid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hybrid"
android:layout_weight="1"/>
</LinearLayout>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
map:cameraBearing="112.5"
map:cameraTargetLat="13.0827"
map:cameraTargetLng="80.2707"
map:cameraTilt="65"
map:cameraZoom="20" />
</LinearLayout>
Please let me know if any problem with this.
In the second LinearLayout change layout_gravity and orientation properties. So, your second layout should be like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:orientation="vertical">
...
</LinearLayout>
And you will achieve this:
This is the code of the XML file of the layout:
<?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="com.example.barda.wikirace.MainActivity"
android:background="#drawable/backgroundmain"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/activity_main"
>
<ImageView
android:id="#+id/wikiRaceTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
app:srcCompat="#drawable/wikiracetop" />
<TextView
android:id="#+id/emptyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/twoPlayersBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/twoplayersbutton"
/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/singlePlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/playbutton"
android:onClick="startSinglePlayerMenuActivity"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
</LinearLayout>
</LinearLayout>
This is how it looks in the preview:
And this is how it appears on the device (LG G4):
What can cause the problem?
As you can see, I want the buttons to be on the right color for them.
why don't just use the constraint layout?
if you want to do it in the way you're doing it, you will have to setup the width with a fixed value or match_parent why? because when you say wrap_content and the image is big is going to be over the other views as is happening also you can setup a android:layout_weight for the button if you want to use the weight as "control" for your layout, be coherent with the method that you use to adapt the views.
![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