This is what I am require to do(The menu):
and this is what I have achieved so far:
Please see the horizontal line below an image within the list.I cannot make my screen-shot similar to the requirement.
Code:
popupmenurow.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"//this is the image icon
android:layout_margin="10dp"
android:contentDescription="#null" />
<ImageView//this is the horizontal line
android:contentDescription="#null"
android:id="#+id/horizontalline"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_below="#+id/imgmenuicon"
android:layout_alignLeft="#+id/imgmenuicon"
android:layout_alignRight="#+id/imgmenuicon"
android:background="#4d4b56" />
</RelativeLayout>
<ImageView
android:contentDescription="#null"
android:id="#+id/verticalline"
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="15dp"
android:background="#4d4b56" />
<TextView
android:id="#+id/tvmenutitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:text="Hello"
android:textColor="#color/menutextcolor"
android:textSize="16sp" />
</LinearLayout>
and here is the list popup_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/popup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical" >
<ListView
android:id="#+id/list_slide"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:choiceMode="singleChoice"
android:divider="#null"
/>
</LinearLayout>
What shall I do to make the horizontal line below the imageview,similar to that of my requirement(The image on the top)?
If I remove
android:layout_alignLeft="#+id/imgmenuicon"
android:layout_alignRight="#+id/imgmenuicon"
then the line is not showing up.Also I understand that the margins occuring to the left and right of the horizontal line is due to android:layout_margin="10dp" within the imageview.But I cannot find a solution.
ANSWER
Thank you all for your precious time.Finally I have solved the problem.The solution of M090009 was close but I couldn't make it.Finally thanks to Vijay for giving me the idea about the background.
What I have done is to cut an image like this:
and set that image as the background of the relative layout within which my menu-icons resides.
Here is the full code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/rl_image"
android:background="#drawable/line_box"
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imgmenuicon"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:layout_centerHorizontal="true"
android:scaleType="centerInside" />
<!-- <View
android:id="#+id/horizontalline"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_alignLeft="#+id/imgmenuicon"
android:layout_alignRight="#+id/imgmenuicon"
android:layout_below="#+id/imgmenuicon"
android:background="#4d4b56"
android:layout_marginTop="5dp"
android:padding="10dp"
android:contentDescription="#null" /> -->
</RelativeLayout>
<ImageView
android:id="#+id/verticalline"
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#4d4b56"
android:contentDescription="#null" />
<TextView
android:id="#+id/tvmenutitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_gravity="center_vertical"
android:paddingLeft="5dp"
android:text="Hello"
android:textColor="#color/menutextcolor"
android:textSize="16sp" />
</LinearLayout>
and here is the output:
Well you can remove the margin on the icon image and set its scaleType to center_corp as follows
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"//this is the image icon
android:contentDescription="#null"
android:scaleType="center_corp"/>
If the above solutions not working mean then try this. Because all the solutions are good.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/bordercolor" >
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:contentDescription="#null" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.75" >
<TextView
android:id="#+id/tvmenutitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:text="Hello"
android:textColor="#android:color/black"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
Change imgmenuicon's attr:
android:layout_margin="10dp"
to
android:padding="10dp"
BTW, the line should use <View ... android:background.../> instead of <ImmageView ... />
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="270dp"
android:layout_height="78dp"
android:background="#ffffff"
android:orientation="horizontal" >
<RelativeLayout
android:layout_gravity="center_vertical|left"
android:id="#+id/rl_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="#android:drawable/alert_dark_frame"
android:contentDescription="#null" />
<View
android:contentDescription="#null"
android:id="#+id/horizontalline"
android:layout_width="100dp"
android:layout_height="1dp"
android:layout_below="#id/imgmenuicon"
android:background="#000" />
<View
android:contentDescription="#null"
android:id="#+id/verticalline"
android:layout_width="1dp"
android:layout_toRightOf="#+id/horizontalline"
android:layout_height="fill_parent"
android:background="#4d4b56" />
</RelativeLayout>
<TextView
android:id="#+id/tvmenutitle"
android:layout_gravity="center_vertical|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Hello"
android:textSize="18sp" />
Try this and let me know!!!:D
Remove the Imageview for that divider and add this:
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/static_account"
android:background="#color/divider"/>
Related
I'm trying to create a custom listview with 4 columns. Everything works fine, except for the height of each row, it's too big.
Here the result I have:
The problem comes from my button, because android take a weird height, that doesn't match the height of my image (I already check my image and it have the right proportion).
Here an example:
And I would like the "zone" of my image to just be the size of my image.
Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<TextView
android:id="#+id/txtAudioNom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/black"
android:layout_weight="25"
android:text="Audio 1"/>
<TextView
android:id="#+id/txtAudioDate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/black"
android:layout_weight="18" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginEnd="10dp"
android:layout_weight="29">
<ImageView
android:id="#+id/imgAudioNote"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/icon_star"
app:tint="#color/purple_500"
android:contentDescription="#string/txt_content_desc"/>
<TextView
android:id="#+id/txtAudioNote"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20sp"
android:textColor="#color/white" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginEnd="5dp"
android:layout_weight="29">
<ImageButton
android:id="#+id/btnAudioPlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:gravity="center"
android:background="#android:color/transparent"
android:src="#drawable/icon_play"
app:tint="#color/purple_500"
android:contentDescription="#string/txt_content_desc" />
</RelativeLayout>
</LinearLayout>
If you have any idea on how I can change that, thank you
EDIT:
I found a solution, I needed to add this line of code to my ImageButton:
android:adjustViewBounds="true"
Needed changes:
wrap_content all the views.
android:layout_centerInParent="true" the txtAudioNote
Extra:
No need to the RelativeLayout at the bottom.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:id="#+id/txtAudioNom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="25"
android:gravity="center"
android:text="Audio 1"
android:textColor="#color/black"
android:textSize="17sp" />
<TextView
android:id="#+id/txtAudioDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="18"
android:gravity="center"
android:textColor="#color/black"
android:textSize="17sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="29"
android:gravity="center">
<ImageView
android:id="#+id/imgAudioNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
app:src="#drawable/icon_star"
android:contentDescription="#string/txt_content_desc"
app:tint="#color/purple_500" />
<TextView
android:id="#+id/txtAudioNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#null"
android:gravity="center"
android:text="4"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
<ImageButton
android:id="#+id/btnAudioPlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_weight="29"
android:background="#android:color/transparent"
android:gravity="center"
android:scaleType="fitCenter"
android:contentDescription="#string/txt_content_desc"
android:src="#drawable/icon_play"
app:tint="#color/purple_500" />
</LinearLayout>
He has found a solution which he states in the EDIT:
android:adjustViewBounds="true"
But I want to add for those who want to do it programmatically.
//add in onCreate
view.setAdjustViewBounds(true);
I have two image in layout .I want to show second image in bottom edge curve of first image .Can anybody tell how to do like overlay image
Thanks
Use FrameLayout :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageView
android:id="#+id/imgSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:src="#drawable/ic_launcher"/>
</FrameLayout>
Use a RelativeLayout, simple put the second ImageView below the first ImageView. Then what you have to do is to set the marginTop attribute of the second image to a negative value, and this value is the overlaying size, like this android:layout_marginTop="-1dp".
A sample code right below:
<?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"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/firstImage"
android:src="#drawable/myimage1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="-1dp"
android:layout_height="wrap_content"
android:id="#+id/secondImage"
android:layout_below="#+id/firstImage"
android:src="#drawable/myimage2"
/>
</RelativeLayout>
You can do it without Frames, only using RelativeLayout, if you make use of the alignParentalXXX tags as in the following example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E4E3CE"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="75">
<ImageView
android:id="#+id/backgroundImageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#ffffff" />
<ImageView
android:id="#+id/imageView"
android:layout_width="66dp"
android:layout_height="66dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:background="#40000000"
android:gravity="center_vertical"
android:paddingHorizontal="3dp"
android:paddingVertical="1dp"
android:text="Header Text"
android:textColor="#ffffff"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
You can see how this layout looks like in the following image:
Use Frame Layout like sample below :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#android:color/black"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/ic_drawer"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="14dp"
android:src="#drawable/menu" />
<ImageView
android:id="#+id/ic_drawer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/textView1_detail"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:src="#drawable/ic_drawer" />
<TextView
android:id="#+id/textView1_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/imageView1"
android:text="Reports"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/overlay_favorite"
android:layout_width="215dp"
android:layout_height="134dp"
android:layout_gravity="right"
android:background="#drawable/overlay_favorite"
android:visibility="gone" />
</FrameLayout>
</LinearLayout>
When I use Scrollview in my codes my background image stretches and scrolls with buttons. I want just buttons scroll, not the background. I have attached a related image that you can figure this out.
Here is the XML file:
<?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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/back"
android:orientation="vertical" >
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/app"
android:layout_gravity="center"
android:background="#drawable/bluebutton"
android:layout_marginTop="80dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/moshiri"
android:background="#drawable/bluebutton"
android:layout_marginTop="8dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/about"
android:background="#drawable/bluebutton"
android:layout_marginTop="8dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/exit"
android:background="#drawable/bluebutton"
android:layout_marginTop="8dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
</LinearLayout>
</ScrollView>
This thing worked fine for me.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/gearImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="#drawable/imageName" />
</ScrollView>
Set the background image on the ScrollView and add Padding to the ScrollView or Margins to the Linearlayout.
make 1 Linearlayout at root instead of scrollview and use android:background="#drawable/back" to that layout as
<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:background="#drawable/back" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/back"
android:orientation="vertical" >
<ImageButton
android:id="#+id/app"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="80dp"
android:layout_marginRight="80dp"
android:layout_marginTop="80dp"
android:background="#drawable/bluebutton" />
<ImageButton
android:id="#+id/moshiri"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginRight="80dp"
android:layout_marginTop="8dp"
android:background="#drawable/bluebutton" />
<ImageButton
android:id="#+id/about"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginRight="80dp"
android:layout_marginTop="8dp"
android:background="#drawable/bluebutton" />
<ImageButton
android:id="#+id/exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginRight="80dp"
android:layout_marginTop="8dp"
android:background="#drawable/bluebutton" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Here I am assuming that your #drawable/back is your given image background
This worked for me. The image was resized automatically and filled the entire background (Adjusted on width and cropped on height.)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/app_back_image" />
</RelativeLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:isScrollContainer="true">
...
</ScrollView>
</RelativeLayout>
As Raanan said, set the background image on the ScrollView, but to prevent backround from streching on different screen size, you can add gravity to it.
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/back"
android:gravity="top" />
Do this,
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#drawable/back"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/app"
android:layout_gravity="center"
android:background="#drawable/bluebutton"
android:layout_marginTop="80dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/moshiri"
android:background="#drawable/bluebutton"
android:layout_marginTop="8dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/about"
android:background="#drawable/bluebutton"
android:layout_marginTop="8dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/exit"
android:background="#drawable/bluebutton"
android:layout_marginTop="8dp"
android:layout_marginRight="80dp"
android:layout_marginLeft="80dp"
/>
</LinearLayout>
</ScrollView>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".CadetEnrollmentFormActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:src="#drawable/background" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--put your view here -->
</LinearLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
You can use LinearLayout as a root element of ScrollView.
Then set your background to Linearlayout.
<LinearLayout
.......
android:background="#drawable/background">
<ScrollView
........>
<LinearLayout
.......>
//your code hear
<LinearLayout/>
<ScrollView/>
<LinearLayout/>
Add your manifest to the respective activity
android:windowSoftInputMode="adjustResize"
Please share code to achieve the layout of the screen shown in the below link. The text should be in center of the two images and all these components can be dynamic.
(https://docs.google.com/file/d/0B9n2IhVep_QeNDFKaWFHVERQOVk/edit?usp=sharing)
https://www.dropbox.com/s/2j4bpwdmv0wgesg/Untitled%20Diagram.png
Hope this works
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="TextView" />
</LinearLayout>
An easier way to do this is
<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/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/yourBackgroundDrawableBorder"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:background="#drawable/yourBackgroundDrawableBorder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"
android:padding="xxdp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/global_menu_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:text="Textview" />
</RelativeLayout>
You need to add the custom drawables for the shapes you desire for your views..and yes obviously this is a very generic way to do it. You obviously have to edit some properties or add some to suit your needs. The other way is to use LinearLayout and the android:layout_weight="1" property to make your imageviews similar in size.
<?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:gravity="center"
android:orientation="vertical"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:layout_marginLeft="10dp"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="3"
android:layout_marginTop="10dp"
android:text="Text" />
</LinearLayout>
I'm laying out a row for use in a ListView and I need a little help. The row will look like this:
Below is what I have so far, the highlight bg is not showing up and the text won't align center (sticks to the top).
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
android:background="#color/grey">
<!-- shine -->
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imgShine"
android:background="#color/shine"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1" />
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:id="#+id/ll"
android:layout_gravity="center_vertical">
<!-- cal graphic -->
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp">
<!-- cal bg -->
<ImageView
android:id="#+id/imageView1"
android:src="#drawable/cal"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
<!-- month -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvMonth"
android:textSize="11sp"
android:layout_marginLeft="11dp"
android:layout_marginTop="10dp"
android:textColor="#drawable/list_cal_selector" />
<!-- day -->
<TextView
android:id="#+id/tvDay"
android:textSize="23sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvMonth"
android:layout_marginTop="2dp"
android:layout_centerHorizontal="true"
android:textColor="#drawable/list_cal_selector" />
</RelativeLayout>
<!-- text and button graphic -->
<RelativeLayout
android:id="#+id/rl2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_gravity="center_vertical">
<!-- team name -->
<TextView
android:id="#+id/tvTeam"
android:textSize="23dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="0dp"
android:textColor="#drawable/list_text_selector" />
<TextView
android:id="#+id/tvTime"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTeam"
android:textColor="#drawable/list_text_selector" />
<TextView
android:id="#+id/tvStation"
android:textSize="12sp"
android:paddingLeft="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTeam"
android:layout_toRightOf="#+id/tvTime"
android:textColor="#drawable/list_text_selector" />
<!-- add button -->
<ImageView
android:id="#+id/imgAddBtn"
android:src="#drawable/btn"
android:layout_height="wrap_content"
android:layout_width="60dp"
android:scaleType="fitCenter"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:layout_alignParentRight="true"
android:padding="10dp" />
<!-- divider -->
<ImageView
android:id="#+id/imgDivider"
android:src="#drawable/divider"
android:layout_height="fill_parent"
android:layout_width="2dp"
android:layout_toLeftOf="#id/imgAddBtn"
android:cropToPadding="false" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>
I would use just one RelativeLayout. It will avoid the use of various Layouts and
its easier to place componentes on screen.
edit: This solution works, but I don't know if it's the best:
<?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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_weight="0.25"/>
<ImageView
android:layout_weight="0.5"
android:layout_height="0dp"
android:layout_width="50dp"
android:background="#dedede"/>
<View
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_weight="0.25"/>
</LinearLayout>
<!--
...
-->
</RelativeLayout>
Look at this tutorials you can choose which layout is best. Every layout has own merits and demerits. Only one that layout is not best in android but in most cases Relative layout easy to use because it has move to easy any where of UI.
just like your matches problems, tutorials
http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html
you can see more layout of in developer.android.con. which has to learn more simply way. here some Best links you can see various layouts.
http://developer.android.com/resources/tutorials/views/hello-relativelayout.html
http://developer.android.com/guide/topics/ui/layout-objects.html
http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-relative-layouts/
http://www.learn-android.com/2010/01/05/android-layout-tutorial/
Check this out
![<?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="35dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:scaleType="centerInside"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="4"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Row 1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Row 2" />
<TextView
android:layout_marginLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Row 3" />
</LinearLayout>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="2dp"
android:background="#fff"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:scaleType="centerInside"
android:src="#drawable/ic_launcher" />
</LinearLayout>