Do android:layout_...s work with ImageViews? From the picture you can see that all 10 rows are on top of each other so that means that q2Image is not accepting the code android:layout_below="#/q1Image" for it to drop down a line and star the next row.
Am I just missing something or am I trying to do something that is impossible?
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="65"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/q1Image"
android:layout_width="10dp"
android:layout_height="10dp" />
<TextView
android:id="#+id/q1Question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/q1Image" />
<TextView
android:id="#+id/q1Answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/q1Question" />
<TextView
android:id="#+id/q1Verse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/q1Answer" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<ImageView
android:id="#+id/q2Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_below="#id/q1Image" />
<TextView
android:id="#+id/q2Question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/q2Image" />
<TextView
android:id="#+id/q2Answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/q2Question" />
<TextView
android:id="#+id/q2Verse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/q2Answer" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
//Above code is first 2 rows. There are 10 rows total but I removed the code for rows 3-10 for this post.
Try to put + between # and id and everything must be ok
#+id
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- here the columns -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- here the columns -->
</LinearLayout>
.
.
</LinearLayout>
Referencing Id's like that not always working. Replace "#id" with "#+id" everywhere.
Example:
android:layout_below="#+id/q1Image"
The way you are accessing the ids in the code is correct. "#+id" is used to declare the id. All references to it following the declaration should be "#id". Are you having the same problems with the TextViews also? I think you should set the layout_below property for the TextViews as well. Because I can see text is also overlapped in your UI. eg.,
<TextView
android:id="#+id/q2Question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below = "#id/q1Question"
android:layout_toRightOf="#id/q2Image" />
RelativeLayout will not place a view below another unless you specify layout_below for it. Hence your TextViews appear overlapped.
Related
I'm creating a gridview that items come from database..
Every thing works well.. but when I try my app I see these merged items in the image below..
So the question is : What is the reason for this and how to fix it ?
This is my xml :
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:horizontalSpacing="10dp"
android:columnWidth="130dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp" >
</GridView>
and this is my grid item 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:background="#drawable/round_rect"
android:padding="15dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/categoryIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/categoryName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
android:gravity="center"
android:text="Small Text"
android:textSize="16sp" />
</LinearLayout>
I assume the issue is that every grid cell should have the same size.
since your item has
<ImageView ...
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
a cell is as big as its image.
if you set it to some absolute size all cells should be the same
<ImageView ...
android:layout_width="100dp"
android:layout_height="100dp" />
also make shure that the TextView uses only one line
<TextView ...
android:ellipsize="start"
android:singleLine="true"
... />
I am busy designing my first app in android but I am having some problems.
I have created this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.mfr.calculatorapp.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_margin="15dp"
android:text="123"
android:id="#+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1" />
</LinearLayout>
But the two Buttons appear underneath each other and not on top of each other, I know that if I change orientation to horizontal that I will be able to position it next to each other but I want to be able to span a textview over the top.
What do I do?
Regards
Matt
You will want to use a relative layout. You will see the below code didn't need a lot of extra attributes to pull this off.
Notice that the buttons now have three additional attributes.
andoid:layout_below="#id/" : positions the element under another element
android:layout_alignWithParentIfMissing : if the above mentioned element is not present, align with the parent
android:layout_alignParentLeft : allows you to position one button to the left and one to the right
UPDATE use android:layout_alignRight="#id/textView" to properly align your second button to the right
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.mfr.calculatorapp.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_margin="15dp"
android:text="123"
android:id="#+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1"
android:layout_below="#id/textView"
android:layout_alignWithParentIfMissing="true"
android:alignParentLeft="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="2"
android:id="#+id/button_2"
android:layout_below="#id/textView"
android:layout_alignWithParentIfMissing="true"
android:alignParentRight="true"
android:layout_alignRight="#id/textView"
/>
</RelativeLayout>
How can i place two buttons side by side with an image at the bottom of the button?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/a_button"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Button-a" />
<Button
android:id="#+id/b_button"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Button-b" />
</LinearLayout>
Instead of using button u can use linear-layout(Clickable) and use its id instead of Button id.something like this...... Using this you can customize your Button as per your requirements.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
//Button-A
<LinearLayout
android:id="#+id/a_button"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0.50"
android:orientation="vertical"
android:clickable="true">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:text="Text-A"
android:paddingTop="10dip"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/image_A"
android:paddingTop="13dip" />
</LinearLayout>
//For Horizontal partition line
<TextView
android:layout_width="2dp"
android:layout_height="fill_parent"
android:background="#303030"
android:paddingTop="20dip" />
//Button-B
<LinearLayout
android:id="#+id/b_button"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0.50"
android:orientation="vertical"
android:clickable="true">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text-B"
android:gravity="center_horizontal|center_vertical"
android:paddingTop="10dip" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/image_B"
android:paddingTop="13dip"
/>
</LinearLayout>
</LinearLayout>
You can place images at the bottom of buttons with the Drawable_Bottom property.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#android:attr/buttonBarStyle"
android:orientation="horizontal" >
<Button
android:id="#+id/a_button"
style="#android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/btn_star"
android:text="Button-a" />
<Button
android:id="#+id/b_button"
style="#android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#android:drawable/btn_star"
android:text="Button-b" />
</LinearLayout>
Just add below line to both your buttons and specify the drawable you want to use.
android:drawableBottom="#drawable/image"
Hope this helps.
EDIT:
Above method works if you want to use your drawables as it is i.e. without modifying its dimensions. If you wish you modify you drawable dimentions as well then you can do that through simple Java code written below:
((Button)findViewById(R.id.button)).setCompoundDrawables(null, null, null, getDrawable(getApplicationContext(), R.drawable.image, 25));
.....
.....
Drawable getDrawable(Context context, int drawable, float form_factor) {
Drawable imgDrawable = context.getResources().getDrawable(drawable);
imgDrawable.setBounds(0, 0, (int)form_factor, (int)form_factor);
return imgDrawable;
}
Hoping this is a simple one
I want two textviews on the same line aligned to the left.
Currently my layout is as shown:
I want this layout(note i modified the diagram on paint):
here is the xml i currently have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtSetItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:layout_weight="2"
android:textAppearance="?android:attr/textAppearanceLarge"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false"/>
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusableInTouchMode="false"
android:focusable="false" />
<TextView
android:id="#+id/txtSetAmount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false" />
<TextView
android:id="#+id/txtSetPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:focusableInTouchMode="false"
android:clickable="false"
android:focusable="false"/>
hmm your layout shouldn't compile-- there is no attribute android:layout_width on the TextView objects.
To fix this, remove layout_weight and set layout_width to wrap_content
Anyways, here:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this"
/>
</LinearLayout>
Change your first TextView's weight to 0 (or to something smaller than 1). You're giving them equal weight and LinearLayout places them in a way that gives them equal width, which isn't what you want.
Don't use weight.
Use wrap_content on the layout_width.
This will get you what you are looking for:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This"
android:paddingLeft="10dp" />
</LinearLayout>
one way to go about this would be to use relative layout .
You can change how "close" or "far" apart the two textviews will be using changing the android:layout_marginLeft property on textView2.
The following property:
android:layout_alignBaseline="#+id/textView1"
makes sure that tv2 is aligned with tv1.
<?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" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="26dp"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_marginLeft="32dp"
android:layout_toRightOf="#+id/textView1"
android:text="TextView" />
</RelativeLayout>
I am trying to display two texts in a layout such that they are displayed one after the other but the following code is pasting the strings right above each other. What should I do. I tried to exchange fill_parent & wrap_content between the two textviews but it is worthless
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:text="#string/hello_world"
tools:context=".StartingPoint" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:text="#string/testing"
tools:context=".StartingPoint" />
You have to put the property below in the second TextView and set on the below property the id of the first TextView
change your two TextView by this two:
<TextView
android:id="#+id/TextView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:text="#string/hello_world"
tools:context=".StartingPoint" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/TextView1"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:text="#string/testing"
tools:context=".StartingPoint" />
But you need to read the documentation at android developers first, because that is very basic.
Hope to help :)
Use LinearLayout as the parent layout and set its orientation to horizontal. This will work.
You have to tell the RelativeLayout how it has to place the different views.
Documentation: http://developer.android.com/guide/topics/ui/layout/relative.html
It could be simpler to use a LinearLayout.
If you need RelativeLayout menas,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="FirstText"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="secondText"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Else you need LinearLayout means,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FirstText"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="secondText"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
In the Case of Relative layout you need the textview is one by one means use this parameter, android:layout_below="#+id/textView1" else you are using LinearLayout means use this parameter android:orientation="vertical"