Android DP toughts? - android-layout

Can someone please give me directions on this:
I've got a ListView, the adapter got a LinearLayout and in this I got four more LinearLayouts.
Now I read about dp and it is relative to 160, but when I read different examples this number "160" seems to be different on different screens, so how do I work with dp?
I am used to work with % in this cases.
Now I want my four LinearLayouts to be:
55dp
35pd
35pd
35pd
Like if the dp was 160!
But as I mentioned above, this dosen't work on all screens.
Can someone tell me how I should work with this? Directions or a good tutorial or similar?
This is what I have tried, and come up with so far:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="15dip"
android:layout_marginBottom="15dip"
android:paddingTop="15dip"
android:paddingBottom="15dip" >
<LinearLayout
android:orientation="vertical"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="35dp"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="35dp"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="Woho"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>

As per the android documentation, 1 DP = 1 pixel on a 160 DPI screen. If the screen is 240 DPI, then 1.5pixel = 1 DP. the size of one DP is independent of underlying hardware resolution but a function of DPI of the screen.
To your layout question, if you assign a fixed width value to your layout, then it will not look good on larger screen sizes.
Better to use layoutweight to distribute the width between those layouts.

Related

Scrollview overlaps part of the text

I need help.
At work, I was given a task to figure out why ScrollView overlaps part of the text. The layout is multi-layered, and I think the problem lies in this. I'm new to android studio and it's still hard for me to understand the relationships of all objects.
all the XML is here https://docs.google.com/document/d/1PaGIWPn2w6ubZraVpQfq8Rrqo0uCWYOiIbxnCWaIKTQ/edit?usp=sharing
below is a part of the code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center|left|center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tvMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2dp"
android:textColor="#color/mainBlackColor"
android:textSize="24dp"
tools:text="Сообщение" />
<TextView
android:id="#+id/tvDetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red"
android:lines="3"
android:paddingStart="3dp"
android:paddingLeft="3dp"
android:paddingTop="2dp"
android:paddingEnd="3dp"
android:paddingRight="3dp"
android:paddingBottom="2dp"
android:textColor="#color/mainTextColor"
android:textSize="18dp"
android:visibility="gone"
app:autoSizeMaxTextSize="18dp"
app:autoSizeMinTextSize="10dp"
app:autoSizeStepGranularity="4dp"
app:autoSizeTextType="uniform"
tools:text="Детали"
tools:visibility="visible" />
</LinearLayout>
</ScrollView>
Add android:scrollbarStyle="outsideOverlay" and padding_horizontal to your scrollView. This should solve your issue.

Android How to position Items in a Toolbar

I understand the one of the advantages of the toolbar over the action bar is the ability to position and add items. However I cannot figure out how to position these items on the toolbar where I would like to. I have 6 items and i want three of the items aligned to the left a space in the middle and the other three aligned to the right.
Use a Space widget for this.
Add a LinearLayout inside your Toolbar. I am adding 6 TextViews inside this LinearLayout. You can, of course, change it according to your requirement.
Now to align 3 of the child views to the left and 3 to the right simply add a android.support.v4.widget.Space widget after the third child view and set it's layout_weight property to 1.
Here's the entire toolbar layout
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item1"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item2"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item3"
android:padding="2dp"/>
<android.support.v4.widget.Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item4"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item5"
android:padding="2dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="item6"
android:padding="2dp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this works as required for you.

How can I set my imageviews to fill linearlayout with equal spacing?

I have four image icons that I need to display with Imagebutton or Imageview. The problem is when I use the following code, they all are aligned left leaving an empty space to the right.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/sale"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/shirt"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/women"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/technology"
android:layout_weight="1"/>
</LinearLayout>
How can I get them equally distributed on the linearlayout so that they fill the whole width?
I just managed to fix the issue. It seems I was needed to use android:layout_width"fill_parent" instead of android:layout_width="wrap_content". I tried this after #grwww suggested android:layout_gravity="fill" which was not the needed attribute. Then I got to learn about fill_parent

Android layout weight not working as I thought

following What does android:layout_weight mean?
I have this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonToastSimple"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="English Toast" />
<Button
android:id="#+id/buttonToastFancy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="French Toast" />
</LinearLayout>
The link tells me buttonToastFancy will take up three quarters of the size (3/(3+1), but it's the other way round. The buttonToastSimple takes up three quarters of the screen size according to Eclipse/my AVD.
What am I doing wrong?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:weightSum="4"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonToastSimple"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="English Toast" />
<Button
android:id="#+id/buttonToastFancy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="French Toast" />
</LinearLayout>
try setting the wanted attribute to 0dp ..
ex. if you are setting the weight for the widths support, use android:layout_width="0dp" along with the android:layout_weight="3". Also, don't forget the android:weightSum="4" in the parent.
the amount of space your view is going to occupy is computed as
dimension/layout_weight hence the view with the lower layout_weight occupies more space in your layout. in the future, you may also need to user layout_weightSum.
They are further explained here.

Relative Layout Android

I have 6 textviews,3 editboxes and two spinners in a Relativelayout.I am trying to add further editboxes in the app. But the app is not showing the additional boxes.
My code is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:id="#+id/EditText01"
android:text="#string/type1"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button01"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"></EditText>
<TextView
android:id="#+id/EditText02"
android:text="#string/type2"
android:layout_alignParentLeft="true"
android:layout_below="#id/EditText01"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button01"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button02"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Button01"
android:layout_height="wrap_content"></EditText>
<TextView
android:id="#+id/EditText03"
android:text="#string/type3"
android:layout_alignParentLeft="true"
android:layout_below="#id/EditText02"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button01"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button03"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Button02"
android:layout_height="wrap_content"></EditText>
<TextView
android:id="#+id/EditText04"
android:text="#string/property"
android:layout_below="#id/EditText03"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_height="wrap_content"></TextView>
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/Button03"
android:prompt="#string/property"></Spinner>
<TextView
android:id="#+id/EditText05"
android:text="#string/propage"
android:layout_below="#id/spinner"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_height="wrap_content"></TextView>
<Spinner
android:id="#+id/widget"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/EditText05"
android:prompt="#string/propage"></Spinner>
<TextView
android:id="#+id/EditText06"
android:text="#string/income"
android:layout_alignParentLeft="true"
android:layout_below="#+id/widget"
android:layout_width="fill_parent"
android:textSize="18sp"
android:layout_toLeftOf="#+id/Button04"
android:layout_height="wrap_content"></TextView>
<EditText
android:id="#+id/Button04"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"></EditText>
</RelativeLayout>
</ScrollView>
The last editbox or any element further added is not showing in the app.
Please help.
Can you please update the correct and complete xml file content?
Also, from the GUI designer's point of view, I think these many controls are atrocious on a limited display. Though you have used a ScrollView, I would suggest to rethink over your GUI design.
I think they are actually showing but they may be overlapping previous edit boxes. As a test, I replaced all the #strings with sequential numbers as strings and added an extra edit box to the end of your code and it does appear in the layout but overlaps the last one. Try doing the same thing as a test and you will see what I mean. Hope it goes well for you.
Cheers,
Things that strike me as odd about the last EditText:
It's ID'd as a button. Consider using Button if it's a button.
It has no content, unless it's set programmatically. So wrap_content
on the width will give it a width of 0 (so it's invisible).
It's in a RelativeLayout, but you haven't said which other element it should
be placed relative to. I think the default is that it'll overlap
elements, and just go at the top. But because it has a width of 0,
you won't even be able to see it there.
Hope this helps. Death to RelativeLayout. (Not really, it's useful, but I hate it).

Resources