I am using a Linear Layout to display an ImageView and to make it be displayed only one half of the screen. What I have done is to add a Relative layout inside this Linear Layout so that this ImageView only occupies one half of the screen. I am getting a warning as it is normal because this Relative Layout doen't have any children but I have used it only to occupy the other half of the screen. How could I make the same result avoiding this warning?
This is what I have:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/img"
android:scaleType="fitXY"
tools:ignore="ContentDescription" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
Use below code, imageView is only half the screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/img"
android:scaleType="fitXY"
tools:ignore="ContentDescription" />
</LinearLayout>
Related
In the image provided below the child horizontal layout(yellow) is covering only half of the screen and the other half is in maroon(parent vertical layout's colour).How can i make the horizontal layout cover the entire 2nd half?
image
>
Is this what you want? your question isn't clear.
This is what you want.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_dark"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_orange_light"
android:text="Demo Text" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#color/red">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/desiredone"/>
</LinearLayout>
</LinearLayout>
I mean how can i locate a ImageView in two layouts? i have 2 relative layouts one is up, one is down. The up one has a ImageView but i want half of this ImageView located in down layout. How can i do that?
EDIT::
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#d2aff4">
<Space
android:id="#+id/center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<RelativeLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/center"
android:background="#87c96d" />
<RelativeLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
In this scenario the "top" layout needs to be created at last to be displayed on top of the rest of the views. If you need it to have a background colour, you need to apply the colour to the main container.
Here is the result:
I agree with #Booger answer's but If your parent layout is RelativeLayout then add this below property in you ImageView.
android:layout_centerInParent="true"
Or you can use below code to create that kind of layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/gray_font">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
Take a look at this library https://github.com/umano/AndroidSlidingUpPanel
if you want something easy you can put those layouts in to a parent relative layout and then you can add a image view in parent relative layout as last child and position it how you need
I think you should wrap both your RelativeLayout in another Parent layout, and in that layout, you will place your ImageView (which will span both the other layouts.
Something like this pseudo-code:
<LinearLayout>
<RelativeLayout1>
<RelativeLayout2>
<ImageView gravity=center> //Order counts, this needs to be after the RelativeLayouts to show on top of them
</LinearLayout>
I am trying to use percentRelativeLayout to make my app 90% width of the screen size and 50% of the screen height.
My layout consists of two fragments: 1) the left side is 4 buttons and 2) the right side is a container that inserts a different fragment with each button click.
When I use percentRelativeLayout or percentFrameLayout to make the height 50% of the screen, and the width 90% of the screen I get the result below where it seems like I am getting my fragments as 50% height and 90% width INSIDE a box that is 50% of the height of the total screen and 90% of the width of the total screen. Does anyone know how I can fix this?
I have tried setting my layout_height and width to match_parent for both my layouts and the result is either the same, or the app takes up the whole screen. I also made sure to use a theme that takes up the whole screen, and not a Dialog theme. I have also tried using a parent RelativeLayout with a percentRelativeLayout nested inside with layout_widthPercent and layout_heightPercent applied to my fragments and I get the same result.
<android.support.percent.PercentFrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_widthPercent="90%"
app:layout_heightPercent="50%"
>
<fragment
android:id="#+id/menuFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.percent.PercentFrameLayout>
Here is what I want it to look like
Here is what it looks like now
It looks like your menu fragment's width takes about 30% of the total width of its dialog styled parent and the content takes about 70%. I would use a PercentRelativeLayout inside the PercentFrameLayout like the following
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.percent.PercentRelativeLayout
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:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
app:layout_heightPercent="50%"
app:layout_widthPercent="90%">
<fragment
android:id="#+id/menuFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_alignParentStart="true"
app:layout_widthPercent="30%"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toEndOf="#+id/menuFragment" />
</android.support.percent.PercentRelativeLayout>
</android.support.percent.PercentFrameLayout>
As for the double white background appearing behind your Welcome fragment, I cannot really tell why it is happening without looking at its layout file. You may want to remove the background in the layout for all the fragments you replace in the container FrameLayout
Things which i have changed to show button is removed the menu fragment with four buttons to mimic the image you want as the result, you can replace this four buttons with the menu fragment
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout 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="match_parent"
android:background="#android:color/transparent">
<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="match_parent"
android:layout_gravity="center"
android:background="#android:color/holo_blue_dark"
android:padding="4dp"
app:layout_heightPercent="50%"
app:layout_marginPercent="5%"
app:layout_widthPercent="90%">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_margin="4dp"
android:layout_weight="0.3"
android:background="#android:color/holo_purple"
android:contentDescription="this is where you can keep your buttons"
android:gravity="center"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="First"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Second"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Third"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Forth"
android:textAllCaps="false" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_margin="4dp"
android:layout_weight="0.7"
android:background="#android:color/holo_green_dark"
android:contentDescription="this would be your frame container"></FrameLayout>
</LinearLayout>
</android.support.percent.PercentFrameLayout>
output
Im trying to align a circular image in the middle of two linearlayout with different colors, however the view for some reason does not align to the center
but stick to the left, below it I want to place a fragment. any help?
<?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="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<com.mikhaellopez.circularimageview.CircularImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:gravity="center"
android:src="#drawable/doge"
app:border_color="#EEEEEE"
app:border_width="4dp"
app:shadow="true" />
</FrameLayout>
<LinearLayout
android:id="#+id/calendarCard1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
android:background="#e6e6e6" />
</LinearLayout>
why not use a relative layout instead of so many nested Linear Layout. Using Relative layouts are easy and efficient. Check this http://www.mkyong.com/android/android-relativelayout-example/ for understanding the relative layouts
Your circular image layout is inside a FrameLayout along with the LinearLayout. FrameLayout basically puts all its children one atop another.
One of my DialogFragments implements two equal-sized GridViews, one stacked on top of the other. Ideally, my layout would look like this (as seen in Android Studio):
Unfortunately, when I load up the layout on an actual Android device, I get something like this:
When the Kanji GridView is empty, it's completely invisible. Additionally, its height varies depending on the number of elements it has to display. How can I force the bottom GridView to fill 50% of the height as per the layout seen in Android Studio, even when it's empty?
Here is the XML for this particular layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:focusableInTouchMode="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:id="#+id/progress_bar"
android:layout_toStartOf="#+id/search_box_kanji"
android:visibility="gone"
android:indeterminate="true"
android:layout_centerVertical="true"/>
<SearchView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#id/search_box_kanji"
android:queryHint="#string/menu_search_hint"
android:iconifiedByDefault="false"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/components" />
<com.tonicartos.widget.stickygridheaders.StickyGridHeadersGridView
android:id="#+id/grid_components"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="9"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/kanji" />
<GridView
android:id="#+id/grid_kanji"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:numColumns="9"/>
</LinearLayout>
</LinearLayout>
(By the way I'm using the StickyGridHeaders library for the upper Components GridView)
Change the '0dp' layout_height on your two LinearLayouts to 'match_parent'.
You're missing a weightSum attribute on your outermost LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:weightSum="2" > <!-- This line is what you were missing -->
...
</LinearLayout>
Tested this as working on device (assuming your EntryDetailsHeader style sets match_parent width and wrap_content height).