How to make this layout in Android XML - android

I am novice in Android trying to make this layout:
Simply what I want to achieve:
The red container should take as much space as it needs but not as much that green container have to be shrinked. If there are too many items, red container will be scrollable. Green container is also always centered in orange one if there is space for it (if not it is actually still centered).
I don't know how to do it at all :( . Here is my try:
The problem is that I want to always maintain height of green container (minHeight does not work I can't understand why) and make the green container centered in orange one. I have problem with Scenario 2 (as you can see in the picture), this code works good in first scenario.
<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">
<ScrollView
android:id="#+id/red_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Items are here -->
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/orange_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_orange_dark"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:id="#+id/green_container"
android:layout_width="100dp"
android:background="#android:color/holo_green_dark"
android:layout_height="50dp"
android:orientation="horizontal">
<!-- My content -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
Edit: minHeight does not help:
Edit: image for user Illegal Argument:

Try setting property android:minHeight = "(whatever)dp" to orangeContainer. This worked for me in others "similiar" cases.
:)

Is this what you are looking for:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/list_items"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/background_dark" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/list_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/darker_gray"
android:gravity="center"
android:minHeight="200dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
Snapshot in ecllipse:

Related

Image does not touch the edges, Android [duplicate]

I am creating an Android app which has a main RelativeLayout and some LinearLayout within it.
Now i have this problem. When dragging items to the editor, e.g. a LinearLayout, it doesn't fit to the full width of the screen. How can I make this possible? This is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:gravity="fill"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/itemDetailLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="Name"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:fillViewport="true" >
<TextView
android:id="#+id/itemRecentHigh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recent High" />
<TextView
android:id="#+id/itemRecentLow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recent Low" />
<TextView
android:id="#+id/itemAverage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Average" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/listViewLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/itemDetailLayout"
android:layout_marginTop="10dp"
android:fillViewport="true"
android:gravity="fill_horizontal"
android:orientation="vertical" >
<ListView
android:id="#+id/searchListView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
</ListView>
</LinearLayout>
Added a screenshot for more info. Added blue background to have some contrast.
Replace this:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
With
android:layout_width="match_parent"
android:layout_height="wrap_content"
into your LinearLayout or Remove all the Padding from main RelativeLayout
Removing padding makes the linear layout fit the entire screen of the device
The space between the blue part and the "end of the screen". On the sides and above the part where the back button and home button are.
Remove the padding from the root RelativeLayout.
Try
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical>
// Other views within the linear layout
</LinearLayout>
I suppose you are using Eclipse. Personally, I hate the Graphical Editor of Eclipse and I usually write the XML code directly because working with the editor is a real pain
Don't use fill_parent as it is deprecated.
Instead to your RelativeLayout set
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Then, to the list view that you want to fill the rest of the screen, you can set this tags
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
By doing so, you are telling the XML that you want your ListView to do what fill_parent used to do in previous versions of Android.
Kind regards!
you should try something like the following :
<LinearLayout
android:id="#+id/itemDetailLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
...
</LinearLayout>
what i mean you should do this :
android:layout_width="fill_parent"
for every LinearLayout that you want its width to fill_parent .
FILL_PARENT means that the view wants to be as big as its parent as mentioned in the documentation .
and please give me some feedback
Hope That Helps .

Layout, one ViewGroup takes the 60% of the height, and the other one fills the rest

I've bounced around quite a bit and haven't been able to find a solution that matches what i'm trying to do.
I have 2 RelativeLayouts inside a LinearLayout.
I would like the first RelativeLayout to take up 60% of the screen.
I would like the second layout to take up the remainder of the screen.
I am using weights but I'm trying to see if there is a way that I can avoid using a secondary weight on the second RelativeLayout.
The reason for this is that the user has the ability through a Button click to hide the first layout.
In code I do this by setting the visibility of the first RelativeLayout to "Gone".
The problem is if I have weight set to .6 and .4 and sum of 1, when the first one is set to gone, the second one moves up correctly, but its height doesn't increase because it was set to 40%.
Ideally I could have it set to fill the remaining space on the screen and therefore when the first one is hidden, it will now take up all 100% of the screen.
Is this possible or do I need to do more programmatically when I hide the first View to increase the allowed height of the second view?
Hopefully this makes sense, if not let me know and i'll try to clarify further.
I've stripped out some of the contents of the RelativeLayouts for simplicity as well as some ids.
Code below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/relativeLayout1"
android:layout_weight="0.6">
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</LinearLayout>
You can use Android Support Library's Percentage Relative Layout to achieve this.
Percentage Relative Layout
import percentage support library by adding following line to your build.gradle(app level),
compile 'com.android.support:percent:24.2.1'
And Your XML file will be,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_heightPercent="60%"
android:id="#+id/relativeLayout1"
>
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relativeLayout1"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
</LinearLayout>
Once you set,
relativeLayout1.setVisibility(View.GONE);
you are able to see that the Relative layout 2 will occupy the whole parent space.
I hope it will help you. All the best.

Android place an image view between two views

I need to create a layout as shown in the image.
The rounded button with the arrow needs to be exactly between the blue and the gray background.
I'm having difficulties placing it without specifying the margins precisely, which is something I don't want to do because there is no guarantee it will look good on all resolutions and devices.
I would appreciate an xml sample for that
Thanks!
Use the desired drawable.. hope it works.. you can set width and height according to your need.
<?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="match_parent" >
<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>
<ImageView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/arrow" />
</FrameLayout>
</LinearLayout>

