Develop Reference

How to set width of a View equal to any displaysize?

I am using a HorizontalScrollView to slide TextViews over the screen . My question now is, if there is any way to make the width of each RelativeLayout match the width of the phone screen, independent of the phone the user uses.
So is there a way to like get the display width of the device and then set it as the width of my RelativeLayout? Or is there even a better way to do it?
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_dark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="15sp"
android:textColor="#android:color/black"
android:id="#+id/info"
android:layout_margin="5dp"
android:textAlignment="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/info"
android:text="0"
android:textSize="80dp"
android:layout_centerHorizontal="true"
android:id="#+id/getrunkeneLiter"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#android:color/black"
android:layout_margin="5dp"
android:id="#+id/danke"
android:textAlignment="center"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Feedback verfassen"
android:onClick="feedback"
android:layout_below="#+id/danke"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</LinearLayout>
</HorizontalScrollView>

You can get the screen size and set it to each of your views programmatically. Alternatively, you can use a weighted LinearLayout and set its size to number of elements times screen size.
You can use this function to get the screen size (and then use the x value of the Point):
public static Point getScreenSize(Context context) {
final Point size = new Point();
final WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
final Display display = wm.getDefaultDisplay();
display.getSize(size);
return size;
}
To update the relative layouts you need to add an id to each of them. For example:
<RelativeLayout
android:id="#+id/first_subview"
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_dark">
And then in your activity:
private void updateViews() {
Point screenSize = getScreenSize(this);
updateView(findViewById(R.id.first_subview), screenSize);
updateView(findViewById(R.id.second_subview), screenSize);
...
}
private void updateView(View view, Point screenSize) {
view.getLayoutParams().width = screenSize.x
}

Layout shown differently across devices

i would like to know why my fragment layout has different dimensions when I run the app on different devices. I thought using dp was enough, but now I think i've missed something.
For istance, on my Nexus 6P it looks fine, but in the AVD Emulator's Nexus 4 it looks smaller
Layout code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/deleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:background="#color/colorPrimaryLight"
android:text="#string/delete_button" />
<Button
android:id="#+id/moveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:layout_toRightOf="#id/deleteButton"
android:background="#color/colorPrimaryLight"
android:text="#string/move_button" />
<Button
android:id="#+id/copyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/deleteButton"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:background="#color/colorPrimaryLight"
android:text="#string/copy_button" />
<Button
android:id="#+id/renameButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/moveButton"
android:layout_gravity="center"
android:layout_margin="15dp"
android:layout_toRightOf="#id/copyButton"
android:background="#color/colorPrimaryLight"
android:text="#string/rename_button" />
</RelativeLayout>
EDIT: I forgot to write the code where I set the dialogFragment size.
/**
* Setting Dialog size
*/
Window window = getDialog().getWindow();
Point size = new Point();
// Store dimensions of the screen in `size`
Display display = window.getWindowManager().getDefaultDisplay();
display.getSize(size);
window.setLayout((int) (size.y * 0.40), (int) (size.x * 0.60));
window.setGravity(Gravity.CENTER);

Most of your elements width and height seems to wrap_content, so i would check the Font configured in your emulator by default, if its size is smaller, the whole content will be small.

Large text coming wrapped in a Textview

This is what is expected to come-----
The first text view:
Fox Pro
Drag
Main View Item
This is what is coming-----
And the other text view:
Fox Pro
Drag
Main View Item
So if the text is long enough to certain limit, it is coming wrapped in a next line.
Please note that the problem is only coming in the higher ppi 7inch device(~213 ppi).
The same thing is coming fine in lower ppi 7inch device(~160 ppi).
I tried to do the following programatically,
setting the width to full match_parent-------
DisplayMetrics dm = new DisplayMetrics();
// Display device dpi value of Y in pixels
int screenDPIy = (int)dm.ydpi;
if(screenDPIy > 180)
{
entrytype.setTextSize(14);
entrydate.setTextSize(12);
entrytype.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
entrydate.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
}
else
{
entrytype.setTextSize(16);
entrydate.setTextSize(14);
}
No Success.
My Layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/mapentrieslist"
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#drawable/selector"
android:gravity="left|center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_weight="0.9"
android:orientation="horizontal"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.47"
android:orientation="vertical" >
<TextView
android:id="#+id/entrytype"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fox Pro"
android:textColor="#000000"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/vehicle_source"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:visibility="gone"/>
<TextView
android:id="#+id/entrydate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#989898"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

