Solving design issues in XML? - android

When im designing my android app im using XML and for this app im using the Relative layout but when i put the buttons on my screen with the png background i made its just looking bad.. the buttons are not put equaly like they should..
Look at this picture:
How would i solve so the pluss buttons and percent and comma and equal button will be placed right instead of looking all that weird?
If you are intrested to see my XML code here is an link for pastebin:
http://pastebin.com/gpxnPT4P

I think you have to check the android:layout_... of every item that is showing wrong. For example, the declaration for the number 5 button is:
<Button android:background="#drawable/number5" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:id="#+id/number5" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_below="#+id/number8" android:layout_alignLeft="#+id/divided"></Button>
If you look closely the android:layout_alignLeft declaration is pointing to de divide button (#+id/divided) that is far away. There is a similar situation with the button for number 6.
Try this declaration for number 5 button:
<Button android:background="#drawable/number5" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:id="#+id/number5" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_below="#+id/number8" android:layout_alignLeft="#+id/number4"></Button>
Hope this helps

Related

Button styles in Android

When I place a button in a layout, it has a standard gray background. However I want to make it more like the kind of button you see in the Dialogs where it's a background-less button (e.g. the white buttons with text).
Like this
Not like this... not like this...
Old question but I just stumbled on it and have the answer (or at least I think), I really don't know if that's the best approach, but it should do the job.
<Button
android:id="#+id/sign_in_button"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
The trick here is the #style/Widget.AppCompat.Button.Borderless.Colored. Also see this answer, it explains a lot https://stackoverflow.com/a/36666660/1920068
try this
android:background="#android:color/transparent"
Just use a TextView instead, and put a click effect with the background:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#23ac29"
android:text="Signup"
android:textSize="18sp"
android:padding="8dp"
android:background="?android:attr/selectableItemBackground"/>

Android RelativeLayout: layout_above appears to behave incorrectly with layout_alignBaseline

In Android I am trying to do a RelativeLayout in which I want to use layout_above on something that is aligned with layout_alignBaseline, but find that this is not working correctly.
Note: I tested with API levels 14, 15, and am going to check in 19 (latest) as soon as I get that installed, with the same result. By the way, I'm referring to appearance in Eclipse layout editing GUI - I haven't tested on a real device, but I assume it's supposed to be consistent...
My real layout is complicated but I have reduced it to this simple example:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="A"/>
<TextView
android:id="#+id/b"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/a"
android:text="B"/>
<TextView
android:id="#+id/c"
android:layout_alignParentLeft="true"
android:layout_above="#id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"/>
</RelativeLayout>
With this layout, I would expect to see the letter A at bottom right (yes), the letter B at bottom left (yes), and the letter C immediately above the letter B. In fact, the letter C does not appear - it seems to have been positioned off the top of the view.
If you replace the layout_alignBaseline on B with layout_alignTop or alignBottom, because in this example A has the same font size, this does not change the appearance of A and B at all - but now C appears in the correct place.
My basic question is, why does this not work when using the baseline alignment? Is this a bug or am I doing something wrong?
Notes:
Obviously in this simplified example there is no reason to use layout_alignBaseline, but it is necessary in cases where the font sizes are not the same.
This is not an urgent problem because I have come up with a less neat way to achieve a similar layout. But I'd like to know for future reference why it doesn't work.
I did look at the related questions but didn't spot the answer.

Selecting best Android layout

I am new to Android, and wish to do a layout as below:
A Logo on top.
Following with a Rectangle with Rounded corners
Within that Rectangle, I will have two EditText box for User ID and Password, plus one Login button
Below the Rectangle with Rounded corners (outside) I have a Html Link to Terms & Conditions
I have tried various ways of layout out
Using only layout. Different kinds of layouts. All seems to be very difficult to achieve what I need
Using Layout + Background. The background is not really a background, but is more like a template, it will affect your layout, and is very difficult to control where you wants your control located.
Using onDraw. Flexible but worried that it might have problem with different screen sizes.
So, someone please enlight which is the best way to achieve what I need?
No one can really tell you what is best, it depends on exactly what you want but I would suggest using a RelatvieLayout as they are typically the easiest and most efficient to use once you work with them a little, in my opinion. You can read Here to see how to do the rectangle. You basically will use shape drawable and adjust the radius of the corners.
As far as the logo on top, if it will be reused in other Activitys then you can put it in its own layout and use the include tag in your layouts to reuse the logo layout
If you are worried about different screen sizes then read the Docs and find what works for you.
Just start on it and adjust as you go. Don't be afraid to screw up and redo some of it. Hopefully this is enough information to get you started
Using a RelativeLayout will give you more flexibility and allow you to use less Layouts such as nested LinearLayouts and Layouts with only one child which can improve performance
this is how it should be done:
start with linear layout with vertical orientation :
<linearLayourt xmlns=............
android:orientation="vertical"
.....other stuffs goes here
......
.....
<LinearLayout ......this is the child linearlayout
.....other stuffs goes here like width and height
<ImageView ...this is where you are gonna put your logo in
/>
</LinearLayout> ....close your child linear layout
<RelativeLayout ...
.........other stuffs here
<EditText ....1st edit text
...you position your boxes here
/>
<EditText ....2nd edit text
...you position your boxes here
/>
</RelativeLayout>
<TextView
....
...
...put yout hyperlink for this text
/>
</LinearLayout> ...this is the parent linear layout
For your case of creating a Log in screen it's not really matter as it is a relatively easy screen to design. I personally like to use XML to design my layouts and never seen it done using the onDraw method.
My suggestion to you as #codeMagic said is to learn how to use and manipulated RelativeLayouts,as those will prevent you from creating cascaded layouts that are really not recommended and take long time to load.
When I started to program for Android I found LinearLayout to be the easiest to understand and use but using it would bring me to many LinearLayouts inside of a LinearLayouts on complex screen designz, later with the use of RelativeLayout I realized that in most cases one RelativeLayout can replace many cascaded Linear ones.
in your case you could do some thing like that:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/drop_down_icon" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/imageView1" >
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/editText1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText2"
android:layout_centerHorizontal="true"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_centerHorizontal="true"
android:text="TextView" />
</RelativeLayout>
All what left is to add the desired padings and margins.

Android TextView doesn't do linebreak in ListView (multiline text)

I have created a 3-level ExpandableListView and have the problem that the TextViews which are used for the 2nd and 3rd level do not support line-breaks if the content is too long. It should be dynamically over more than one line, if needed. The 1st level TextView does it well (automatically) and I actually had the same settings in the xml for all three TextViews. Followed are the layout xmls, the one TextView with the id groupname is for the 2nd level (e.g. the first red X in the picture below) and the one with id childname is for the 3rd level (e.g. the second and third red X in the picture below). It should all be like at the green hook in the picture.
"singleLine=false" seems not to work. Also tried some different options found in other SO posts, but what I've testet haven't worked for me. Like ellipsize, scroll horizontale, different layout_width and so on. The only thing worked is to set a fixed layout_width on x hundred dp, but this is not dynamically, I'm right?
Would be great if anybody could help me with this. Lot of thanks!
Here's a screenshot:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/childname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:layout_marginLeft="60dp"
android:textColor="#AAAAAA"
android:singleLine="false"
android:text=""
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/groupname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="45dp"
android:layout_marginRight="60dp"
android:textColor="#555555"
android:singleLine="false"
android:gravity="center_vertical"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
Add this line in your xml
android:inputType="textMultiLine"
or
Add text using coding like this, where you can add line break using '\n'(But here you have to manually add breaks where you want them)
TextView txt1 = (TextView) findViewById(R.id.childname);
txt1.setText("Hi \nHello \nHow are You");
Results will be
Hi
Hello
How are You
Edit
Accepted Answer - removing the line 'android:layout_alignParentLeft="true"
try using LinearLayout instead of RelativeLayout as parent for the TextView
I had add this attribute to my TextView inside ListView, and makes it do line break correct.
android:maxWidth="xxxdp"
F.Y.R.

TextView in all projects moved to the right

This is easily the weirdest problem I've ever faced.
So today, I created a new Android Project. The first layout xml had just a textview that has the following properties (its inside a relative layout):
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="124dp"
android:background="#80ffffff"
android:gravity="center_vertical"
android:text="Welcome"
android:textSize="48dp"
android:textStyle="bold" />
What I wanted was to have a textview that has text in its center. But the text STARTS from the center and goes out of screen towers the right side.
So I thought I must be doing something wrong. I went into one of my older projects (it was also open in eclipse). I opened an XML there, and shockingly, all the text there has also moved to the left (It starts from the center, rather than actually centering the text). It was fine yesterday. Here's the button:
<Button
android:id="#+id/gettingstarted"
android:layout_width="210dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/login"
android:layout_below="#+id/login"
android:layout_marginTop="10dp"
android:text="Getting Started"
android:textColor="#ffffff" />
I have no idea what happened. Why is the text no longer centered in buttons in all my projects? I'm in a really tough spot right now. Kindly help.
For your first problem try
android:gravity="center_vertical|center"
but for your text views in your all projects , it's a general question , maybe it's occured because of changing in your apps theme or projects styles

Categories

Resources