I recently struggled with an apparently simple Android layout: I wanted a WebView above a Button. It worked fine with the following parameters:
WebView:
Height: wrap-content
Weight: unset (by the way, what is the default?)
Button:
Height: wrap-content
Weight: unset
However if the web page became too big it spilled out over the button. I tried various combinations of weights and heights, and all except one either completely hide the button, or partially cover it. This is the one that works (copied from http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/WebViewDemo/res/layout/main.xml):
WebView:
Height: 0
Weight: 1
Button:
Height: wrap-content
Weight: unset
If you change any of those, e.g. give button a weight or change the WebView height to wrap-content then it doesn't work. My question is: Why? Can someone please explain what on Earth the android layout system is thinking?
Something like the following should give you what you want. The key is the layout_height="fill_parent" and layout_weight="1" for the WebView.
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Edit: Whoops, I misunderstood your question. It's the layout_weight that makes it not spill over the button (or textview in your example). I'm not sure why it happens, but if there's one "fill_parent" item in your LinearLayout, in addition to one or more "wrap_content" items, you need to specify a layout_weight for the "fill_parent" item, or it'll take over the space for the rest of the widgets.
Well I since have understood this. The way the android layout system works is:
All the things are laid out according to their specified height/width.
Any remaining weight is distributed among the views according to their weights.
(Obviously this is never explained.)
Therefore to get it to work you want the button to be wrap-content, which makes it just as big as it needs to be, and the webview to be zero height (since it can shrink to zero). After step 1 you will have the button correct, and then webview zero-height.
Then you set the button weight to 0, and the webview weight to 1, so that any remaining space is given to the webview - i.e. it expands to fill the screen.
Makes perfect sense when you know the algorithm.
you can specify the heigth of your webView in pixels
android:layout_heigth = " 70px"
for example
hope it helps
You can try something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent" >
<WebView
android:id="#+id/wv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/btn" />
<Button
android:id="#+id/btn"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Ok, here’s the code to make this:
The above picture has 2 rows of buttons: one on top and one on the bottom. In the middle is the WebView.
Here is my GitHub account where u can download the source code:
https://github.com/GeneChuang1/Android/tree/Android
Otherwise, here is the App breakdown:
The Java Code (AndroidMobileAppSampleActivity.java):
package com.gene;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import com.gene.R;
public class AndroidMobileAppSampleActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.app_page);
WebView mainWebView = (WebView) findViewById(R.id.webcontent);
WebSettings webSettings = mainWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mainWebView.setWebViewClient(new MyCustomWebViewClient());
mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
mainWebView.loadUrl("http://www.google.com");
}
private class MyCustomWebViewClient extends WebViewClient {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
}
I have 2 XML layouts. One for the main webpage, the other is a pre-made menu that I in the main webpage.
The XML Layout “app_page.xml”:
<?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">
<LinearLayout
android:id="#+id/page_weekly_items_options_menu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#d4dbe1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/share"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedShare"></ImageView>
<ImageView
android:id="#+id/left_arrow"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedLeftArrow"></ImageView>
<ImageView
android:id="#+id/right_arrow"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedRightArrow"></ImageView>
<ImageView
android:id="#+id/notifications_pageweeklyitem"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedNotificationsPageWeeklyItem"></ImageView>
<ImageView
android:id="#+id/favorites_pageweeklyitem"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedFavoritesPageWeeklyItem"></ImageView>
</LinearLayout>
<RelativeLayout
android:id="#+id/webcontent_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#id/page_weekly_items_options_menu">
<WebView
android:id="#+id/webcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/menu"
></WebView>
<include
android:id="#+id/menu"
layout="#layout/bottom_menu"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:layout_weight="1"
/>
</RelativeLayout>
</RelativeLayout>
The other XML layout is “bottom_menu.xml”:
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_scroll_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<!-- This layout is used by activity_main.xml.
It is part of the main home page -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#17528c"
android:orientation="horizontal" >
<ImageView
android:id="#+id/Weekly"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedWeekly" >
</ImageView>
<ImageView
android:id="#+id/Search"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedSearch" >
</ImageView>
<ImageView
android:id="#+id/Favorites"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedFavorites" >
</ImageView>
<ImageView
android:id="#+id/Notifications"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedNotifications" >
</ImageView>
<ImageView
android:id="#+id/Profile"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedProfile" >
</ImageView>
<ImageView
android:id="#+id/About"
android:layout_width="60dp"
android:layout_height="50dp"
android:background="#drawable/icon"
android:clickable="true"
android:onClick="userClickedAbout" >
</ImageView>
</LinearLayout>
</HorizontalScrollView>
The Android Manifest (just incase someone forgets the internet permission):
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="tscolari.mobile_sample"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission.INTERNET"/>
<application android:icon="#drawable/icon" android:label="#string/app_name">
<activity android:name=".AndroidMobileAppSampleActivity"
android:label="#string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Again, here is my GitHub account where u can download the source code:
https://github.com/GeneChuang1/Android/tree/Android
-Gene Chuang
Related
I have a simple android layout and code, but the keyboard always overlap my AutoCompleteTextView when I click it.
Note : The AutoCompleteTextView when inside ScrollView.
Note : platform is 6.0.1
package com.example.jason_wu.search;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.AutoCompleteTextView;
public class Main2Activity extends AppCompatActivity {
private AutoCompleteTextView mAtv;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
mAtv = (AutoCompleteTextView) findViewById(R.id.location_auto_complete);
//issue 1
//mAtv.setBackground(getDrawable(R.drawable.search_input_focus));
//issue 2
mAtv.setHeight(300);
}
}
and my AndroidManifest.xml here:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.jason_wu.search">
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity
android:name="com.example.jason_wu.search.Main2Activity"
android:windowSoftInputMode="adjustPan"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
Layout.xml :
<?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"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/scrollView" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="800dp"
android:text="Large Text"
android:id="#+id/textView"/>
<AutoCompleteTextView
android:id="#+id/location_auto_complete"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView"
android:background="#color/transparent"
android:dropDownAnchor="#+id/location_auto_complete"
android:dropDownHeight="wrap_content"
android:dropDownVerticalOffset="1dip"
android:fontFamily="sans-serif-light"
android:hint="#string/new_notification_location_hint"
android:imeOptions="actionSearch"
android:inputType="textUri"
android:dropDownSelector="#color/location_bg_select"
android:popupBackground="#color/location_bg_notselect"
android:singleLine="true"
android:textColor="#FFFFFF"
android:alpha="0.2"
android:textColorHint="#999999"
android:textCursorDrawable="#null"
android:textSize="15sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView2"
android:layout_below="#+id/location_auto_complete" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
See
try this attribute to the activity in the AndroidManifest.xml
android:windowSoftInputMode="stateHidden|adjustPan"
it should look something like this.
<activity
android:name="com.myexample.TestActivity"
android:label="#string/login_screen"
android:screenOrientation="portrait" // well you can change the orientation if you want
android:windowSoftInputMode="stateHidden|adjustPan" />
the attribute you want to play with is this windowSoftInputMode try different values as you may require different output after certain time.
adjustPan
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.
adjustResize
The activity's main window is always resized to make room for the soft keyboard on screen.
stateHidden
The soft keyboard is hidden when the user chooses the activity — that is, when the user affirmatively navigates forward to the activity, rather than backs into it because of leaving another activity.
you can find more details on activity-element documentation
Update
I have written something that might help you, layout is available on the layout
<?xml version="1.0" encoding="utf-8"?>
<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="activities.list.first.TestLayoutActivity">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/TestLayoutActivity_autoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:completionThreshold="1"
android:drawableLeft="#android:drawable/ic_menu_search"
android:text="" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
AndroidManifest.xml
<activity
android:name="activities.list.first.TestLayoutActivity"
android:label="#string/title_activity_test_layout"
android:windowSoftInputMode="stateHidden|adjustPan"
/>
Code is on the code
String[] list = {"match1", "match2", "match3",
"match12", "match11", "match8", "match7", "match4",
"match13", "match10", "match9", "match6", "match5",};
AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.TestLayoutActivity_autoCompleteTextView);
ArrayAdapter<String> adapter
= new ArrayAdapter<String>(getApplicationContext(), R.layout.simple_list_item_1, list);
autoCompleteTextView.setAdapter(adapter);
Before
After
[
Try limiting the dropdown items to show
One way is you can Limit the dropdown items to show. But there's no such proper way of it to show number of maximumSuggestions option, But the trick you can apply is Get the height of one of the rows and multiply it (number of rows to show) times and use setDropDownHeight() to set its height.
There is a method setDropDownHeight of AutoCompleteTextView class. You can see them and use.
If you are confused or not sure of height of suggestions items you can customize this. Have a look how to set custom height.
The keyboard behavior is that scroll the view to close the bottom of text area.
Finally, we have to use android:gravity="bottom" attribute to solve UI issue, but we need to consider the UX, ex: Hint.
So, The solution is to listen onClick() and For keyboard issue, we have to use dynamic method to set the gravity.
I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.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:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?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:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).
As I posted here how-can-i-create-layout-for-both-320dp-and-360dp. In that question I gave a simple example about two buttons. But Now I've my layout for 320dp and I couldn't create a layout for 360dp like Motorola Atrix. Because the solution was given was related for LinearLayout and my layout now is Relative. How can I avoid or fill the blank space at right?
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/bg_tapfast" >
<ImageView
android:id="#+id/img_logomaior"
android:layout_width="#dimen/default_width_img_logomaior"
android:layout_height="#dimen/default_height_img_logomaior"
android:src="#drawable/img_logomaior"
android:layout_marginTop="#dimen/margin_top_img_logomaior"
android:layout_marginLeft="#dimen/margin_left_img_logomaior"
android:layout_alignParentLeft="true" />
<ImageView
android:id="#+id/img_mode_tapcolor"
android:layout_width="#dimen/default_width_mode_tapcolor"
android:layout_height="#dimen/default_height_mode_tapcolor"
android:src="#drawable/mode_tapcolor"
android:layout_marginTop="#dimen/margin_top_mode_tapcolor"
android:layout_marginLeft="#dimen/margin_left_mode_tapcolor" />
<ImageView
android:id="#+id/img_mode_tapname"
android:layout_width="#dimen/default_width_mode_tapname"
android:layout_height="#dimen/default_height_mode_tapname"
android:src="#drawable/mode_tapname"
android:layout_marginTop="#dimen/margin_top_mode_tapname"
android:layout_marginLeft="#dimen/margin_left_mode_tapname" />
<ImageView
android:id="#+id/img_mode_tapgroup"
android:layout_width="#dimen/default_width_mode_tapgroup"
android:layout_height="#dimen/default_height_mode_tapgroup"
android:src="#drawable/mode_tapgroup"
android:layout_marginTop="#dimen/margin_top_mode_tapgroup"
android:layout_marginLeft="#dimen/margin_left_mode_tapgroup" />
<ImageView
android:id="#+id/img_tap_2be"
android:layout_width="#dimen/default_width_tap_2be"
android:layout_height="#dimen/default_width_tap_2be"
android:src="#drawable/tap_2be"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/margin_left_tap_2be" />
<ImageView
android:id="#+id/img_bt_howtoplay"
android:layout_width="#dimen/default_width_bt_howtoplay"
android:layout_height="#dimen/default_height_bt_howtoplay"
android:src="#drawable/bt_howtoplay"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Motorola Atrix
Samsung Galaxy SII
This might help you
http://developer.android.com/resources/articles/layout-tricks-efficiency.html
and this one http://developer.android.com/resources/articles/layout-tricks-merge.html
You'll have to post your code for me to be sure.
But you should be able to add an attribute like this to your RelativeLayout:
android:gravity="center_horizontal"
EDIT: I think if you put your 3 ImageViews inside of their own layout and set the gravity on the top level parent to be center horizontal it will keep all of your ImageViews in the same position relative to each other, but it will also scoot them over some so they are centered no matter which device you are running on.
something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:background="#drawable/bg_tapfast" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/img_logomaior"
android:layout_width="#dimen/default_width_img_logomaior"
android:layout_height="#dimen/default_height_img_logomaior"
android:src="#drawable/img_logomaior"
android:layout_marginTop="#dimen/margin_top_img_logomaior"
android:layout_marginLeft="#dimen/margin_left_img_logomaior"
android:layout_alignParentLeft="true" />
<ImageView
android:id="#+id/img_mode_tapcolor"
android:layout_width="#dimen/default_width_mode_tapcolor"
android:layout_height="#dimen/default_height_mode_tapcolor"
android:src="#drawable/mode_tapcolor"
android:layout_marginTop="#dimen/margin_top_mode_tapcolor"
android:layout_marginLeft="#dimen/margin_left_mode_tapcolor" />
<ImageView
android:id="#+id/img_mode_tapname"
android:layout_width="#dimen/default_width_mode_tapname"
android:layout_height="#dimen/default_height_mode_tapname"
android:src="#drawable/mode_tapname"
android:layout_marginTop="#dimen/margin_top_mode_tapname"
android:layout_marginLeft="#dimen/margin_left_mode_tapname" />
<ImageView
android:id="#+id/img_mode_tapgroup"
android:layout_width="#dimen/default_width_mode_tapgroup"
android:layout_height="#dimen/default_height_mode_tapgroup"
android:src="#drawable/mode_tapgroup"
android:layout_marginTop="#dimen/margin_top_mode_tapgroup"
android:layout_marginLeft="#dimen/margin_left_mode_tapgroup" />
<ImageView
android:id="#+id/img_tap_2be"
android:layout_width="#dimen/default_width_tap_2be"
android:layout_height="#dimen/default_width_tap_2be"
android:src="#drawable/tap_2be"
android:layout_alignParentBottom="true"
android:layout_marginLeft="#dimen/margin_left_tap_2be" />
<ImageView
android:id="#+id/img_bt_howtoplay"
android:layout_width="#dimen/default_width_bt_howtoplay"
android:layout_height="#dimen/default_height_bt_howtoplay"
android:src="#drawable/bt_howtoplay"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</RelativeLayout>
This is my .xml file where I have used two scrollview,in Input Edittext and onether in output TextView. What is wrong here...It is not working in android device.
Another problem is that when I turn my device it only shows the input text area. The output text area goes down.I want to see the half screen of input and half screen of output area.
How to fix it??
Thanks
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:orientation="horizontal" >
<Button
android:id="#+id/test"
android:layout_width="60dp"
android:layout_height="38dp"
android:text="#string/test" />
<Button
android:id="#+id/rdf"
android:layout_width="60dp"
android:layout_height="38dp"
android:text="#string/rdf" />
<Button
android:id="#+id/load"
android:layout_width="75dp"
android:layout_height="38dp"
android:text="#string/load" />
<Button
android:id="#+id/clear"
android:layout_width="60dp"
android:layout_height="38dp"
android:text="#string/clear" />
<Button
android:id="#+id/close"
android:layout_width="fill_parent"
android:layout_height="38dp"
android:text="#string/close" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/input"
android:layout_width="0dp"
android:layout_height="175dp"
android:layout_weight="1"
android:background="#fff"
android:ems="10"
android:gravity="top|left"
android:textSize="14dp"
android:inputType="textMultiLine" >
<requestFocus />
</EditText>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/run"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/run" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/output"
android:layout_width="match_parent"
android:layout_height="225dp"
android:background="#fff"
android:text="#string/output"
android:textColor="#1e90ff" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Try setting layout_weight=1 and layout_height=0dp for the two scroll views instead of their
contents.
What is wrong here...It is not working in android device.
That's pretty vague. What were your expectations? What isn't working? In other words, please be a little more specific.
However, based on the layout code given, here are some recommendations:
Avoid hardcoding the size of views. You cannot make assumptions about screen size with the large variety of screen sizes, densities and devices out there. Also, even if you're able to make the layout look nice in portrait mode, it'll probably be not even close to that in landscape.
If you're going to put just a single View in a ScrollView, there's no need to wrap it in a ViewGroup container; just set the View directly, without nesting it again and added an extra layer of complexity to the view hierarchy.
There's no need to wrap a TextView or EditText with a ScrollView, as both views are scrollable by itself.
Regarding your second question: you can prevent Android from extracting all UI components when there's little layout estate left with the keyboard popped up. You'll need to set the IME_FLAG_NO_EXTRACT_UI flag on the EditText, or in xml: android:imeOptions="flagNoExtractUi".
I do like to point out that there's a reason Android has this behaviour by default. In most cases it hardly makes sense to force a tiny part of the UI to be visible, even more as whatever is being typed by the user is probably what really matters.
Ice Cream Sandwich (Android 4.0) adds the option of having the Action Bar at the bottom of the screen on phones, and that's something I'd love to have in an application of mine. The docs mention uiOptions="splitActionBarWhenNarrow" for when you want something, i.e. tabs, at the top and Action Bar shortcuts at the bottom. I've tried adding the line in the application manifest, as described in the docs, but haven't got it working thus far.
Here's an example:
Also, I noticed that on my Galaxy Nexus, which runs ICS, that the messaging application has the Action Bar the bottom and nothing but the title on the top, so it must be possible to somehow force the Action Bar to be at the bottom.
Any ideas?
I've tried adding the line in the application manifest, as described in the docs, but haven't got it working thus far.
It worked for me in this sample project. Here is the manifest:
<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.commonsware.android.actionbarbc"
xmlns:android="http://schemas.android.com/apk/res/android">
<application android:hardwareAccelerated="true"
android:icon="#drawable/cw"
android:label="#string/app_name">
<activity android:label="#string/app_name"
android:name=".InflationDemo"
android:uiOptions="splitActionBarWhenNarrow">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="4"
android:targetSdkVersion="11" />
<supports-screens android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true" />
</manifest>
Also, I noticed that on my Galaxy Nexus, which runs ICS, that the messaging application has the Action Bar the bottom and nothing but the title on the top, so it must be possible to somehow force the Action Bar to be at the bottom.
If you are referring to the conversation list, that is the ActionBar at the top and bottom, using splitActionBarWhenNarrow and the following setup code:
private void setupActionBar() {
ActionBar actionBar = getActionBar();
ViewGroup v = (ViewGroup)LayoutInflater.from(this)
.inflate(R.layout.conversation_list_actionbar, null);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM,
ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(v,
new ActionBar.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT,
ActionBar.LayoutParams.WRAP_CONTENT,
Gravity.CENTER_VERTICAL | Gravity.RIGHT));
mUnreadConvCount = (TextView)v.findViewById(R.id.unread_conv_count);
}
I'm using ActionBarSherlock and I had a similar problem. I solved it by putting android:uiOptions="splitActionBarWhenNarrow" within the <activity> tag, rather than the <application> tag.
For example, this worked:
<activity android:name=".my.Activity"
android:uiOptions="splitActionBarWhenNarrow"/>
and this didn't work:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.slowchop.etc"
android:uiOptions="splitActionBarWhenNarrow">
Edit here is the image :).
back again with a best results :). first thing you need to do is
create a layout name it header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="#dimen/action_bar_height"
android:layout_gravity="top"
android:baselineAligned="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/action_bar_glyph_back" />
<ImageView
android:id="#+id/bright"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/action_bar_glyph_lux" />
<ImageView
android:id="#+id/rotate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/rotate" />
<ImageView
android:id="#+id/bright"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/action_bar_glyph_lux" />
<ImageView
android:id="#+id/rotate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/rotate" />
<ImageView
android:id="#+id/forwa"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".14"
android:background="#drawable/action_bar_left_button"
android:src="#drawable/forward" />
</LinearLayout>
after that go to your MainActivity.class and create this method.
private void setupActionBar() {
ActionBar actionBar = getActionBar();
//actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
ViewGroup v = (ViewGroup)LayoutInflater.from(this)
.inflate(R.layout.header, null);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM,
ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(v,
new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
ActionBar.LayoutParams.WRAP_CONTENT,
Gravity.CENTER_VERTICAL | Gravity.RIGHT));
}
add setupActionBar(); to your onCreate Activity and run your app :).
now you have custom ActionBar with Dividers and Images P.S the divider is defined in the layout as an image background :).
well you can't force to stay at the bottom on tablets but if phone yeah you can do that through the manifest. but you can do something is similar to bottom bar and top bar.
will in this example i'll show you how to use merge to do that easily without the need of using android ActionBar.
first thing you need to create is your main_activity.xml in my case the main_activity.xml only contains ImageView on RelativeLayout. here is the code.
<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"
tools:context=".MainActivity" >
<RelativeLayout android:id="#+id/RelativeLayout04"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<include layout="#layout/header" />
</RelativeLayout>
<ImageView
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_above="#+id/RelativeLayout03"
android:layout_below="#+id/RelativeLayout04"
android:layout_centerHorizontal="true"
android:src="#android:drawable/alert_dark_frame" />
<RelativeLayout android:id="#+id/RelativeLayout03"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<include layout="#layout/tryit" />
</RelativeLayout>
as you can see in above code, there are two merges i put inside the main_activity.xml one defined at bottom and one defined at the top.
here is the fake bottom bar xml.
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="0.14"
android:background="#drawable/dock" >
<ImageView
android:id="#+id/dark"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.14" />
<ImageView
android:id="#+id/stock"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.14" />
<ImageView
android:id="#+id/open"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.14" />
<ImageView
android:id="#+id/border"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.15" />
<ImageView
android:id="#+id/color"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.15"
/>
</LinearLayout>
i'm putting a fixed background to the LinearLayout and fake the ImageView for onClicks.
and here is the top bar. `
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_weight="0.14"
android:background="#drawable/dock1"
android:layout_gravity="top">
<ImageView
android:id="#+id/darka"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.14" />
<ImageView
android:id="#+id/stocka"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.14" />
<ImageView
android:id="#+id/opena"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.14" />
<ImageView
android:id="#+id/bordera"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.15" />
<ImageView
android:id="#+id/colora"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.15"
/>
</LinearLayout>
`
which also copy paste from the bottom bar above. just change one thing from android:layout_alignParentBottom="true" to android:layout_alignParentTop="true" and you got an actionBar at the bottom and at the top. in this case you wont need to use the ActionBar so i suggest you to use Theme.Holo.NoActionBar
and here is the image result :- http://i.imgur.com/N8uKg6v.png
this is a project i'm working on Now. done almost everything but still struggling with the design. hope my answer benefit you. please vote the answer up if you found it interesting.
best regards. ~Kosh
try this...
private View contentView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
contentView = getLayoutInflater().inflate(R.layout.activity_main, null);
setContentView(contentView);
LinearLayout layout = (LinearLayout) contentView.getParent().getParent();
View view = layout.getChildAt(0);
layout.removeViewAt(0);
layout.addView(view);
}