0

I Want to create a design like this image .

I want independent scroll on both left and right side

What i have done that i have created a main layout .In that i am inflating the inner design at run time .So the deign is proper now.But i have done some silly mistake .Because of that the the scroll is coming inside the layout .So please see the code and help me i am new in android

Class

void setData(){ flightResult=(LinearLayout)findViewById(R.id.flightResultData); LinearLayout.LayoutParams flightDetailsLayout = new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); LayoutInflater inflater = (LayoutInflater)getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); LinearLayout.LayoutParams forUnderLine = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); forUnderLine.setMargins(0,0, 0, 0); flightDetailsLayout.setMargins(0, 40, 0, 0); for(int i=0;i < 13;i++){ TextView line=new TextView(this); line.setBackgroundResource(R.layout.shape_line); line.setLayoutParams(forUnderLine); if(i!=0){ flightResult.addView(line); } LinearLayout flightInformations=(LinearLayout)inflater.inflate(R.layout.flight_details_layout, null); flightLogo=(ImageView)flightInformations.findViewById(R.id.onewayflightLogo); flightCompany = (TextView)flightInformations.findViewById(R.id.onewayflightName); flightLogo.setImageResource(R.drawable.airindia); flightCompany.setText("AirIndia"); flightResult.addView(flightInformations); } TextView dummy=new TextView(this); dummy.setLayoutParams(flightDetailsLayout); flightResult.addView(dummy); } 

Main Layout (where i am infalting to flightResultData)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <LinearLayout android:id="@+id/mainLinearLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:background="@drawable/top_bg" android:orientation="horizontal" > <ImageView android:id="@+id/back_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/back_btn" android:layout_marginTop="5dp" android:layout_marginLeft="10dp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginLeft="75dp" android:text="@string/flightHeader" android:textColor="@android:color/white" /> </LinearLayout> <LinearLayout android:id="@+id/flightDetailsLayout" android:layout_width="fill_parent" android:layout_height="70dp" android:layout_below="@+id/mainLinearLayout" android:layout_centerHorizontal="true" android:background="@drawable/gray_bg123" android:orientation="vertical" > <LinearLayout android:id="@+id/innerflightDetailsLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/from" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="12dp" android:paddingLeft="12dp" android:textSize="12sp" android:text="Boston to San Fransisco, " android:textStyle="bold" /> <TextView android:id="@+id/tripType" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="12dp" android:text="RoundTrip" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:id="@+id/innerTripLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/tripDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="12dp" android:textSize="10sp" android:text="19 Jan 2013 " android:textStyle="bold"/> <TextView android:id="@+id/paxText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="for 1 Adults,0 Childs,O Infants" android:textSize="12dp" /> </LinearLayout> <LinearLayout android:id="@+id/Book" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginTop="5dp" android:orientation="horizontal" > <TextView android:id="@+id/tripDate" android:layout_width="84dp" android:layout_height="wrap_content" android:paddingLeft="12dp" android:text="Rs 10,2345 " android:textSize="10sp" android:layout_weight="1" android:textStyle="bold" /> <ImageView android:id="@+id/bookBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:src="@drawable/book" /> </LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/sortFlightLayouts" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/flightDetailsLayout" android:background="@drawable/gray_bg123" android:orientation="horizontal" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DEL-BLR" android:layout_marginLeft="6dp" android:layout_marginTop="5dp" android:textStyle="bold" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:src="@drawable/flight_icon_result" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_marginLeft="25dp" android:src="@drawable/time" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_marginLeft="5dp" android:src="@drawable/rupee" /> </LinearLayout> </LinearLayout> <View android:layout_width="1dp" android:layout_height="60dp" android:background="@android:color/darker_gray" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/gray_bg123" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="BLR-DEL" android:layout_marginLeft="6dp" android:layout_marginTop="5dp" android:textStyle="bold" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:src="@drawable/flight_icon_result" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_marginLeft="25dp" android:src="@drawable/time" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_marginLeft="5dp" android:src="@drawable/rupee" /> </LinearLayout> </LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/flightResultData" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/sortFlightLayouts" android:layout_marginLeft="8dp" android:orientation="vertical" > </LinearLayout> <LinearLayout android:id="@+id/footerLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" android:background="@drawable/top_bg" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:layout_marginTop="5dp" android:src="@drawable/filter" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:layout_marginTop="5dp" android:src="@drawable/sort" /> </LinearLayout> </RelativeLayout> 