Scrollview extends beyond screen bottom

I suddenly have the problem that Scrollview extends beyond the bottom of the screen so that even if you scroll all the way down it does not show all its content. The XML is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:background="#FFBBBBBB"
android:orientation="vertical" >
<View
android:layout_width="100dp"
android:layout_height="300dp"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:background="#FFDDDDFF"/>
<View
android:layout_width="100dp"
android:layout_height="300dp"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:background="#FFDDDDFF"/>
</LinearLayout>
</ScrollView>
It doesn't get any simpler than that. Once you have scrolled all the way down (as indicated by the shape of the scroller) you should see the bottom white margin but instead this is what it looks like:
Compare with the top:
The bottom should look like the top, only reversed. This happens in the emulator, on real devices and in pretty much every Android version I have tried. I am at a loss as to what I am doing wrong (if anything...).
Please no guesses and no shooting from the hip! Only tested answers. I wasted enough time on this already as it is. Thanks.
After wasting much time in dead alleys I was finally put on the right track by this other SO thread: the issue was the layout margin on the LinearLayout. Apparently ScrollView doesn't like that, just as it doesn't like its child to be centered (an issue flagged by many other people but not my problem here) and who knows what else. Very choosy widget. It's issues like this that make me reconsider my commitment to Android: it's just too time-consuming relative to alternative platforms and, even if you enjoy the challenge, time is money.
Anyway, for the benefit of those who will flop here later, here is a side-by-side demonstration of a broken layout (a simpler version of the one above) on the left and a working one on the right. The trick is to emulate the verboten margin with padding on an extra container.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFF"
android:orientation="horizontal"
android:baselineAligned="false">
<ScrollView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#FFFFFFFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:background="#FFBBBB22"
android:orientation="vertical">
<View
android:layout_width="100dp"
android:layout_height="1000dp"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:background="#FFDDDDFF"/>
</LinearLayout>
</ScrollView>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#FF000000"/>
<ScrolllView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#FFFFFFFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:background="#FFFFFF"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFBBBB22"
android:orientation="vertical">
<View
android:layout_width="100dp"
android:layout_height="1000dp"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:background="#FFDDDDFF"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
try putting a padding on the bottom of the scroll view, so that you see a white line at the bottom - your view indeed does scroll all the way down , i tried it with this code and the result is this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"
android:padding="5dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:background="#FFBBBBBB"
android:orientation="vertical" >
<View
android:layout_width="100dp"
android:layout_height="1500dp"
android:layout_gravity="center_horizontal"
android:layout_margin="15dp"
android:background="#FFDDDDFF" />
<View
android:layout_width="100dp"
android:layout_height="300dp"
android:layout_gravity="center_horizontal"
android:layout_margin="15dp"
android:background="#FFDDDDFF" />
<View
android:layout_width="100dp"
android:layout_height="10dp"
android:layout_gravity="center_horizontal"
android:layout_margin="15dp"
android:background="#FF00FF00" />
</LinearLayout>
Just try putting the LinearLayout inside another one
Like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:background="#FFBBBBBB"
android:orientation="vertical">
<View
android:layout_width="100dp"
android:layout_height="300dp"
android:layout_gravity="center_horizontal"
android:layout_margin="15dp"
android:background="#FFDDDDFF" />
<View
android:layout_width="100dp"
android:layout_height="300dp"
android:layout_gravity="center_horizontal"
android:layout_margin="15dp"
android:background="#FFDDDDFF" />
</LinearLayout>
</LinearLayout>
</ScrollView>

linear layouts not spacing correctly

Hey im having trouble with these linear layouts in android xml. initially i did them in a relative layout and it worked fine, but after some research i discovered that relative layouts inside of a scrollview doesnt work supposedly. so now after much tweaking my imageview shows up but has a huge margin above and below it and my textview doesnt even show up aside from being where its supposed to in the graphics editor but blank.
so whats wrong? should i even be using a linear layout?
this is roughly what its supposed to look like http://www.mediafire.com/view/?z945tz2vrb2x46t
and this is what it looks like after Abdul and Ralgha's help as well as setting the base linear layout's height to wrap content http://www.mediafire.com/view/?px17q2z3yyeo8az
Thanks
<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" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="#+id/today"
android:src="#string/today"
android:textSize="30dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
<ImageView
android:id="#+id/image1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/weeklylist_blocks"
/>
</LinearLayout>
</ScrollView>
</LinearLayout>
`![screwed up layout][1]
Don't worry about weight right now, leave it removed. In your TextView, change "android:src" to "android:text" (without the quotes naturally). If that alone doesn't solve it, remove the textSize line and see what happens. If that works, then you can start playing with sizes (and weights if needed).
Also, textSize should be given in sp rather than dp. sp is for text, dp is for everything else, though that's not what is causing your problem.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/today"
android:textSize="30sp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="#string/today"
/>
<ImageView
android:id="#+id/image1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/weeklylist_blocks"
/>
</LinearLayout>
</ScrollView>
android:layout_weight="1"
might be the cause of your problems
Its works like charm, Use the following coding to achieve your thing:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:fillViewport="true" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/today"
android:src="#string/today"
android:textSize="30sp"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="#string/today"
/>
<ImageView
android:id="#+id/image1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:contentDescription="#string/nissan"
android:src="#drawable/weeklylist_blocks" />
</LinearLayout>
</ScrollView>
</LinearLayout>

Categories

Resources