Layout for different size screens (Android) - java

I'm working on an app, it looks great on 7" devices (Nexus and Dell streak 7). I created the images from different densities, so it looks good.
However, when I try to run the app on my phone (Samsung Galaxy 2) or Tablet 10" it doesn't look good at all.
Here is how it looks on the nexus 7":
Here is how it looks on the Galaxy 2 phone:
Here is how it looks on the 10" Tablet:
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="#string/tour_menu"
android:textSize="#dimen/font_large" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tour_info"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:shrinkColumns="*"
android:paddingRight="5dp"
android:orientation="vertical" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/passenger_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:gravity="center_horizontal|center_vertical"
android:background="#drawable/pax_list"
android:contentDescription="#string/pass_list" />
<TextView
android:id="#+id/passenger_list_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/pass_list"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/arrivals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:background="#drawable/arrivals"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:padding="44dp"
android:contentDescription="#string/arrivals" />
<TextView
android:id="#+id/arrivals_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/arrivals"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/departures"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/departures"
android:contentDescription="#string/departures" />
<TextView
android:id="#+id/departures_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/departures"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/master_rooming"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/master_rooming_list"
android:contentDescription="#string/rooming" />
<TextView
android:id="#+id/master_rooming_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/rooming"
android:textSize="#dimen/font_medium" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="50dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/itinerary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/itinerary"
android:contentDescription="#string/itinerary" />
<TextView
android:id="#+id/itinerary_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/itinerary"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/voucher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/vouchers"
android:contentDescription="#string/voucher" />
<TextView
android:id="#+id/voucher_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/voucher"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/qa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/qa_list"
android:contentDescription="#string/qa" />
<TextView
android:id="#+id/qa_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/qa"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/optionals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/optionals"
android:contentDescription="#string/itinerary" />
<TextView
android:id="#+id/optionals_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/optionals"
android:textSize="#dimen/font_medium" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="50dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/flights"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/flights"
android:contentDescription="#string/itinerary" />
<TextView
android:id="#+id/flights_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/flights"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/close_tour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/close_tour"
android:contentDescription="#string/close" />
<TextView
android:id="#+id/close_tour_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/close"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<!--
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/icon"
android:contentDescription="#string/voucher" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/voucher"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/icon"
android:contentDescription="#string/qa" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/qa"
android:textSize="#dimen/font_medium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/icon"
android:contentDescription="#string/close" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/close"
android:textSize="#dimen/font_medium" />
</LinearLayout> -->
</TableRow>
</TableLayout>
<!-- Time Stamp at the bottom of the screen -->
<TextView
android:id="#+id/timeStamp"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="bottom|center"
android:textSize="#dimen/font_medium" />
</LinearLayout>


OK after seing your layout file, I think you should do one of the following things:
Use a GridView
Use ImageView instead of ImageButtons
Using GridView can save you a lot of work. Take a look at this website and you might find what you need: http://www.androidviews.net/
If you chose to use ImageViews, you should set the following preferences:
adjustViewBounds="true"
scaleType="centerInside"
That way your images will keep their ratio.
Hope it helps!


You might also look at switching your layout to GridLayout. Cyril Mottier discussed a little bit about how it can help flatten your view hierarchy. It might also give you the simple, out-of-the-box solution you're probably looking for.
https://plus.google.com/118417777153109946393/posts/FugJcLCfkWm

Related

webview in layout with 4 textviews in top

I do not have much experience with screen layouts xml. I would like to show my screen like this: http://www.consulta-rapida.com/result.png
PS: I would add textvies label3 and Label4 (in red). they are in the figure, but are not in the xml, because I could not aligning them.
Would help to fit these two textviews in my layout below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:theme="#android:style/Theme.Dialog"
android:layout_height="fill_parent" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_above="#+id/id_web_view_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:id="#+id/id_web_view_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#ffffff"
android:orientation="vertical" >
<Button
android:id="#+id/btnCancelar"
android:background="#drawable/btn_red"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:text=" Cancelar Corrida "
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top">
<TextView
android:id="#+id/txtLabel1"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:background="#ffffff"
android:maxLines="1"
android:layout_width="wrap_content"
android:text="Label1: Sample1">
</TextView>
<TextView
android:id="#+id/txtLabel2"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#ffffff"
android:text="Label2: Sample2">
</TextView>
</RelativeLayout>
</RelativeLayout>