details_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainResultLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:baselineAligned="false" android:gravity="center" android:orientation="vertical" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ScrollView android:id="@+id/returnScrollView" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" > <LinearLayout android:id="@+id/oneWayResultData" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/onewayflightLogo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" android:src="@drawable/spicejet" /> <TextView android:id="@+id/onewayflightName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SpiceJet" /> <TextView android:id="@+id/onewayflightNumber" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="9W - 496" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/onewayflightTime" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginTop="6dp" android:minLines="1" android:text="06:00 - 7:05" android:textSize="12dp" /> <TextView android:id="@+id/onewayflightDuration" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:minLines="1" android:text="1h 35m | Non Stop" android:textSize="10dp" /> <TextView android:id="@+id/onewayflightAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:minLines="1" android:text="Rs 20,0000" android:textSize="12dp" /> </LinearLayout> </LinearLayout> </ScrollView> <View android:layout_width="1dp" android:layout_height="60dp" android:background="@android:color/darker_gray" /> <ScrollView android:id="@+id/returnScrollView" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" > <LinearLayout android:id="@+id/returnResultData" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/returnflightLogo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" android:src="@drawable/spicejet" /> <TextView android:id="@+id/returnflightName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" android:text="Spice jet" /> <TextView android:id="@+id/returnflightNumber" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" android:text="8W - 356" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/returnflightTime" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginTop="6dp" android:minLines="1" android:text="06:00 - 7:05" android:textSize="12sp" /> <TextView android:id="@+id/returnflightDuration" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:minLines="1" android:text="1h 35m | Non Stop" android:textSize="10sp" /> <TextView android:id="@+id/returnflightAmount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:minLines="1" android:text="Rs 20,0000" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </ScrollView> </LinearLayout> </LinearLayout> 
5
  • 4
    I'm not surprised you're having difficulties with xml layouts as complicated as that. Why don't you break it into smaller easier to manage ones which you can inflate into the spaces. I.e top level has placeholders for header, then the two scrollviews, and placeholder for the footer. Then create a header and footer layout and a layout for the contents of each scrollview row. I would also very strongly recommend not hard coding layouts if you want any chance of them looking correct on more than just your development device Commented Aug 6, 2013 at 10:38
  • i accept your suggestion i am new in android development but i will do this sure thanks for a good suggestion Commented Aug 6, 2013 at 10:40
  • but as of now i need some solutions of the question Commented Aug 6, 2013 at 10:54
  • Take a look at my answer :) Commented Aug 6, 2013 at 11:00
  • rather i would suggest you to use two listviews Commented Aug 6, 2013 at 13:06

1 Answer 1

1

I've had a look at the layout XML and have found your problem. In one layout you are trying to define both scrollviews and their contents. You don't want to be doing this. I would also suggest you don't want a scrollview, but a listview.

Take a look at This tutorial on how to create listviews with custom contents and create an arrayadapter to populate it with data.

This is an example of how your main layout could look:

<?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:id="@+id/llHeader" android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1"/> <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="4" android:orientation="horizontal"> <ListView android:id="@+id/lvDepartures" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content"/> <ListView android:id="@+id/lvArrivals" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content"/> </LinearLayout> <LinearLayout android:id="@+id/llFooter" android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1"/> </LinearLayout> 

This gives you three vertical sections weighted DYNAMICALLY so it looks the same on any device screen in proportions 1:4:1. Then the middle section is split down the middle with two listviews which are independently scrollable which you can populate using an adapter.

Then you want to create a SINGLE layout for "a flight"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="75sp" android:layout_height="75sp" android:layout_marginRight="10sp" android:layout_marginTop="5sp" android:layout_marginBottom="5sp" android:id="@+id/ivDemoIcon" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Demo Name" android:layout_marginTop="20sp" android:id="@+id/tvDemoName" android:layout_toRightOf="@+id/ivDemoIcon" android:layout_toLeftOf="@+id/ivChevron"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/ivDemoIcon" android:layout_toLeftOf="@+id/ivChevron" android:text="Date Version" android:id="@+id/tvDateVersion" android:textAppearance="?android:attr/textAppearanceSmall" android:layout_below="@+id/tvDemoName"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/ivChevron" android:layout_alignTop="@+id/ivDemoIcon" android:layout_alignParentRight="true" android:layout_alignBottom="@+id/ivDemoIcon"/> </RelativeLayout> 

This layout has space for two icons as well as three sections of text nicely layed out. You can move these about and create the layout as you want with the information you want. Always try and make layouts as generic as possible so you can use it over and over.

You can then use your adapter to populate each element of each listview for each flight with an instance of this "flight" layout (I've been too lazy to tweak it to be a flight layout like yours but you should get the gist).

You can then create a header and footer layout which the textviews and imageviews etc can be set at runtime accoring to what flight information you have. For the flight information, I would strongly suggest using a singleton data class accessible from anywhere and store the information in ArrayLists (Listview adapters etc play VERY nicely with arraylists and you can do all sorts of cool things like sorting and filtering)

The beauty of clever coding is making everything as dynamic and reusable as you can. Don't go hardcoding things or creating lots of layouts for the same thing, Reuse and recycle! Will make your job much easier. Hope this has helped

Sign up to request clarification or add additional context in comments.

4 Comments

i am trying this but i want to tell you one thing that ..on both side the data will be different so how could i use different loop to fill the values in that dynamically
In the java code you set an adapter for each listview with each adapter being fed data from an array list or other such data structure. Your adapter can then decide what it chooses to populate the listview view with
i have created the layout now will u please help me how could i populate the data.should i post me new XML code please help me i am to new i am not able to understand how i will do that please help me
Have you managed to get this working? Take a look at the tutorial I linked.Maybe direct message me if you're still having issues and I can attempt to help. You may be best off starting with a simple tutorial with a single listview and then building up to more complex layouts so you don't overwhelm yourself

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.