You have a number of options:
Add a marquee that automatically scrolls : textView marquee
Place the TextView inside of a Horizontal ScrollView instead of a LinearLayout
Set the TextView to put an ellipses at the end : Detect whether TextView in ListView is ellipsized
The first two preserve the text while the third removes the extra characters.

android how to position elements to support in all devices

I have a problem with positioning elements.
What I want to have is this image in all devices no matter screen size is.
what I have is this in two different sizes
I want my textViews and editTexts maintain their positions in the activity view. (The image 'Green-Blue-Red-Yellow square containing image' in an imageView)
and this is my layout.xml
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_height="30dp"
android:layout_width="150dp"
android:layout_marginTop="60dp"
android:layout_marginLeft="100dp"
android:textSize="19dp"
android:textStyle="bold"
android:gravity="center"
android:text="#string/login_app_name">
</TextView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_marginTop="128dp"
android:gravity="center_vertical">
<TextView
android:layout_height="20dp"
android:layout_width="100dp"
android:layout_marginLeft="35dp"
android:textStyle="bold"
android:gravity="right|center_vertical"
android:text="#string/login_username">
</TextView>
<EditText
android:layout_height="20dp"
android:layout_width="140dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#drawable/login_edit_text">
</EditText>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_marginTop="2dp">
<TextView
android:layout_height="20dp"
android:layout_width="100dp"
android:layout_marginLeft="35dp"
android:textStyle="bold"
android:gravity="right|center_vertical"
android:text="#string/login_password">
</TextView>
<EditText
android:layout_height="20dp"
android:layout_width="140dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#drawable/login_edit_text">
</EditText>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I suspect the problem is related to tha paddings and margins that I used to position elements. But I couldn't find any other way around.
Is there a way that you can suggest for my elements to maintain their positions in all screen sizes?

Make separate xml files for the different devices and position the images separately for the two xml's, so as to suit the different standard resolutions. link two separate classes for the two XML files, and now based on the screen resolution call either of the two classes. You can get screen res with this code:
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
final int height = dm.heightPixels;
final int width = dm.widthPixels;
Use an if-else condition and choose the class to intent to

ScrollView in android

I' have a view that contains several textViews an ImageView and a Button . Because on small screen devices (or in landscape mode on big ones ) not all are visible I use a Scroll as the parent of the whole hierarchy to allow the user to view all the information. The things are suck that the button must be at the buttom of the view . However on big screen device , where it remains enough space at the buttom , the button is put immediatelly below the last textview,and seems to occupy all the remaining space (resulting in an unnactractive view) . Trying to use android:allignParentButtom ="true" not only that it has no effect but it puts the button at top of the screen . Has anyone any ideea how could I accomplish what I described ?
here's the xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<RelativeLayout
android:id="#+id/gps_info_page1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/itsDateTimeValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/eStrUnknown">
</TextView>
<RelativeLayout
android:id="#+id/directions"
android:layout_centerHorizontal="true"
android:layout_below="#+id/itsDateTimeValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/itsDirectionValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_marginRight="2dip"
android:textSize="20sp">
</TextView>
<TextView
android:id="#+id/itsOrientation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginLeft="2dip"
android:text="#string/eStrUnknown"
android:layout_toRightOf="#+id/itsDirectionValue">
</TextView>
</RelativeLayout>
<ImageView
android:id="#+id/itsImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/compass"
android:layout_below="#+id/directions"
android:layout_centerHorizontal="true">
</ImageView>
<RelativeLayout>
..."TextViews below the above image"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout
..."TextViews below the above"
</RelativeLayout>
<LinearLayout
android:id="#+id/div"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_below="#+id/sunset_layout"
android:background="#F333">
</LinearLayout>
<Button //adding here android:alignParentBottom="true" has described above behavior
android:layout_marginBottom="3dip"
android:layout_marginTop="20dip"
android:id="#+id/done_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/eStrDone"
android:textSize="18sp"
android:layout_below="#+id/div"
android:layout_centerHorizontal="true">
</Button>
</RelativeLayout>
</ScrollView>

What you can do is change sizes depending on the screen programatically.
With this line you get the density of the screen:
scale = getResources().getDisplayMetrics().density;
and this this you get the size:
windowManager = getWindowManager();
display = windowManager.getDefaultDisplay();
screenWidth = display.getWidth();
screenHeight = display.getHeight();
and with this you can get is its on portarit or landscape:
Configuration conf = context.getResources().getConfiguration();
With all this info, you can modify the screen as you like.
Sometimes is necesary to do some calculations because not only density is different but size is different (like nexus one and droid)
Hope this helps.
Daniel

You could put your scrollview inside a linearlayout and set weight of the scrollview as 1