The image is covering the textView and buttons(I cant even see them at all so I'm guessing they are behind the image). Image is attached. I want the textview and buttons to appear below the imageview. Below is my xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/bw" />
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2" />
</LinearLayout>
You can change the main layout to RelativeLayout, set the ImageView at the top and wrap the views below the ImageView, inside a separate layout.
By setting android:layout_above="#+id/linear" for the ImageView, you will be sure that the ImageView will never cover the other views.
<?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:orientation="vertical">
<ImageView
android:id="#+id/imageView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linear"
android:layout_alignParentTop="true"
android:scaleType="fitStart"
android:src="#drawable/bw" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:gravity="center_horizontal">
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
</LinearLayout>
</RelativeLayout>
Try changing the parent layout to a RelativeView, or a ConstraintView. If you don't want to redo your positioning of your layout, you can wrap everything except the Image in a LinearLayout.
<RelativeView>
<ImageView>
<LinearLayout>
//...All your stuff
</LinearLayout>
<RelativeView>
This isn't one way of course, try to experiment. Feel free to ask if you still encounter problems.
Related
I am new to android programming and I am trying to slide my view over image.This is my code(Not sure if this is the right way)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ron"
android:scaleType="fitCenter"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/cv">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_photo"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_name"
android:layout_toRightOf="#+id/person_photo"
android:layout_alignParentTop="true"
android:textSize="30sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_age"
android:layout_toRightOf="#+id/person_photo"
android:layout_below="#+id/person_name"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
I want to scroll my cardview over image keeping image fixed.something like eclipsing the image.
and after scrolling completely the image should get hidden.(I dont want it to flow under toolbar)
Try to place your CardView into ScrollView and add CardView's marginTop which equals to your Image's height.
I want to design an android activity with a relative layout. There should be 3 (or later 4) elements in a vertical line among each other. I've tried it, but the textview is hidden behind the listview.
What's wrong with the code, how should I change it and how should it look, if I want to insert a fourth element between the text and listview or the listview and button ... like a image.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:paddingBottom="10dp"
android:layout_above="#+id/listview"
android:text="#string/info" />
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_marginBottom="10dp" />
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="start"
android:src="#drawable/button1" />
</RelativeLayout>
Try changing ReltiveLayout to LinearLayoutor put LinearLayout outside your RelativeLayout, whith orientation="vertical" an put the TextView outside RelativeLayout. Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<RelativeLayout
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_marginBottom="10dp" />
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="start"
android:src="#drawable/button1" />
</RelativeLayout>
</LinearLayout>
I have a lot of info to put on one xml page. Now i got what I want in the positions i want. However instead of fitting all my data on 3 key parts without running into each other, It keeps running into the next TextView. I was wondering how to have it auto adjust.
<?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:orientation="vertical" >
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/back" />
<TextView
android:id="#+id/makeup_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginTop="97dp"
android:text="#string/part_section_2" />
<TextView
android:id="#+id/part_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/info_title"
android:layout_marginLeft="19dp"
android:layout_marginTop="38dp"
android:text="put text here for info" />
<TextView
android:id="#+id/part_safety"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_makeup"
android:layout_below="#+id/safety_title"
android:layout_marginTop="28dp"
android:text="put text here for safety" />
<TextView
android:id="#+id/info_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="42dp"
android:text="#string/part_section_1" />
<TextView
android:id="#+id/part_makeup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/part_info"
android:layout_below="#+id/makeup_title"
android:layout_marginTop="33dp"
android:text="put text here for makeup" />
<TextView
android:id="#+id/safety_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/part_makeup"
android:layout_marginTop="48dp"
android:text="#string/part_section_3" />
<TextView
android:id="#+id/part_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:textColor="#b70000"
android:textSize="16sp"
android:text="put text here for part title" />
</RelativeLayout>
would ScrollView work better? and how would switch this from this to ScrollView.
skin is 480x800
density is high(240)
Strings file - http://pastie.org/8534713
Changing to ScrollView (source):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- your Button and TextView widgets -->
</RelativeLayout>
</ScrollView>
Edit:
As well as that, try changing your back button XML to this:
<Button
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/part_safety"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/back" />
The problem was android:layout_alignParentBottom="true". The bottom ended up not going to the bottom of the page like you had before. The ScrollView cut back on the bottom of the layout.
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;
}
In the UI for my application I have 5 ImageButton all is ok on the 3.7" screen but if I have a screen of 2.7", 3.0" or other my UI will not scale and it looks bad. It looks like this:
3,7"
2,7"
How do I make all have a nice look on all screens, just like on the screen 3.7"?
Code: main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/two"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"
android:orientation="vertical"
android:scaleType="fitXY" >
<ImageButton
android:id="#+id/ibTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/one" />
</LinearLayout>
</RelativeLayout>
Use a RelativeLayout, and then place a LinearLayout with height wrap_content and put the buttons inside that LinearLayout. Also use dp instead of px for sizes.
P.S. If you post the code of your layout, we can help you better.
EDITED: Now that I can see your code I can show you want I meant with my answer:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/two"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:gravity="center"
android:layout_centerInParent="true" >
<ImageButton
android:id="#+id/ibTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
<ImageButton
android:id="#+id/ibTest5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/one" />
</LinearLayout>
</RelativeLayout>
Can you provide some code?
Maybe try add to in xml
android:scaleType="fitXY"
First make image for all
mdpi,hdpi,ldpi
as per their size.
take Lineatlayout in center for Buttons only.
then set property gravity="Center" ;
Make sure your are using dp insted of using 'px'..Its a common cause.
try this add in each imageview in xml
android:adjustViewBounds="true"
android:scaleType="centerCrop"