Align textview and progressbar in Android XML

Align textview and progressbar in Android XML - java

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>

Related

Android layout button next to 3 textviews

I currently have a layout which holds 3 textviews.
My question is how to create a button next to those textviews.
Currently my code:
<?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:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:textColor="#color/colorAccent" />
<TextView
android:id="#+id/release_at"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#5d5d5d"
android:textStyle="bold" />
</LinearLayout>
This creates me 3 Textviews, my idea is to put a button right to the textviews, but I do not know how to do that properly.

Like this:
<LinearLayout
heigth=match_parent
width=match_parent
orientation=horizontal
<LinearLayout
heigth=match_parent
width=0dp
layout_weigth=1
orientation=vertical
//Your textviews
</LinearLayout>
<LinearLayout
heigth=match_parent
width=0dp
layout_weigth=1
orientation=vertical
gravity="right"
//Your button
</LinearLayout>
</LinearLayout>
Putting gravity right aligns the button to the right.

The simple solution is this, but the better one is using RelativeLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:textColor="#color/colorAccent" />
<TextView
android:id="#+id/release_at"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#5d5d5d"
android:textStyle="bold" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Use horizontal LinearLayouts Inside your main vertical LinearLayout as follows:
<?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:padding="#dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:text="Name ......"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:id="#+id/nameButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Name" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:text="Description"
android:textColor="#color/colorAccent" />
<Button
android:id="#+id/descriptionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Description" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/release_at"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Release at"
android:textColor="#5d5d5d"
android:textStyle="bold" />
<Button
android:id="#+id/releaseButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Release" />
</LinearLayout>

Do you mean after every textview one button ? If you need one button after every textview use this .
<?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:padding="#dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:textColor="#color/colorAccent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/release_at"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#5d5d5d"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

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>

Java Android - situate the ListView under all other

i has a layout:
<?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="wrap_content"
android:paddingBottom="4dp"
android:paddingTop="4dp" >
<LinearLayout
android:id="#+id/lineradapter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:layout_marginTop="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp">
<FrameLayout
android:id="#+id/frameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="6dp">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:fontFamily="normal"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:textColor="#525252"
android:textSize="16sp"
android:textStyle="normal" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:fontFamily="normal"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:text="00:00"
android:textColor="#999999"
android:textSize="14sp"
android:textStyle="italic" />
</FrameLayout>
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingBottom="6dip"
android:textColor="#acacac"
android:textSize="16dp" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#e7e7e7"
android:paddingTop="6dp"
android:paddingBottom="4dp" />
</LinearLayout>
</RelativeLayout>
in this layout i want to position the ListView. At the end, so that you can first see what the top, and then scroll down to see ListView. How to do it? I probyval added before /RelativeLayout>
<LinearLayout
android:id="#+id/comentadapter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp">
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:layout_gravity="top|center"/>
<ListView
android:id="#+id/commentList"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
But it is still located at the top.

Use this.
<?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="match_parent"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingTop="4dp" >
<LinearLayout
android:id="#+id/lineradapter"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:layout_weight=".3"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<FrameLayout
android:id="#+id/frameLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="6dp" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:fontFamily="normal"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:textColor="#525252"
android:textSize="16sp"
android:textStyle="normal" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:fontFamily="normal"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:text="00:00"
android:textColor="#999999"
android:textSize="14sp"
android:textStyle="italic" />
</FrameLayout>
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingBottom="6dip"
android:textColor="#acacac"
android:textSize="16dp" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#e7e7e7"
android:paddingBottom="4dp"
android:paddingTop="6dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/comentadapter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".7"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
android:paddingTop="4dp" />
<ListView
android:id="#+id/commentList"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
</LinearLayout>

Best way to show the listview scrollable with the whole layout you will have to create two layout
for top.xml
<?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="wrap_content"
android:paddingBottom="4dp"
android:paddingTop="4dp" >
<LinearLayout
android:id="#+id/lineradapter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:textColor="#525252"
android:textSize="16sp"
android:textStyle="normal" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:text="00:00"
android:textColor="#999999"
android:textSize="14sp"
android:textStyle="italic" />
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingBottom="6dip"
android:textColor="#acacac"
android:textSize="16dp" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#e7e7e7"
android:paddingBottom="4dp"
android:paddingTop="6dp" />
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
android:paddingTop="4dp" />
</RelativeLayout>
and create another layout for listview list.xml
<?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="wrap_content"
android:paddingBottom="4dp"
android:paddingTop="4dp" >
<ListView
android:id="#+id/commentList"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
and setcontentview as list.xml and inflate top.xml and add to listview as Header like
ListView list =(ListView)findViewById(R.id.commentList);
LayoutInflater inflater = (LayoutInflater)getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View headerView =inflater.inflate(R.layout.top.xml, null);
list.addHeaderView(headerView);

Layout for different size screens (Android)

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

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.

We Keep Coding

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

Align textview and progressbar in Android XML - java

Related

Android layout button next to 3 textviews

Why data is displayed without spaces?

Java Android - situate the ListView under all other

Layout for different size screens (Android)

Android ViewPager control doesn't appear in Graphical Layout Editor

Categories

Resources