<?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"
android:theme="#android:style/Theme.Dialog" >
<WebView
android:id="#+id/id_web_view_browser"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/id_web_view_bar"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:id="#+id/id_web_view_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#ffffff"
android:orientation="vertical" >
<Button
android:id="#+id/btnCancelar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/btn_red"
android:text=" Cancelar Corrida "
android:textSize="20sp" />
</RelativeLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/txtLabel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ffffff"
android:maxLines="1"
android:text="Label1: Sample1" >
</TextView>
<TextView
android:id="#+id/txtLabel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="115dp"
android:layout_marginRight="5dp"
android:background="#ffffff"
android:text="Label2: Sample2" >
</TextView>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="#+id/txtLabel3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ffffff"
android:maxLines="1"
android:text="Label1: Sample1" >
</TextView>
<TextView
android:id="#+id/txtLabel4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="115dp"
android:layout_marginRight="5dp"
android:background="#ffffff"
android:text="Label2: Sample2" >
</TextView>
</TableRow>
</TableLayout>
</RelativeLayout>

put them in android:id="#+id/relativeLayout1" relative layout and use layout_below. should work pretty straight forward

Why data is displayed without spaces?

I have some trouble.In my application I use ListView, each element is list_item.xml. I get som data from server and fills listView. The problem is that the data are displayed without spaces between them. Although the designer in android studio, everything is displayed correctly with all formattng.
My code list_item.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_gravity="center"
android:weightSum="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:paddingBottom="5dp">
<TextView
android:text="123"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_employee_id"
android:textSize="40dp"
android:divider="#ffffff"
android:layout_gravity="center"
android:textAlignment="center"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.4">
<TextView
android:text="Ivan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_employee_name"
android:layout_gravity="center"
android:textSize="40dp"
android:divider="#ffffff"
android:textAlignment="center" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:layout_weight="0.2">
<TextView
android:text="Ivanoff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_employee_last_name"
android:layout_gravity="center"
android:textSize="40dp"
android:divider="#ffffff"
android:textAlignment="center" />
</LinearLayout>
</LinearLayout>
And my listViewXML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="2"
android:layout_gravity="center"
android:background="#ffaac4ee"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:background="#ff7b9fee"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:paddingBottom="5dp">
<TextView
android:text="№"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/id"
android:textSize="30dp"
android:divider="#ffffff"
android:layout_gravity="center"
android:textAlignment="center"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/linearLayout"
android:layout_weight="0.4">
<TextView
android:text="Имя"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView5"
android:layout_gravity="center"
android:textSize="30dp"
android:divider="#ffffff"
android:textAlignment="center" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:layout_weight="0.4">
<TextView
android:text="Фамилия"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView9"
android:layout_gravity="center"
android:textSize="30dp"
android:divider="#ffffff"
android:textAlignment="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffaac4ee"
>
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>

I just change ListView attributes to
android:layout_width="fill_parent"
android:layout_height="fill_parent"
and its works!

I have edited your code by gravity:
try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_gravity="center"
android:weightSum="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:paddingBottom="5dp">
<TextView
android:text="123"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_employee_id"
android:textSize="40dp"
android:divider="#ffffff"
android:layout_gravity="left"
android:textAlignment="textStart"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.4">
<TextView
android:text="Ivan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_employee_name"
android:layout_gravity="center"
android:textSize="40dp"
android:divider="#ffffff"
android:textAlignment="center" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:gravity="right"
android:layout_weight="0.2">
<TextView
android:text="Ivanoff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_employee_last_name"
android:layout_gravity="right"
android:textSize="40dp"
android:divider="#ffffff"
android:textAlignment="center" />
</LinearLayout>

Align textview and progressbar in Android XML

I've already tried to align the smallprogressbar with the textview putting them into a linear layout but it doesn't work. Tryed with android:layout_gravity="left" but it crashes.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/calibration_1"
android:textColor="#33b5e5"
android:textSize="16dp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvNumberWaves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/calibration_2"
android:textColor="#FFFFFF"
android:textSize="18dp" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvIntervalWaves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/calibration_3"
android:textColor="#FFFFFF"
android:textSize="18dp" />
<ProgressBar
android:id="#+id/progressBar2"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/bSetValues"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/calibration_5" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/calibration_6" />
</ScrollView>
</LinearLayout>
Code updated to match your answer.
I put the whole code to show what I have.

