How can get this kind of Layout design? - android

I want to achieve the UI in the below photo. I am not able to decide which layout should I use. Kindly anyone give some points to this:

Use a Linear layout with vertical orientation and within the linear layout(vertical), include linear layouts with horizontal orientation
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--
online icon
call icon
-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--
Gratuity icon
-->
</LinearLayout>

Related

I have some problems with the XML layouts (android development).

I think I have some problems with a LinearLayout container. I do not know how to fix these problems:
I am a beginner to XML but I think the problem is in the second LinearLayout. I hope someone can help me out.
The code is here below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
**<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
andriod:orientation="horizontal" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>**
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
</LinearLayout>
The problem I see when reading your xml file is that inside the main LinearLayout you have 3 elements with the properties about the width and height as follows:
android:layout_height="match_parent"
android:layout_width="match_parent"
which means you expect the elements to fill entirely the main LinearLayout. This is not going to work. A linear layout has ordered not overlapping elements (RelativeLayout is there for that). Since the main LinearLayout is supposed to be oriented vertically, I suppose that for these three elements, you need to set the properties to match the whole width of main LinearLayout and to be wrapped vertically, by setting these values:
android:layout_height="wrap_content"
android:layout_width="match_parent"
You should apply these to the TextView, LinearLayout and Button elements of second level.
If you have overlapping imageviews try adding weights to them and/or changing the width to not match the parent and only wrapping the content.
please change andriod to android ( Line 14 )
Your posted code has a typo. Your fix might be as simple as replacing the line:
andriod:orientation="horizontal"
with:
android:orientation="horizontal"
Judging by the image you posted, I think you may have forgotten to add weights to occupy the free space in your Linearlayouts. Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
andriod:orientation="horizontal"
android:layout_weight="1" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
/>
</LinearLayout>
<Button
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
</LinearLayout>

how to prevent Default scroll in Android?

Need help,
See the following screen, (This is my actual home screen)
But, when I run my Application It looks as follows (Screen When I run my application
Here I need to drag (Scroll) the screen to see the footer part. I wants to avoid this, Can anybody help me out in this Please. Thank You.!
hope this will help you. Use following
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- header part -->
<LinearLayout
android:id="#+id/ll_header"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_width="match_parent">
...
</LinearLayout>
<!-- scroll view part -->
<ScrollView
android:id="#+id/sv_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#+id/ll_fooetr">
</ScrollView>
<!-- footer part -->
<LinearLayout
android:id="#+id/ll_footer"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:layout_width="match_parent">
...
</LinearLayout>
</RelativeLayout>
My suggestion is to use LinearLayout or RelativeLayout for your activity, and inside it use a ScrollView for the inside part (which should be scrolled).
So, perhaps something like this
<?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">
<ScrollView
android:layout_height="wrap_content"
android:layout_width="match_parent">
<!-- all your scrollable stuff goes here -->
</ScrollView>
<!-- here's your footer -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
...
</LinearLayout>
</LinearLayout>
Documentation on ScrollView
Edit:
I think RelativeLayout (as main Layout) will serve you the best, as it allows you to align itself against parent's edges.
Documentation on RelativeLayout

Android : how to deal with relative layout

i am stuck from two days with relative layout..here is my screen snap in linear layout
so its fine. but now i want to add refresh button somewhere on map but i found that it is not possible with linear layout. so i tried in relative layout but cant even get screen as above.
my footer layout is always shown at top.. here is my xml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- include title bar for all screen -->
<include
android:id="#+id/include1"
layout="#layout/titlebar_layout" />
<com.google.android.maps.MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1.63"
android:apiKey="0VkXbAOFvAq7b6uaGHSmnS2a2VosPxoS6ceHY_g"
android:clickable="true" >
</com.google.android.maps.MapView>
<include
android:id="#+id/include2"
android:layout_marginBottom="38dp"
layout="#layout/bottom_layout"/>
</LinearLayout>
any help will be greatly appreciated. thanks in advance
Try this. Use a frame layout and put the mapview and button inside the frame layout. Thus button will be placed above the mapview. Place it according to your need.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- include title bar for all screen -->
<include
android:id="#+id/include1"
layout="#layout/titlebar_layout" />
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_width="1.0" >
<com.google.android.maps.MapView
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.63"
android:apiKey="0VkXbAOFvAq7b6uaGHSmnS2a2VosPxoS6ceHY_g"
android:clickable="true" >
</com.google.android.maps.MapView>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</FrameLayout>
<include
android:id="#+id/include2"
android:layout_marginBottom="38dp"
layout="#layout/bottom_layout"/>
</LinearLayout>
Hope this helps...!!!
RelativeLayout is probably what you want. It can be difficult to program, as you need to define the bottom View first, and then the Views which come above it on the screen.
Check out these tutorials for some more assistance on using RelativeLayouts. The best way to learn is by doing it! Experiment with various layouts until you figure out how the rules work. Then it should be pretty simple to recreate this as a RelativeLayout.

Android ScrollView and buttons at bottom of the screen

I want to implement this: A ScrollView that contains many elements (ImageViews, TextViews, EditTexts etc) and then after the ScrollView some buttons (which are custom ImageViews) that appear always exactly at the bottom of the screen.
If I use the android:fillViewport="true" attribute, then if the elements of the ScrollView are too big to fit in the screen size the buttons get invisible . If I use the android:Weight=1 attribute then the ScrollView gets only 50% of the Screen when the screen is big and it can fit (I want the buttons to take a small percentage, about 10%). If I set the android:Weight to bigger values then the buttons appear very small.
Please help! Maybe it is something simple that I overlooked but I’ve been banging my head for hours!
Just created and tested it. Looks like you want.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button2"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons">
<!--Scrollable content here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="test text"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo Welt"
/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go next page"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
This worked for me. Give the scroll view a weight of 1. Put all the other widgets following the scroll view in a layout. The scroll view will grow enough to not block the rest.
Widgets in scroll view and rest at bottom
scrollview cannot fit the screen because you put it on a linear layout, so linear layout fit in the screen,
just try to make scrollview as root elemen on xml layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Here you can put some XML stuff and BOOM! your screen fit to scrollview -->
</LinearLayout>
</ScrollView>
If you do not want to use RelativeLayout, it is better to use LinearLayout. This method is better in my opinion.
Just set the layout_weight to one

placing three android linear layouts

I want to place 3 linear layouts on same page of android.
Two besides each other and the other one below the two.
The view is in landscape mode and it should cover the whole screen.
How to do that in xml file?
I am not being able to post my code. Seems like its not working
You will do something like this
<LL orientation=vertical android:layout_height="fill_parent">
<LL orientation:horizontal>
<LL><!-- First of the two who are beside--></LL>
<LL><!-- Second of the two who are beside--></LL>
</LL>
<LL>
</LL>
</LL>
You can use RelativeLayout for that:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/layoutLeftTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true">
<!-- Content of the first layout -->
</LinearLayout>
<LinearLayout
android:id="#+id/layoutRightTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true">
<!-- Content of the second layout -->
</LinearLayout>
<LinearLayout
android:id="#+id/layoutBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<!-- Content of the third layout at bottom -->
</LinearLayout>
</RelativeLayout>

Categories

Resources