I'm trying this now days and it still doesn't work. I read lots of tutorials about the Relative layout but I still can't do it. Please give me an idea, what I can do. I want a simple layout like in the picture.![enter image description here][1]
edit: Looks like I can't upload images ... :(
Its a layout for a simple quiz App with these widgets below each other. A ProgressBar, a TextView for a question, 4 Buttons for the answers. The TextView should take all the place the other widgets don't need. The Button should be always at the end.
I tried with alignParentTop, Bottom, nested LinearLayouts and it still doesn't work. What can I do? It would be REALLY REALLY great to have an idea? Thanks a lot!
Good idea: I uploaded the image: http://imgur.com/Z0YmLw2
Here is the actual code. (I edited it about 20x times)
<?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">
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/countdownTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:text="00:00:00" />
<ImageView
android:id="#+id/questionImageView"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="#id/countdownTextView"
android:layout_margin="5dp"
android:background="#drawable/ic_launcher"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:layout_margin="5dp"
android:layout_toRightOf="#id/questionImageView"
android:text="jfh rhguijfhg fhge hugutbh r rut hruteruzt dkjfh uzdt ggu zguzg zuh ftz huuh rh grhtughrtu thiohjriwetk lkj rgjrjkrjek"
android:textSize="22dp" />
<Button
android:id="#+id/answert1Button"
style="#style/answerButton"
android:text="answer 1" />
<Button
android:id="#+id/answer2Button"
style="#style/answerButton"
android:text="answer 2" />
<Button
android:id="#+id/answer3Button"
style="#style/answerButton"
android:text="answer 3" />
<Button
android:id="#+id/answer4Button"
style="#style/answerButton"
android:text="answer 4 Butto d uzrr rd drtd gzugt ffzft drtn" />
</RelativeLayout>
With RelativeLayout it's the easiest way to position your widgets to the screen. However, it may take some time until you master it. Since if you're designing your layout with Graphic Tool, it will be harder.
Try editing it in XML Text. Make sure to read this Android Dev Tutorial on all the options you can access with using RelativeLayout.
I am sure you did check it, but I'm also quite sure that you were only searching for the obvious solutions. Sometimes, some not so obvious options will lead you to your goal - so be patient and try to do it from scratch with help of the tutorial.
Otherwise you could also use FrameLayout which divides your screen into several frames. BUT, again, it might complicate things for you in your App.
First, to make it easier, remove countdownTextView and questionImageView, and let's try.
I think you need to place layout_alignParentTop attribute with the ProgressBar:
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
And put all Buttons in a vertical LinearLayout with layout_alignParentBottom:
<LinearLayout
android:id="#+id/answerButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<Button
android:id="#+id/answerButton1"
style="#style/answerButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="answer1" />
(...)
</LinearLayout>
And at last, the TextView has to have both layout_below and layout_above attributes with setting layout_height="match_parent":
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="R.id.answerProgressBar"
android:layout_above="R.id.answerButtons"
android:text="blah blah blah" />
Related
First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me
You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/
I'm sure this has been answered before but I've searched relentlessly and can't find an answer that fixes my exact problem, which is:
I have a TextView on top of an ImageView setup like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageForCustomAdapter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_ball_3" />
<TextView
android:id="#+id/textOnBall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:textColor="#000000"
android:textSize="50dp"
android:hint="10"
android:layout_alignParentBottom="false"
android:layout_centerInParent="true"
android:layout_alignTop="#+id/imageForCustomAdapter"
android:layout_alignLeft="#+id/imageForCustomAdapter"
android:layout_alignBottom="#+id/imageForCustomAdapter"
android:layout_alignRight="#+id/imageForCustomAdapter"
android:gravity="center" />
</RelativeLayout>
The TextView is aligned with the ImageView to make it the same size and I want the text to be centered both horizontally and vertically.
The render in Android Studio shows it to be centered correctly This Pic Shows That
But when I actually run the app on a real device the text only centers horizontally. I've tried all the different combinations of android:gravity= but nothing seams to work.
What am I doing wrong?
I'll preface this with saying I really dislike RelativeLayout, and here's a great example. Its powerful, but can be seriously confusing, and simplicity is important.
You've got many layout directives that can easily conflict with each other. Try something like:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageForCustomAdapter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_ball_3" />
<TextView
android:id="#+id/textOnBall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="50dp"
android:hint="10"
android:layout_gravity="center" />
</FrameLayout>
The 'wrap_content' is important on the FrameLayout, btw. Assuming the ImageView is always bigger than the TextView, it'll drive the parent height. If the TextView might be bigger, make sure to center the ImageView as well.
Why it works in studio and not in real life, no idea.
I've tried a couple of things and read many topics, but I didn't find any solution for my problem.
At the moment I have an xml file with the layout on the picture. This is how it should look like the design and I did it with LinearLayouts and works perfect.
The problem is that I want when I click somewhere on the screen to add a highlighted column from top to bottom.
I read that this should be done with RelativeLayout, but I tried to do it that way, but I can't arrange my other elements to be with equal size.
Do you know how this could be done ?
This is part of my xml:
<LinearLayout
android:id="#+id/chart1Layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:background="#color/color"
android:gravity="bottom|center"
android:maxLines="4"
android:padding="3dp"
android:text="#string/cap"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/orange"
android:textSize="30sp"
android:textStyle="bold" />
<com.some.chart
android:id="#+id/result_widget_chartView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="8"
palette="grayscale"
android:background="#color/dark_header"
android:padding="0dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp" />
</LinearLayout>
Design : http://i.stack.imgur.com/fkHvG.png
Thanks a lot.
see my pic:
if this what you want?
Thanks for your answers. It's not exactly what I tried to achieve, but you gave some direction and I did it as I want.
The solutions was to add Relative Layout as root and keep everything as-is, to keep the design.
http://i.stack.imgur.com/j18Dw.png
I was doing wrong when I tried to replace my Linear layout container with Relative layout - I just needed to add all my things in new Relative container (not to replace).
Thanks.
Ok, so I'm pretty noobish to android but starting to get the hang of it. Before I move on I would like to ask for some general feedback for creating android GUI using API views, lists and layouts. For the sake of exercise I will use GUI as an example:
http://imgur.com/71NmI
Let's say I want the buttons (and perhaps the "Something") to be able to interact with whatever is in the RelativeLayout. In general, what is best practice for creating such a GUI and what API elements would you use to achieve it?
[Removed unnecessary questions]
Any comments, both general and specific, as well as examples are highly appreciated!
Edit: I have looked through your guide, #Mark Lapasa, thanks for an introduction of the basics. My suggested xml-file is then like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/header"
android:layout_width="match_parent"
android:background="#drawable/header" android:layout_height="30dp">
</ImageView>
<RelativeLayout android:id="#+id/leftLayout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true" android:layout_below="#id/header">
<Button android:text="Left btn1"
android:id="#+id/leftBtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"/>
<Button
android:text="Left btn2"
android:id="#+id/leftBtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/leftBtn1"/>
<Button
android:text="Left btn3"
android:id="#+id/leftBtn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/leftBtn2"/>
</RelativeLayout>
<RelativeLayout android:id="#+id/rightLayout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_alignParentRight="true" android:layout_below="#id/header">
<Button android:text="Right btn1"
android:id="#+id/rightBtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" android:layout_marginTop="5dp"/>
<Button
android:text="Right btn2"
android:id="#+id/rightBtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rightBtn1"/>
<Button
android:text="Right btn3"
android:id="#+id/rightBtn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rightBtn2"/>
</RelativeLayout>
<ImageView android:id="#+id/footer"
android:layout_width="match_parent"
android:background="#drawable/footer" android:layout_height="20dp" android:layout_alignParentBottom="true">
</ImageView>
<RelativeLayout android:id="#+id/gameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:layout_toLeftOf="#id/rightLayout"
android:layout_toRightOf="#id/leftLayout">
</RelativeLayout>
</RelativeLayout>
This works fine. However, this isn't best practice. I now have a total of four RelativeLayouts to work with. Is there some smooth solution to achieve this without using unnecessary system resources and power like this? Also, how is the best way to set the widths and heights so that they are device independent?
Looks like you are new to Relative Layouts. You might want to try my visual tutorial on it cause I had a hard enough time with the docs:
A Visual Guide to Relative Layouts In Android
http://knowledge.lapasa.net/?p=334
I have used some time on this and think the best way to achieve such results is to use fragments.
I have an EditText and a Button in my LinearLayout and I want to align them closely together so they see seem to belong together (edittext + micButton for speech input).
Now they don't have the same height and they aren't really aligned well (Button seems to be a little lower than the EditText). I know I can apply a negative margin like -5dp to make them come closer together, but is there perhaps a better way to do this?
Set them in a specific container/layout so that they will automatically have the same height and no margin between them?
Using relative layout you can stretch a view depending upon another views size without knowing the exact size of the other view.
Here is the code :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:text="button"
android:id="#+id/but"/>
<EditText
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/but"
android:layout_alignBottom="#id/but"
android:layout_alignTop="#id/but"
/>
</RelativeLayout>
Check this link for reducing space between views :
https://groups.google.com/forum/?fromgroups#!topic/android-developers/RNfAxbqbTIk
Hmm, don't know why people bother so much with tables. Since the both Views are within a LinearLayout (presumable orientation=Horizontal), this command should center both within the layout:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
Note: Since EditTexts and Buttons may orient their text slightly differently, you may have to do some tweaking (by changing margins or padding) to get the text to align properly.
I hope this solution might help for your scenario...Here is the code..
<RelativeLayout
android:id="#+id/rlLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal"
android:padding="3dp" >
<EditText
android:id="#+id/etId"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#c8c8c8"
android:hint="Edittext"
android:paddingLeft="20dip"
android:paddingRight="10dip"
android:textColor="#000000" />
<RelativeLayout
android:id="#+id/rlLayoutid"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignRight="#+id/etId" >
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginRight="14dp"
android:layout_marginTop="10dp"
android:background="#drawable/calender" />
</RelativeLayout>
</RelativeLayout>
# Daniel Here You can use layout weight and weight sum
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:weight_sum=2
>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=1
android:text="button"
android:id="#+id/but"/>
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=1
/>
</LinearLayout>
Android tries to automatically level everything off of the text and not the buttons themselves.
Took me forever to finally figure it out. Its really simple. Should fix it.
myButton.setGravity(Gravity.CENTER_VERTICAL);
or if they are in a row.. attach the buttons to a table row, then.
myTableRow.setGravity(Gravity.CENTER_VERTICAL);