Change this line:
android:orientation="vertical"
to this:
android:orientation="horizontal"
Without seeing the rest of your source, I don't know if that will mess up other parts of your layout, so you'll probably want to wrap the TextView and ProgressBar in their own LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/calibration_1"
android:textColor="#33b5e5"
android:textSize="16dp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tvNumberWaves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/calibration_2"
android:textColor="#FFFFFF"
android:textSize="18dp" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tvIntervalWaves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/calibration_3"
android:textColor="#FFFFFF"
android:textSize="18dp" />
<ProgressBar
android:id="#+id/progressBar2"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/bSetValues"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/calibration_5" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/calibration_6" />
</ScrollView>
</LinearLayout>

Android ViewPager control doesn't appear in Graphical Layout Editor

I would like to use the ViewPager control. I have imported the v4 support package into my build path so there are no issues there.
When I insert this into my layout XML it doesn't appear in the Graphical Layout Editor:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:background="#FFFFFF">
<RelativeLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="0"
android:background="#000000" >
<ImageView
android:id="#+id/batteryImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:src="#drawable/battery" />
<ImageView
android:id="#+id/exit_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/exit_button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/batteryImageView"
android:text="76%" />
</RelativeLayout>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/score"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:padding="3dp" >
<View
android:id="#+id/dynamic_background_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/topHorizontalLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/prominentDisplayLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/scoreLabelTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Blast Factor"
android:textSize="30dp" />
<TextView
android:id="#+id/scoreTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-35dp"
android:gravity="top|center_horizontal"
android:text="100"
android:textSize="125dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/prominentVerticalLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/averageLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/averageLabel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#55000000"
android:gravity="center"
android:text="Average"
android:textSize="13dp" />
<TextView
android:id="#+id/averageScore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="100"
android:textSize="50dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/lastLinearLayout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/lastLabel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#55000000"
android:gravity="center"
android:text="Last"
android:textSize="13dp" />
<TextView
android:id="#+id/lastScore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="100"
android:textSize="50dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/demotedDisplayLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/leftPanelFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp" >
<LinearLayout
style="#style/MotionMetrics.ScorePanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#55000000" >
<ImageView
android:id="#+id/leftPanelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/swingspeed" />
<TextView
android:id="#+id/leftPanelLabelTextView"
style="#style/MotionMetrics.ScoreHeader"
android:text="Swing Speed" />
<TextView
android:id="#+id/leftPanelTextView"
style="#style/MotionMetrics.ScoreValue"
android:layout_width="match_parent"
android:text="92" />
</LinearLayout>
<ImageView
android:id="#+id/leftPanelSelectionArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/select_arrow" />
</FrameLayout>
<FrameLayout
android:id="#+id/middlePanelFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#55000000" >
<LinearLayout
style="#style/MotionMetrics.ScorePanel"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/middlePanelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ballspeed" />
<TextView
android:id="#+id/middlePanelLabelTextView"
style="#style/MotionMetrics.ScoreHeader"
android:text="Ball Speed" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|center_horizontal"
android:orientation="horizontal" >
<TextView
android:id="#+id/middlePanelTextView"
style="#style/MotionMetrics.ScoreValue"
android:text="1.3" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="35dp"
android:layout_height="match_parent"
android:background="#drawable/score_border" />
<ImageView
android:id="#+id/middlePanelSelectionArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/select_arrow" />
</FrameLayout>
<FrameLayout
android:id="#+id/rightPanelFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#55000000" >
<ImageView
android:id="#+id/rightPanelSelectionArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/select_arrow" />
<LinearLayout
style="#style/MotionMetrics.ScorePanel"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/rightPanelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/distance" />
<TextView
android:id="#+id/rightPanelLabelTextView"
style="#style/MotionMetrics.ScoreHeader"
android:text="Distance" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|center_horizontal"
android:orientation="horizontal" >
<TextView
android:id="#+id/rightPanelTextView"
style="#style/MotionMetrics.ScoreValue"
android:text="7.6" />
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/view1"
android:layout_width="35dp"
android:layout_height="match_parent"
android:background="#drawable/score_border" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+android:id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<LinearLayout
android:id="#+id/buttonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" >
<Button
android:id="#+id/blastButton"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Blast" android:layout_weight="1"/>
<Button
android:id="#+id/angleButton"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Angle" android:layout_weight="1"/>
<Button
android:id="#+id/timingButton"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Timing" android:layout_weight="1"/>
</LinearLayout>
<ImageView
android:id="#+id/tabBarImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/tabbar"/>
</LinearLayout>
I'm not sure why, and I also don't see the UI component in my Palette.

The ViewPager needs to be populated using pagerAdapter in order for it show up on the screen.

Android stretch layout heights so that layout takes up 50% of screen

I have a LinearLayout that contains sublayouts which essentially mimick a 3x2 grid. Each sublayout takes up an equal amount of space across the screen (in width). Now, I'm looking to have the two rows of sublayouts stretch in height so that each takes up 50% of the screen. I've tried playing around with the weights, however I don't know how to modify my existing layout code without messing up the existing weights in place used for the widths. Can anyone provide me with some help? Thanks! Here is my layout code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_marginBottom="2dip"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50"
android:padding="10dip"
android:layout_marginRight="1dip"
android:background="#drawable/detail_row"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/menuImage1"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textImage1"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50"
android:padding="10dip"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:background="#drawable/detail_row"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/menuImage2"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textImage2"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50"
android:padding="10dip"
android:layout_marginLeft="1dip"
android:background="#drawable/detail_row"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/menuImage3"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textImage3"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50"
android:padding="10dip"
android:layout_marginRight="1dip"
android:background="#drawable/detail_row"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/menuImage4"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textImage4"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50"
android:padding="10dip"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:background="#drawable/detail_row"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/menuImage5"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textImage5"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50"
android:padding="10dip"
android:layout_marginLeft="1dip"
android:background="#drawable/detail_row"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/menuImage6"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textImage6"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

Apply equal android:layout_weight (for example 50) values on the two "main-parent" LinearLayouts in your existing code. This will make them each take half of any existing free space.
Then put all of your your code in another new LinearLayout. This new one should be set to fill-parent in both width and height. Its orientation should be vertical.
This should get you on the way but you will probably have to tweak your existing code to make it appear exactly as you want.
I run a short test using this code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_marginBottom="2dip"
android:layout_height="fill_parent">
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_marginBottom="2dip"
android:layout_weight="50"
android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50" android:padding="10dip"
android:layout_marginRight="1dip"
android:background="#drawable/icon"
android:layout_height="wrap_content">
<ImageView android:id="#+id/menuImage1"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/textImage1"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text="" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50" android:padding="10dip"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:background="#drawable/icon"
android:layout_height="wrap_content">
<ImageView android:id="#+id/menuImage2"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/textImage2"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text="" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50" android:padding="10dip"
android:layout_marginLeft="1dip"
android:background="#drawable/icon"
android:layout_height="wrap_content">
<ImageView android:id="#+id/menuImage3"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/textImage3"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text="" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_weight="50"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50" android:padding="10dip"
android:layout_marginRight="1dip"
android:background="#drawable/icon"
android:layout_height="wrap_content">
<ImageView android:id="#+id/menuImage4"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/textImage4"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text="" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50" android:padding="10dip"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:background="#drawable/icon"
android:layout_height="wrap_content">
<ImageView android:id="#+id/menuImage5"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/textImage5"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text="" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="50" android:padding="10dip"
android:layout_marginLeft="1dip"
android:background="#drawable/icon"
android:layout_height="wrap_content">
<ImageView android:id="#+id/menuImage6"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/textImage6"
android:layout_column="1"
android:layout_gravity="center_horizontal|center_vertical"
android:text="" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

if you have two views each with layout_weight = 1 and layout_height = "fill_parent" then they should be sharing the screen space equally

Here is how I made it for me:
<?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"
android:weightSum="100">
<LinearLayout android:layout_weight="50"
android:layout_width="match_parent"
android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:orientation="vertical"></LinearLayout>
</LinearLayout>
http://www.hrupin.com/2012/02/how-to-set-view-width-height-in-percentage-of-parent-view-in-android

Categories